AngularLynx

    LynxTheme

    The device's light or dark appearance as a signal. import { LynxTheme } from '@blotch/angular-lynx';

    Usage

    src/app/app.ts
    import { Component, inject } from '@angular/core';
import { LYNX_ELEMENTS, LynxTheme } from '@blotch/angular-lynx';

@Component({
  selector: 'app-root',
  imports: [LYNX_ELEMENTS],
  template: `
    <view [class.dark]="theme.isDarkMode()">
      <text>The theme is {{ theme.theme() }}</text>
    </view>
  `,
})
export class App {
  readonly theme = inject(LynxTheme);
}

    API

    LynxTheme

    @Injectable({ providedIn: 'root' })
class LynxTheme {}

    Reads the theme value that the host app sets in its global data. The host usually sets it from the operating system's appearance setting.

    LynxTheme.theme

    readonly theme: Signal<'Light' | 'Dark'>;

    The current theme. 'Light' when the host sets none.

    LynxTheme.isDarkMode

    readonly isDarkMode: Signal<boolean>;

    true when theme() is 'Dark'.

    Types

    None of its own.