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.

Constructors

constructor

Properties

darkQuery document mediaMatcher storage themeChange

Accessors

dataBsTheme html isAuto isDark isLight theme

Methods

initiate setTheme

Constructors

constructor

Properties

Protected ReadonlydarkQuery

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

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

Protected Readonlydocument

document: Document

The global document object.

Protected ReadonlymediaMatcher

mediaMatcher: MediaMatcher

The MediaMatcher service used to match media queries.

Readonlystorage

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.

ReadonlythemeChange

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

dataBsTheme

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

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

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

  • set dataBsTheme(value): 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

Protectedhtml

isAuto

isDark

isLight

theme

  • 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): void

  • Changes the current theme.

    Parameters

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

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

    Returns void

Methods

initiate

  • initiate(): void

  • 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

ProtectedsetTheme

  • setTheme(value): 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