@amirsavand/ngx-common - v5.1.0
    Preparing search index...

    Class ThemeBaseService

    Service for managing the application's theme.

    This service is responsible for storing the selected theme in local storage and applying it to the application. It also supports live theme changes based on user preference or system settings.

    This service is best used in conjunction with a Bootstrap-based application that supports both light and dark themes.

    Usage:

    • Instantiate the service in your Angular application.
    • Call the initiate method during the application's initialization process.
    Index

    Constructors

    constructor

    Properties

    darkQuery document mediaMatcher storage themeChange

    Accessors

    dataBsTheme html isAuto isDark isLight theme

    Methods

    initiate setTheme

    Constructors

    • Constructs the ThemeBaseService.

      Parameters

      • document: Document

        The global document object.

      • mediaMatcher: MediaMatcher

        The MediaMatcher service used to match media queries.

      Returns ThemeBaseService

    Properties

    darkQuery: "(prefers-color-scheme: dark)" = '(prefers-color-scheme: dark)'

    Media query used to detect if the user's system prefers a dark theme.

    document: Document

    The global document object.

    mediaMatcher: MediaMatcher

    The MediaMatcher service used to match media queries.

    storage: InlineStorage<"auto" | "light" | "dark"> = ...

    InlineStorage instance that manages the current theme in local storage.

    The theme is stored with a key of 'theme', and the default theme is the first element in THEMES.

    themeChange: EventEmitter<"auto" | "light" | "dark"> = ...

    EventEmitter that triggers whenever the theme changes.

    Subscribers can use this to react to theme changes in real-time.

    Accessors

    • get dataBsTheme(): "auto" | "light" | "dark"

      Returns "auto" | "light" | "dark"

      The value of the [data-bs-theme] attribute from the <html> element.

    • set dataBsTheme(value: "auto" | "light" | "dark"): void

      Sets the theme in the [data-bs-theme] attribute of the <html> element.

      Parameters

      • value: "auto" | "light" | "dark"

        The new theme to set. Must be one of the THEMES.

      Returns void

    • get html(): HTMLHtmlElement

      Returns HTMLHtmlElement

      The <html> HTML element of the document.

    • get isAuto(): boolean

      Returns boolean

      true if the current theme is set to auto; otherwise, false.

    • get isDark(): boolean

      Returns boolean

      true if the current theme is dark; otherwise, false.

    • get isLight(): boolean

      Returns boolean

      true if the current theme is light; otherwise, false.

    • get theme(): "auto" | "light" | "dark"

      Returns "auto" | "light" | "dark"

      The current theme, validated against the available themes.

      If the stored theme is not in THEMES, it falls back to the default theme.

    • set theme(value: "auto" | "light" | "dark"): void

      Changes the current theme.

      Parameters

      • value: "auto" | "light" | "dark"

        The new theme to apply. Must be one of the THEMES.

      Returns void

    Methods

    • Initializes the theme service.

      This method must be called during the application's initialization process. It sets the initial theme and attaches an event listener to handle changes in the system's color scheme preference.

      Returns void

    • Sets the theme and updates the [data-bs-theme] attribute of the <html> element.

      This method ensures that the theme is stored in local storage and applies the appropriate theme based on the current settings and system preferences.

      Parameters

      • value: "auto" | "light" | "dark"

        The theme to set. Must be one of the THEMES.

      Returns void

    Settings

    Member Visibility

    On This Page

    Constructors
    Properties
    Accessors
    Methods