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 DefaultPreference IsInitialized Preference Preference$ Starred$ ThemesChanged$

    Methods

    ApplyBrandOverlay ClearBrandOverlay GetSelectedBrandThemeId GetStarredThemeIds GetThemeDefinition Initialize IsStarred NotifyThemesChanged RegisterBrandTheme RegisterTheme RegisterThemes Reset RestorePersistedBrandOverlay 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 DefaultPreference(): string

      What Initialize applies when nothing is saved: the first theme REGISTERED with ThemeDefinition.IsDefault (registration order, not registry slot order — re-registering a built-in slot with the flag does not jump the queue), else 'system'. Public so a picker can mark the default.

      Returns string

    • 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).

      Scoped to the brand: only the brand's own <link> is disabled and the data-theme-overlay attribute is dropped only when it still names that brand. Bootstrap calls this on every login where the org has no active brand, right after Initialize() applied the user's theme, so a blanket clear would switch off a user's custom theme on any install that never used Theme Studio.

      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

    • Put the persisted org brand overlay back BEFORE first paint, from localStorage alone — no registry, no database. Call it from the earliest code that runs in the app (the explorer-app constructor), so the sign-in page and the shell's loading screen paint branded on a cold load instead of waiting for bootstrap to re-emit the overlay.

      Injects the persisted CSS as a <style> (bootstrap's real <link> replaces it), sets data-theme-overlay, and records the id so Initialize does not strip the attribute before bootstrap registers the brand. A CSS entry whose id no longer matches the persisted overlay id is stale and is dropped. Returns whether anything was restored.

      Returns boolean

    • 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