@truenas/ui-components 0.1.22 → 0.1.23

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truenas/ui-components",
-  "version": "0.1.22",
+  "version": "0.1.23",
   "publishConfig": {
     "registry": "https://registry.npmjs.org",
     "access": "public"

package/types/truenas-ui-components.d.ts

@@ -4023,7 +4023,8 @@ interface TnThemeDefinition {
  *
  * Features:
  * - Signal-based reactive theme state
- * - LocalStorage persistence (key: 'tn-theme')
+ * - OS color scheme detection (prefers-color-scheme)
+ * - LocalStorage persistence for explicit user choices (key: 'tn-theme')
  * - Automatic CSS class application to document root
  * - SSR-safe (checks for browser platform)
  *
@@ -4043,9 +4044,12 @@ interface TnThemeDefinition {
  *     // Get current theme (signal)
  *     const currentTheme = this.themeService.currentTheme();
  *
- *     // Set theme using enum (recommended)
+ *     // Set theme using enum (recommended) — persists to localStorage
  *     this.themeService.setTheme(TnTheme.Blue);
  *
+ *     // Clear user preference and follow OS theme
+ *     this.themeService.clearPreference();
+ *
  *     // React to theme changes
  *     effect(() => {
  *       console.log('Theme changed to:', this.themeService.currentTheme()?.label);
@@ -4057,10 +4061,24 @@ interface TnThemeDefinition {
 declare class TnThemeService {
     private readonly platformId;
     private readonly isBrowser;
+    private readonly destroyRef;
     /**
      * Internal signal holding the current theme enum value
      */
     private readonly currentThemeSignal;
+    /**
+     * Whether the user has explicitly selected a theme (vs OS-detected default).
+     * When true, theme is persisted to localStorage and OS changes are ignored.
+     */
+    private readonly userSelected;
+    /**
+     * Reference to the prefers-color-scheme media query for cleanup
+     */
+    private colorSchemeQuery;
+    /**
+     * Bound listener reference for cleanup
+     */
+    private readonly colorSchemeListener;
     /**
      * Computed signal that returns the full theme definition for the current theme
      */
@@ -4069,6 +4087,10 @@ declare class TnThemeService {
      * Computed signal that returns the current theme's CSS class name
      */
     readonly currentThemeClass: _angular_core.Signal<string>;
+    /**
+     * Whether the current theme is based on OS preference (no explicit user choice)
+     */
+    readonly isUsingSystemTheme: _angular_core.Signal<boolean>;
     /**
      * All available theme definitions in the library (readonly array)
      */
@@ -4076,7 +4098,8 @@ declare class TnThemeService {
     constructor();
     /**
      * Set the current theme.
-     * Updates the signal, which triggers effects to apply CSS and save to localStorage.
+     * Marks this as an explicit user choice, persists to localStorage,
+     * and stops following OS color scheme changes.
      *
      * @param theme - The theme to set (use TnTheme enum)
      * @returns true if theme was found and set, false otherwise
@@ -4092,17 +4115,30 @@ declare class TnThemeService {
      */
     getCurrentTheme(): TnTheme;
     /**
-     * Reset theme to default
+     * Reset theme to default by clearing user preference and reverting to OS detection.
      */
     resetToDefault(): void;
+    /**
+     * Clear user preference and revert to OS-based theme detection.
+     * Removes the stored theme from localStorage and follows the OS color scheme.
+     */
+    clearPreference(): void;
     /**
      * Check if a theme exists
      */
     hasTheme(theme: TnTheme): boolean;
     /**
-     * Initialize theme from localStorage or use default
+     * Initialize theme from localStorage or OS color scheme preference
      */
     private initializeTheme;
+    /**
+     * Detect OS color scheme preference and apply corresponding theme
+     */
+    private applySystemTheme;
+    /**
+     * Listen for OS color scheme changes and apply them when no user preference is set
+     */
+    private listenForColorSchemeChanges;
     /**
      * Apply theme CSS class to document root.
      * Removes all other theme classes first to avoid conflicts.
@@ -4125,6 +4161,10 @@ declare class TnThemeService {
  * Default theme used when no theme is set
  */
 declare const DEFAULT_THEME = TnTheme.Dark;
+/**
+ * Light theme used when OS preference is light
+ */
+declare const LIGHT_THEME = TnTheme.Blue;
 /**
  * localStorage key for storing the current theme name
  */
@@ -4139,5 +4179,5 @@ declare const TN_THEME_DEFINITIONS: readonly TnThemeDefinition[];
  */
 declare const THEME_MAP: Map<TnTheme, TnThemeDefinition>;
 
-export { CommonShortcuts, DEFAULT_THEME, DiskIconComponent, DiskType, FileSizePipe, InputType, LinuxModifierKeys, LinuxShortcuts, ModifierKeys, QuickShortcuts, ShortcutBuilder, StripMntPrefixPipe, THEME_MAP, THEME_STORAGE_KEY, TN_THEME_DEFINITIONS, TnBannerActionDirective, TnBannerComponent, TnBannerHarness, TnBrandedSpinnerComponent, TnButtonComponent, TnButtonHarness, TnButtonToggleComponent, TnButtonToggleGroupComponent, TnCalendarComponent, TnCalendarHeaderComponent, TnCardComponent, TnCellDefDirective, TnCheckboxComponent, TnChipComponent, TnConfirmDialogComponent, TnDateInputComponent, TnDateRangeInputComponent, TnDialog, TnDialogHarness, TnDialogShellComponent, TnDialogTesting, TnDividerComponent, TnDividerDirective, TnEmptyComponent, TnEmptyHarness, TnExpansionPanelComponent, TnFilePickerComponent, TnFilePickerPopupComponent, TnFormFieldComponent, TnHeaderCellDefDirective, TnIconButtonComponent, TnIconButtonHarness, TnIconComponent, TnIconHarness, TnIconRegistryService, TnIconTesting, TnInputComponent, TnInputDirective, TnInputHarness, TnKeyboardShortcutComponent, TnKeyboardShortcutService, TnListAvatarDirective, TnListComponent, TnListIconDirective, TnListItemComponent, TnListItemLineDirective, TnListItemPrimaryDirective, TnListItemSecondaryDirective, TnListItemTitleDirective, TnListItemTrailingDirective, TnListOptionComponent, TnListSubheaderComponent, TnMenuActivateHoverDirective, TnMenuComponent, TnMenuTriggerDirective, TnMonthViewComponent, TnMultiYearViewComponent, TnNestedTreeNodeComponent, TnParticleProgressBarComponent, TnProgressBarComponent, TnRadioComponent, TnSelectComponent, TnSelectHarness, TnSelectionListComponent, TnSidePanelActionDirective, TnSidePanelComponent, TnSidePanelHarness, TnSidePanelHeaderActionDirective, TnSlideToggleComponent, TnSliderComponent, TnSliderThumbDirective, TnSliderWithLabelDirective, TnSpinnerComponent, TnSpriteLoaderService, TnStepComponent, TnStepperComponent, TnTabComponent, TnTabHarness, TnTabPanelComponent, TnTabPanelHarness, TnTableColumnDirective, TnTableComponent, TnTabsComponent, TnTabsHarness, TnTheme, TnThemeService, TnTimeInputComponent, TnTooltipComponent, TnTooltipDirective, TnTreeComponent, TnTreeFlatDataSource, TnTreeFlattener, TnTreeNodeComponent, TnTreeNodeOutletDirective, TruncatePathPipe, WindowsModifierKeys, WindowsShortcuts, createLucideLibrary, createShortcut, defaultSpriteBasePath, defaultSpriteConfigPath, libIconMarker, registerLucideIcons, setupLucideIntegration, tnIconMarker };
+export { CommonShortcuts, DEFAULT_THEME, DiskIconComponent, DiskType, FileSizePipe, InputType, LIGHT_THEME, LinuxModifierKeys, LinuxShortcuts, ModifierKeys, QuickShortcuts, ShortcutBuilder, StripMntPrefixPipe, THEME_MAP, THEME_STORAGE_KEY, TN_THEME_DEFINITIONS, TnBannerActionDirective, TnBannerComponent, TnBannerHarness, TnBrandedSpinnerComponent, TnButtonComponent, TnButtonHarness, TnButtonToggleComponent, TnButtonToggleGroupComponent, TnCalendarComponent, TnCalendarHeaderComponent, TnCardComponent, TnCellDefDirective, TnCheckboxComponent, TnChipComponent, TnConfirmDialogComponent, TnDateInputComponent, TnDateRangeInputComponent, TnDialog, TnDialogHarness, TnDialogShellComponent, TnDialogTesting, TnDividerComponent, TnDividerDirective, TnEmptyComponent, TnEmptyHarness, TnExpansionPanelComponent, TnFilePickerComponent, TnFilePickerPopupComponent, TnFormFieldComponent, TnHeaderCellDefDirective, TnIconButtonComponent, TnIconButtonHarness, TnIconComponent, TnIconHarness, TnIconRegistryService, TnIconTesting, TnInputComponent, TnInputDirective, TnInputHarness, TnKeyboardShortcutComponent, TnKeyboardShortcutService, TnListAvatarDirective, TnListComponent, TnListIconDirective, TnListItemComponent, TnListItemLineDirective, TnListItemPrimaryDirective, TnListItemSecondaryDirective, TnListItemTitleDirective, TnListItemTrailingDirective, TnListOptionComponent, TnListSubheaderComponent, TnMenuActivateHoverDirective, TnMenuComponent, TnMenuTriggerDirective, TnMonthViewComponent, TnMultiYearViewComponent, TnNestedTreeNodeComponent, TnParticleProgressBarComponent, TnProgressBarComponent, TnRadioComponent, TnSelectComponent, TnSelectHarness, TnSelectionListComponent, TnSidePanelActionDirective, TnSidePanelComponent, TnSidePanelHarness, TnSidePanelHeaderActionDirective, TnSlideToggleComponent, TnSliderComponent, TnSliderThumbDirective, TnSliderWithLabelDirective, TnSpinnerComponent, TnSpriteLoaderService, TnStepComponent, TnStepperComponent, TnTabComponent, TnTabHarness, TnTabPanelComponent, TnTabPanelHarness, TnTableColumnDirective, TnTableComponent, TnTabsComponent, TnTabsHarness, TnTheme, TnThemeService, TnTimeInputComponent, TnTooltipComponent, TnTooltipDirective, TnTreeComponent, TnTreeFlatDataSource, TnTreeFlattener, TnTreeNodeComponent, TnTreeNodeOutletDirective, TruncatePathPipe, WindowsModifierKeys, WindowsShortcuts, createLucideLibrary, createShortcut, defaultSpriteBasePath, defaultSpriteConfigPath, libIconMarker, registerLucideIcons, setupLucideIntegration, tnIconMarker };
 export type { BannerHarnessFilters, ButtonHarnessFilters, CalendarCell, ChipColor, CreateFolderEvent, DateRange, DialogHarnessFilters, EmptyHarnessFilters, FilePickerCallbacks, FilePickerError, FilePickerMode, FileSystemItem, IconButtonHarnessFilters, IconHarnessFilters, IconLibrary, IconLibraryType, IconResult, IconSize, IconSource, IconTestingMockOverrides, InputHarnessFilters, KeyCombination, LabelType, LucideIconOptions, MockIconRegistry, MockSpriteLoader, PathSegment, PlatformType, ProgressBarMode, ResolvedIcon, SelectHarnessFilters, ShortcutHandler, SidePanelHarnessFilters, SlideToggleColor, SpinnerMode, SpriteConfig, TabChangeEvent, TabHarnessFilters, TabPanelHarnessFilters, TabsHarnessFilters, TnBannerType, TnButtonToggleType, TnCardAction, TnCardControl, TnCardFooterLink, TnCardHeaderStatus, TnConfirmDialogData, TnDialogDefaults, TnDialogOpenTarget, TnEmptySize, TnFlatTreeNode, TnMenuItem, TnSelectOption, TnSelectOptionGroup, TnSelectionChange, TnTableDataSource, TnThemeDefinition, TooltipPosition, YearCell };