Member Junction
    Preparing search index...

    Class ThemeService

    Service to manage application themes with pluggable custom theme support.

    Built-in themes (light/dark) work identically to before. Custom themes inherit from a base theme and overlay additional CSS token overrides via a dynamically loaded stylesheet.

    CSS resolution for custom themes (e.g. "Izzy Dark" extending dark):

    1. :root light defaults (from _tokens.scss in this package)
    2. [data-theme="dark"] dark overrides (from _tokens.scss in this package)
    3. [data-theme-overlay="izzy-dark"] custom overrides (loaded dynamically)

    Follows the DeveloperModeService pattern:

    • Settings persisted via UserInfoEngine
    • BehaviorSubject for reactive state
    • Initialize after login, Reset on logout
    Index

    Constructors

    constructor

    Accessors

    AppliedTheme AppliedTheme$ AvailableThemes BrandOverlayId IsInitialized Preference Preference$ Starred$ ThemesChanged$

    Methods

    ApplyBrandOverlay ClearBrandOverlay GetSelectedBrandThemeId GetStarredThemeIds GetThemeDefinition Initialize IsStarred NotifyThemesChanged RegisterBrandTheme RegisterTheme RegisterThemes Reset SetSelectedBrandTheme SetTheme ToggleStar

    Constructors

    Accessors

    • get AppliedTheme(): string

      Currently applied theme ID (synchronous access)

      Returns string

    • get AppliedTheme$(): Observable<string>

      Observable for the actually applied theme (resolved theme ID)

      Returns Observable<string>

    • get BrandOverlayId(): string | null

      The active org brand overlay id, or null if none is applied.

      Returns string | null

    • get IsInitialized(): boolean

      Whether the service has been initialized

      Returns boolean

    • get Preference(): string

      Current theme preference (synchronous access)

      Returns string

    • get Preference$(): Observable<string>

      Observable for user's theme preference (theme ID or 'system')

      Returns Observable<string>

    • get Starred$(): Observable<string[]>

      Reactive list of the user's starred brand theme ids.

      Returns Observable<string[]>

    • get ThemesChanged$(): Observable<void>

      Emits after any saved-theme mutation so open dashboards can refresh their lists.

      Returns Observable<void>

    Methods

    • Apply an org brand overlay **independently of the user's light/dark mode. The overlay layers under whatever base theme is active and is re-asserted whenever the user toggles light/dark. Persists the id to localStorage so the pre-paint script restores the attribute on next load.

      Parameters

      • id: string

        id of a brand theme registered via RegisterBrandTheme.

      • Optionaloptions: { persist?: boolean }
        • Optionalpersist?: boolean

          pass false for session-only overlays backed by Blob URLs (e.g. Theme Studio's draft workspace preview) — a Blob URL doesn't survive a reload, so persisting its id would leave the pre-paint script pointing at a dangling overlay and clobber the user's real persisted selection. Defaults true.

      Returns Promise<void>

    • Remove the active org brand overlay (revert to the base MJ tokens).

      Returns void

    • The brand theme the user last applied (or null to follow the org default).

      Returns string | null

    • The user's starred brand theme ids (synchronous).

      Returns string[]

    • Initialize the theme service. Call after login when UserInfoEngine is available.

      Returns Promise<void>

    • Whether a theme id is starred by the user.

      Parameters

      • id: string

      Returns boolean

    • Broadcast that the set of saved themes changed (create/rename/delete/duplicate/default).

      Returns void

    • Register a brand theme from its seeds.

      Derives the full --mj-* token contract with @memberjunction/theme-engine, emits the [data-theme-overlay="<id>"] CSS, and publishes it as a session-scoped Blob URL that plugs into the existing CssUrl overlay path — so brand themes apply through the same machinery as file-based custom themes. Returns the derived theme so callers can surface the a11y contrast report / previews.

      The emitted overlay overrides only the primitive ramps (plus viz/shadow/font/ radius); every semantic token and the [data-theme="dark"] block reference those primitives, so both light and dark re-point automatically off one block.

      Parameters

      • params: {
            baseTheme?: "light" | "dark";
            customCss?: string | null;
            description?: string;
            id: string;
            logos?: ThemeLogos;
            name: string;
            overrides?: string | Record<string, string> | null;
            seeds: string | ThemeSeeds;
        }
        • OptionalbaseTheme?: "light" | "dark"
        • OptionalcustomCss?: string | null

          Advanced: raw CSS appended to the overlay, auto-scoped to this theme.

        • Optionaldescription?: string
        • id: string
        • Optionallogos?: ThemeLogos

          Optional logo variant URLs + geometry, emitted as --mj-logo-*.

        • name: string
        • Optionaloverrides?: string | Record<string, string> | null

          Advanced: per-token overrides (JSON map or object) merged over the derived vars.

        • seeds: string | ThemeSeeds

          ThemeSeeds object or the entity's Seeds JSON string.

      Returns DerivedTheme

    • Register a custom theme. If a theme with the same ID already exists, it is replaced (allowing override of built-in themes if desired).

      Parameters

      Returns void

    • Persist (or clear, with null) the user's chosen brand theme so login restores it.

      Parameters

      • id: string | null

      Returns Promise<void>

    • Set the theme preference and apply it.

      Parameters

      • preference: string

        A registered theme ID or 'system'

      Returns Promise<void>

    • Toggle a theme's starred state and persist to User Settings.

      Parameters

      • id: string

      Returns Promise<boolean>

      the new starred state (true = now starred).

    Settings

    Member Visibility

    On This Page

    Constructors
    Accessors
    Methods