Theme Selector

shadcn-inspired theme switcher with Light / Dark / System options. Applies colorScheme on the root element and persists the choice to localStorage. The "System" option respects the OS prefers-color-scheme media query.

Input	Type	Default	Description
`mode`	`'dropdown' \| 'toggle'`	`'dropdown'`	Display mode: dropdown menu or inline toggle group
`initialTheme`	`'light' \| 'dark' \| 'system'`	From localStorage or `'system'`	Override the starting theme
`themes`	`NgOatThemeOption[]`	Light / Dark / System	Custom theme options with labels and optional emoji icons

Output	Type	Description
`themeChange`	`NgOatTheme`	Emits when the user picks a theme

Directive	Description
`ngOatThemeSelectorIcon`	Structural directive on `<ng-template>` for fully custom icon rendering. Receives `NgOatThemeOption` as implicit context.

Import

typescript

import { Component } from '@angular/core';
import { NgOatThemeSelector, NgOatThemeSelectorIcon, NgOatThemeOption } from '@letsprogram/ng-oat';

@Component({
  imports: [NgOatThemeSelector, NgOatThemeSelectorIcon],
  template: `<ng-oat-theme-selector />`,
})
export class MyComponent {}

Dropdown Mode (default)

Click to open:

html

<ng-oat-theme-selector (themeChange)="onTheme($event)" />

Toggle Mode

Inline toggle:

html

<ng-oat-theme-selector mode="toggle" />

Custom Labels & Emoji Icons

Emoji icons:

html

// In your component class:
customThemes: NgOatThemeOption[] = [
  { value: 'light', label: 'Day',   icon: '🌅' },
  { value: 'dark',  label: 'Night', icon: '🌃' },
  { value: 'system', label: 'Auto', icon: '🖥️' },
];

// In your template:
<ng-oat-theme-selector [themes]="customThemes" />

Custom Icon Template

Template icons:

html

<!-- Full control via ng-template -->
<ng-oat-theme-selector>
  <ng-template ngOatThemeSelectorIcon let-opt>
    <my-custom-icon [name]="opt.value" />
  </ng-template>
</ng-oat-theme-selector>

With Initial Theme

Starts as dark:

html

<ng-oat-theme-selector mode="toggle" initialTheme="dark" />

Persistence

The selected theme is saved to localStorage under the key ng-oat-theme. On page reload the component reads this value and re-applies it. The "System" option adds a matchMedia('prefers-color-scheme: dark') listener so the theme automatically updates when the OS preference changes.