diff --git a/apps/36-blocks/src/app/app.component.ts b/apps/36-blocks/src/app/app.component.ts
index fcd9bdd2..89694e28 100644
--- a/apps/36-blocks/src/app/app.component.ts
+++ b/apps/36-blocks/src/app/app.component.ts
@@ -107,7 +107,8 @@ export class AppComponent extends BaseComponent implements OnInit, OnDestroy {
     }
 
     public ngOnInit(): void {
-        this.uiSettings.setTheme(this.uiSettings.theme);
+        // Keep the root theme service alive for the whole session, including system-scheme changes.
+        this.uiSettings.themePreference();
 
         this.logoutActionComplete$.subscribe((res) => {
             if (res) {
diff --git a/apps/36-blocks/src/app/panel/features/create-feature/create-feature.component.ts b/apps/36-blocks/src/app/panel/features/create-feature/create-feature.component.ts
index 5447bf4c..9730cb75 100644
--- a/apps/36-blocks/src/app/panel/features/create-feature/create-feature.component.ts
+++ b/apps/36-blocks/src/app/panel/features/create-feature/create-feature.component.ts
@@ -771,7 +771,7 @@ export class CreateFeatureComponent extends BaseComponent implements OnDestroy,
 
     /** Default primary color: black in light theme, white in dark theme */
     public getDefaultPrimaryColor(): string {
-        return this.uiSettings.theme === 'dark-theme' ? '#ffffff' : '#000000';
+        return this.uiSettings.isDark() ? '#ffffff' : '#000000';
     }
 
     /** Returns the effective primary color based on the selected branding theme */
diff --git a/apps/36-blocks/src/app/panel/features/create-feature/feature-preview/widget-preview/widget-preview.component.html b/apps/36-blocks/src/app/panel/features/create-feature/feature-preview/widget-preview/widget-preview.component.html
index 86391b44..c5153be7 100644
--- a/apps/36-blocks/src/app/panel/features/create-feature/feature-preview/widget-preview/widget-preview.component.html
+++ b/apps/36-blocks/src/app/panel/features/create-feature/feature-preview/widget-preview/widget-preview.component.html
@@ -41,14 +41,13 @@ <h1 class="text-base font-semibold text-color leading-tight">Widget Preview</h1>
                 }
             </mat-nav-list>
 
+            <div class="px-2 pb-2">
+                <p class="m-0 mb-1 px-1 text-xs secondary-text-color">Console theme</p>
+                <proxy-theme-switcher class="theme-switcher--full" />
+            </div>
             <!-- User menu footer — consistent with main layout sidebar -->
             @if (logInData$ | async; as user) {
-                <proxy-sidebar-user-menu
-                    [user]="user"
-                    [isDarkMode]="isDarkMode()"
-                    (darkModeToggled)="switchedDarkMode($event)"
-                    (loggedOut)="logOut()"
-                ></proxy-sidebar-user-menu>
+                <proxy-sidebar-user-menu [user]="user" (loggedOut)="logOut()"></proxy-sidebar-user-menu>
             }
         </div>
     </mat-drawer>
@@ -59,7 +58,7 @@ <h1 class="text-base font-semibold text-color leading-tight">Widget Preview</h1>
             hideSingleSelectionIndicator
             [value]="theme()"
             (change)="onThemeChange($event.value)"
-            aria-label="Select theme"
+            aria-label="Widget preview theme"
         >
             <mat-button-toggle [value]="WidgetTheme.Light" matTooltip="Light theme">
                 <mat-icon aria-hidden="true">light_mode</mat-icon>
diff --git a/apps/36-blocks/src/app/panel/features/create-feature/feature-preview/widget-preview/widget-preview.component.ts b/apps/36-blocks/src/app/panel/features/create-feature/feature-preview/widget-preview/widget-preview.component.ts
index 337b8146..2902c182 100644
--- a/apps/36-blocks/src/app/panel/features/create-feature/feature-preview/widget-preview/widget-preview.component.ts
+++ b/apps/36-blocks/src/app/panel/features/create-feature/feature-preview/widget-preview/widget-preview.component.ts
@@ -30,7 +30,7 @@ import { selectLogInData } from '../../../../../website/home/ngrx/selector/login
 import { ILogInFeatureStateWithRootState } from '../../../../../website/home/ngrx/store/login.state';
 import * as logInActions from '../../../../../website/home/ngrx/actions/login.action';
 import { SidebarUserMenuComponent } from '../../../../layout/sidebar-user-menu/sidebar-user-menu.component';
-import { UiSettingsService } from '../../../../layout/ui-settings.service';
+import { ThemeSwitcherComponent } from '../../../../layout/theme-switcher/theme-switcher.component';
 import { SideNavService } from '../../../../layout/side-nav.service';
 import { Location } from '@angular/common';
 import { environment } from '../../../../../../environments/environment';
@@ -61,6 +61,7 @@ export type PreviewTab =
         CopyButtonComponent,
         A11yModule,
         SidebarUserMenuComponent,
+        ThemeSwitcherComponent,
     ],
     templateUrl: './widget-preview.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -74,13 +75,11 @@ export class WidgetPreviewComponent {
     private breakpointObserver = inject(BreakpointObserver);
     private readonly _injector = inject(Injector);
     private readonly store = inject<Store<ILogInFeatureStateWithRootState>>(Store);
-    private readonly uiSettings = inject(UiSettingsService);
     private readonly sideNavService = inject(SideNavService);
 
     @ViewChild('drawer') drawer!: MatDrawer;
 
     public readonly isMobile = signal<boolean>(false);
-    public readonly isDarkMode = signal<boolean>(false);
     public readonly logInData$: Observable<IFirebaseUserModel>;
     private readonly originUrl: string | null;
 
@@ -129,7 +128,6 @@ export class WidgetPreviewComponent {
     constructor() {
         this.originUrl = this.resolveOriginUrl();
         this.logInData$ = this.store.pipe(select(selectLogInData), distinctUntilChanged(isEqual));
-        this.isDarkMode.set(this.uiSettings.theme === 'dark-theme');
         this.breakpointObserver
             .observe([Breakpoints.XSmall, Breakpoints.Small])
             .pipe(takeUntilDestroyed())
@@ -260,12 +258,6 @@ export class WidgetPreviewComponent {
         this.store.dispatch(logInActions.logoutAction());
     }
 
-    public switchedDarkMode(isDark: boolean): void {
-        const hostClass = isDark ? 'dark-theme' : 'light-theme';
-        this.uiSettings.setTheme(hostClass);
-        this.isDarkMode.set(isDark);
-    }
-
     public launchWidget(): void {
         const tab = this.activeTab();
         const isAuthTab = tab === PublicScriptType.Authorization;
diff --git a/apps/36-blocks/src/app/panel/layout/layout.component.html b/apps/36-blocks/src/app/panel/layout/layout.component.html
index 1e32c1d9..1630d085 100644
--- a/apps/36-blocks/src/app/panel/layout/layout.component.html
+++ b/apps/36-blocks/src/app/panel/layout/layout.component.html
@@ -94,13 +94,7 @@
         ></proxy-main-left-side-nav>
         <!-- Proxy Sidenav::END -->
         @if (logInData$ | async; as user) {
-            <proxy-sidebar-user-menu
-                class="mt-auto"
-                [user]="user"
-                [isDarkMode]="isDarkMode()"
-                (darkModeToggled)="switchedDarkMode($event)"
-                (loggedOut)="logOut()"
-            ></proxy-sidebar-user-menu>
+            <proxy-sidebar-user-menu class="mt-auto" [user]="user" (loggedOut)="logOut()"></proxy-sidebar-user-menu>
         }
         <div
             class="sidebar-billing-link shrink-0"
@@ -150,6 +144,7 @@
                 ><span class="context-area">{{ currentArea() }}</span>
             </div>
             <div class="context-meta">
+                <proxy-theme-switcher class="theme-switcher--responsive" />
                 <span class="environment-label"
                     ><span class="environment-prefix">Console: </span>{{ environmentLabel }}</span
                 ><a href="https://developers.36blocks.com">Developer docs ↗</a>
diff --git a/apps/36-blocks/src/app/panel/layout/layout.component.ts b/apps/36-blocks/src/app/panel/layout/layout.component.ts
index cabd033b..cd7984b9 100644
--- a/apps/36-blocks/src/app/panel/layout/layout.component.ts
+++ b/apps/36-blocks/src/app/panel/layout/layout.component.ts
@@ -4,6 +4,7 @@ import {
     Component,
     OnDestroy,
     OnInit,
+    effect,
     inject,
     signal,
 } from '@angular/core';
@@ -22,6 +23,7 @@ import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 import { ScrollingModule } from '@angular/cdk/scrolling';
 import { MainLeftSideNavComponent } from './main-left-side-nav/main-left-side-nav.component';
 import { SidebarUserMenuComponent } from './sidebar-user-menu/sidebar-user-menu.component';
+import { ThemeSwitcherComponent } from './theme-switcher/theme-switcher.component';
 import { IClient, IClientSettings, IFirebaseUserModel, IPaginatedResponse } from '@proxy/models/root-models';
 import { BaseComponent } from '@proxy/ui/base-component';
 import { Store, select } from '@ngrx/store';
@@ -59,6 +61,7 @@ import { take } from 'rxjs/operators';
         ScrollingModule,
         MainLeftSideNavComponent,
         SidebarUserMenuComponent,
+        ThemeSwitcherComponent,
     ],
     host: { class: 'flex w-full h-screen' },
     templateUrl: './layout.component.html',
@@ -70,8 +73,6 @@ export class LayoutComponent extends BaseComponent implements OnInit, OnDestroy
     public clients$: Observable<IPaginatedResponse<IClient[]>>;
     public swtichClientSuccess$: Observable<boolean>;
 
-    public isDarkMode = signal<boolean>(false);
-
     public toggleMenuSideBar: boolean;
     public showContainer = false;
     readonly currentArea = signal('Overview');
@@ -114,6 +115,9 @@ export class LayoutComponent extends BaseComponent implements OnInit, OnDestroy
 
     constructor() {
         super();
+        effect(() => {
+            this.sendThemeToChatbot(this.uiSettings.isDark() ? 'dark' : 'light');
+        });
         this.logInData$ = this.store.pipe(
             select(selectLogInData),
             distinctUntilChanged(isEqual),
@@ -169,7 +173,6 @@ export class LayoutComponent extends BaseComponent implements OnInit, OnDestroy
     ngOnInit(): void {
         this.getClients();
         this.getClientSettings();
-        this.getCurrentTheme();
         document.body.classList.remove('website-active');
 
         if (this.isMobileDevice()) {
@@ -272,19 +275,6 @@ export class LayoutComponent extends BaseComponent implements OnInit, OnDestroy
         this.store.dispatch(rootActions.switchClient({ request: { client_id: clientId } }));
     }
 
-    public getCurrentTheme() {
-        this.switchedDarkMode(this.uiSettings.theme === 'dark-theme');
-    }
-
-    public switchedDarkMode(isDarkMode: boolean) {
-        const hostClass = isDarkMode ? 'dark-theme' : 'light-theme';
-        this.uiSettings.setTheme(hostClass);
-        this.isDarkMode.set(isDarkMode);
-
-        // This GTWY chatbot config for forced theme
-        this.sendThemeToChatbot(this.isDarkMode() ? 'dark' : 'light');
-    }
-
     private sendThemeToChatbot(theme: 'light' | 'dark'): void {
         (window as any).Chatbot?.sendData({ theme });
     }
diff --git a/apps/36-blocks/src/app/panel/layout/sidebar-user-menu/sidebar-user-menu.component.html b/apps/36-blocks/src/app/panel/layout/sidebar-user-menu/sidebar-user-menu.component.html
index 9d18af47..000f59b6 100644
--- a/apps/36-blocks/src/app/panel/layout/sidebar-user-menu/sidebar-user-menu.component.html
+++ b/apps/36-blocks/src/app/panel/layout/sidebar-user-menu/sidebar-user-menu.component.html
@@ -33,10 +33,10 @@
 }
 <mat-menu #menu="matMenu" class="profile-menu ml-1 w-[260px]">
     <h4 class="m-0 py-2 px-6 text-dark font-medium">{{ user.displayName }}</h4>
-    <button type="button" mat-menu-item class="flex items-center gap-2" (click)="darkModeToggled.emit(!isDarkMode)">
-        <mat-icon class="mat-icon-18 material-icons-outlined">{{ isDarkMode ? 'dark_mode' : 'light_mode' }}</mat-icon>
-        <span>{{ isDarkMode ? 'Light Mode' : 'Dark Mode' }}</span>
-    </button>
+    <div class="theme-menu" (click)="$event.stopPropagation()" (mousedown)="$event.stopPropagation()">
+        <p class="theme-menu__label">Theme</p>
+        <proxy-theme-switcher class="theme-switcher--full" />
+    </div>
     <button
         type="button"
         mat-menu-item
diff --git a/apps/36-blocks/src/app/panel/layout/sidebar-user-menu/sidebar-user-menu.component.scss b/apps/36-blocks/src/app/panel/layout/sidebar-user-menu/sidebar-user-menu.component.scss
new file mode 100644
index 00000000..4a655a87
--- /dev/null
+++ b/apps/36-blocks/src/app/panel/layout/sidebar-user-menu/sidebar-user-menu.component.scss
@@ -0,0 +1,9 @@
+.theme-menu {
+    padding: 2px 12px 8px;
+}
+
+.theme-menu__label {
+    color: var(--experience-muted);
+    font-size: 11px;
+    margin: 0 4px 6px;
+}
diff --git a/apps/36-blocks/src/app/panel/layout/sidebar-user-menu/sidebar-user-menu.component.ts b/apps/36-blocks/src/app/panel/layout/sidebar-user-menu/sidebar-user-menu.component.ts
index 8775fb17..fbd249b7 100644
--- a/apps/36-blocks/src/app/panel/layout/sidebar-user-menu/sidebar-user-menu.component.ts
+++ b/apps/36-blocks/src/app/panel/layout/sidebar-user-menu/sidebar-user-menu.component.ts
@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, Input, Output, EventEmitter, inject, signal } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Input, Output, EventEmitter, inject } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { MatMenuModule } from '@angular/material/menu';
 import { MatButtonModule } from '@angular/material/button';
@@ -6,17 +6,17 @@ import { MatIconModule } from '@angular/material/icon';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { IFirebaseUserModel } from '@proxy/models/root-models';
 import { SideNavService } from '../side-nav.service';
+import { ThemeSwitcherComponent } from '../theme-switcher/theme-switcher.component';
 
 @Component({
     selector: 'proxy-sidebar-user-menu',
     templateUrl: './sidebar-user-menu.component.html',
+    styleUrl: './sidebar-user-menu.component.scss',
     changeDetection: ChangeDetectionStrategy.OnPush,
-    imports: [CommonModule, MatMenuModule, MatButtonModule, MatIconModule, MatTooltipModule],
+    imports: [CommonModule, MatMenuModule, MatButtonModule, MatIconModule, MatTooltipModule, ThemeSwitcherComponent],
 })
 export class SidebarUserMenuComponent {
     @Input({ required: true }) user!: IFirebaseUserModel;
-    @Input() isDarkMode = false;
-    @Output() darkModeToggled = new EventEmitter<boolean>();
     @Output() loggedOut = new EventEmitter<void>();
 
     public sideNavService = inject(SideNavService);
diff --git a/apps/36-blocks/src/app/panel/layout/theme-preference.ts b/apps/36-blocks/src/app/panel/layout/theme-preference.ts
new file mode 100644
index 00000000..f19f540b
--- /dev/null
+++ b/apps/36-blocks/src/app/panel/layout/theme-preference.ts
@@ -0,0 +1,81 @@
+export type ThemePreference = 'light' | 'dark' | 'system';
+export type AppTheme = 'light-theme' | 'dark-theme';
+
+export const UI_SETTINGS_STORAGE_KEY = 'ui-settings';
+export const UI_SETTINGS_TTL_MS = 30 * 24 * 60 * 60 * 1000;
+
+export interface StoredUiSettings {
+    theme: AppTheme;
+    themePreference: ThemePreference;
+    sideNavOpen: boolean;
+    _savedAt: number;
+}
+
+const PREFERENCES: readonly ThemePreference[] = ['light', 'dark', 'system'];
+
+export function isThemePreference(value: unknown): value is ThemePreference {
+    return value === 'light' || value === 'dark' || value === 'system';
+}
+
+/** Map a saved record onto a preference. Older records only stored the resolved class. */
+export function preferenceFromStored(stored: unknown): ThemePreference {
+    if (!stored || typeof stored !== 'object') {
+        return 'light';
+    }
+    const record = stored as { themePreference?: unknown; theme?: unknown };
+    if (isThemePreference(record.themePreference)) {
+        return record.themePreference;
+    }
+    if (record.theme === 'dark-theme') {
+        return 'dark';
+    }
+    if (record.theme === 'light-theme') {
+        return 'light';
+    }
+    return 'light';
+}
+
+/** The class that actually paints the dashboard. System follows the OS scheme. */
+export function resolveThemeClass(preference: ThemePreference, systemDark: boolean): AppTheme {
+    if (preference === 'dark') {
+        return 'dark-theme';
+    }
+    if (preference === 'light') {
+        return 'light-theme';
+    }
+    return systemDark ? 'dark-theme' : 'light-theme';
+}
+
+/**
+ * Read `localStorage['ui-settings']`. Expired, corrupt, or empty records return null
+ * so the caller can apply defaults. `apps/36-blocks/src/index.html` mirrors this before
+ * Angular boots; keep the key, TTL, preference names, and class names in step.
+ */
+export function readStoredUiSettings(raw: string | null, now: number, systemDark: boolean): StoredUiSettings | null {
+    if (!raw) {
+        return null;
+    }
+    try {
+        const parsed: unknown = JSON.parse(raw);
+        if (!parsed || typeof parsed !== 'object') {
+            return null;
+        }
+        const record = parsed as { _savedAt?: unknown; sideNavOpen?: unknown };
+        if (typeof record._savedAt !== 'number' || now - record._savedAt >= UI_SETTINGS_TTL_MS) {
+            return null;
+        }
+        const themePreference = preferenceFromStored(parsed);
+        return {
+            theme: resolveThemeClass(themePreference, systemDark),
+            themePreference,
+            sideNavOpen: typeof record.sideNavOpen === 'boolean' ? record.sideNavOpen : true,
+            _savedAt: record._savedAt,
+        };
+    } catch {
+        return null;
+    }
+}
+
+export function themePreferences(): readonly ThemePreference[] {
+    return PREFERENCES;
+}
diff --git a/apps/36-blocks/src/app/panel/layout/theme-switcher/theme-switcher.component.html b/apps/36-blocks/src/app/panel/layout/theme-switcher/theme-switcher.component.html
new file mode 100644
index 00000000..be9a798e
--- /dev/null
+++ b/apps/36-blocks/src/app/panel/layout/theme-switcher/theme-switcher.component.html
@@ -0,0 +1,26 @@
+<mat-button-toggle-group
+    class="theme-switcher"
+    hideSingleSelectionIndicator
+    [value]="preference()"
+    (change)="select($event.value)"
+    aria-label="Color theme"
+>
+    <mat-button-toggle value="light" matTooltip="Light">
+        <span class="theme-switcher__option">
+            <mat-icon class="material-icons-outlined" aria-hidden="true">light_mode</mat-icon>
+            <span class="theme-switcher__label">Light</span>
+        </span>
+    </mat-button-toggle>
+    <mat-button-toggle value="dark" matTooltip="Dark">
+        <span class="theme-switcher__option">
+            <mat-icon class="material-icons-outlined" aria-hidden="true">dark_mode</mat-icon>
+            <span class="theme-switcher__label">Dark</span>
+        </span>
+    </mat-button-toggle>
+    <mat-button-toggle value="system" matTooltip="Match system setting">
+        <span class="theme-switcher__option">
+            <mat-icon class="material-icons-outlined" aria-hidden="true">contrast</mat-icon>
+            <span class="theme-switcher__label">System</span>
+        </span>
+    </mat-button-toggle>
+</mat-button-toggle-group>
diff --git a/apps/36-blocks/src/app/panel/layout/theme-switcher/theme-switcher.component.scss b/apps/36-blocks/src/app/panel/layout/theme-switcher/theme-switcher.component.scss
new file mode 100644
index 00000000..7d615fad
--- /dev/null
+++ b/apps/36-blocks/src/app/panel/layout/theme-switcher/theme-switcher.component.scss
@@ -0,0 +1,78 @@
+:host {
+    display: inline-flex;
+    max-width: 100%;
+}
+
+:host.theme-switcher--full {
+    display: flex;
+    width: 100%;
+}
+
+:host ::ng-deep .theme-switcher.mat-button-toggle-group {
+    border: 1px solid var(--experience-border);
+    border-radius: 7px;
+    height: 32px;
+    overflow: hidden;
+}
+
+:host.theme-switcher--full ::ng-deep .theme-switcher.mat-button-toggle-group {
+    width: 100%;
+}
+
+:host ::ng-deep .theme-switcher .mat-button-toggle {
+    color: var(--experience-muted);
+    font-size: 12px;
+}
+
+:host.theme-switcher--full ::ng-deep .theme-switcher .mat-button-toggle {
+    flex: 1 1 0;
+}
+
+:host ::ng-deep .theme-switcher .mat-button-toggle-checked {
+    background: var(--experience-soft);
+    color: var(--experience-ink);
+}
+
+:host ::ng-deep .theme-switcher .mat-button-toggle-label-content {
+    line-height: 30px;
+    padding: 0 8px;
+}
+
+:host ::ng-deep .theme-switcher .mat-button-toggle:focus-visible .mat-button-toggle-button {
+    outline: 2px solid var(--experience-accent);
+    outline-offset: -2px;
+}
+
+.theme-switcher__option {
+    align-items: center;
+    display: inline-flex;
+    gap: 4px;
+}
+
+.theme-switcher__option .mat-icon {
+    font-size: 18px;
+    height: 18px;
+    width: 18px;
+}
+
+.theme-switcher__label {
+    font-weight: 500;
+}
+
+@media (max-width: 720px) {
+    :host.theme-switcher--responsive .theme-switcher__label {
+        border: 0;
+        clip: rect(0, 0, 0, 0);
+        height: 1px;
+        margin: -1px;
+        overflow: hidden;
+        padding: 0;
+        position: absolute;
+        white-space: nowrap;
+        width: 1px;
+    }
+
+    :host.theme-switcher--responsive ::ng-deep .theme-switcher .mat-button-toggle-label-content {
+        padding: 0 6px;
+    }
+}
diff --git a/apps/36-blocks/src/app/panel/layout/theme-switcher/theme-switcher.component.ts b/apps/36-blocks/src/app/panel/layout/theme-switcher/theme-switcher.component.ts
new file mode 100644
index 00000000..afc98628
--- /dev/null
+++ b/apps/36-blocks/src/app/panel/layout/theme-switcher/theme-switcher.component.ts
@@ -0,0 +1,24 @@
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
+import { MatButtonToggleModule } from '@angular/material/button-toggle';
+import { MatIconModule } from '@angular/material/icon';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { UiSettingsService } from '../ui-settings.service';
+import { isThemePreference } from '../theme-preference';
+
+@Component({
+    selector: 'proxy-theme-switcher',
+    templateUrl: './theme-switcher.component.html',
+    styleUrl: './theme-switcher.component.scss',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    imports: [MatButtonToggleModule, MatIconModule, MatTooltipModule],
+})
+export class ThemeSwitcherComponent {
+    private readonly uiSettings = inject(UiSettingsService);
+    readonly preference = this.uiSettings.themePreference;
+
+    protected select(value: unknown): void {
+        if (isThemePreference(value)) {
+            this.uiSettings.setThemePreference(value);
+        }
+    }
+}
diff --git a/apps/36-blocks/src/app/panel/layout/ui-settings.service.ts b/apps/36-blocks/src/app/panel/layout/ui-settings.service.ts
index a4b7c9da..5e869ea0 100644
--- a/apps/36-blocks/src/app/panel/layout/ui-settings.service.ts
+++ b/apps/36-blocks/src/app/panel/layout/ui-settings.service.ts
@@ -1,53 +1,79 @@
-import { Injectable, PLATFORM_ID, inject } from '@angular/core';
+import { Injectable, PLATFORM_ID, computed, inject, signal } from '@angular/core';
 import { isPlatformBrowser } from '@angular/common';
+import {
+    AppTheme,
+    StoredUiSettings,
+    ThemePreference,
+    UI_SETTINGS_STORAGE_KEY,
+    isThemePreference,
+    readStoredUiSettings,
+    resolveThemeClass,
+} from './theme-preference';
 
-export type AppTheme = 'light-theme' | 'dark-theme';
-
-interface UiSettings {
-    theme: AppTheme;
-    sideNavOpen: boolean;
-    _savedAt: number;
-}
-
-const STORAGE_KEY = 'ui-settings';
-const TTL_MS = 30 * 24 * 60 * 60 * 1000; // 30 days
-
-const DEFAULTS: Omit<UiSettings, '_savedAt'> = {
+const DEFAULTS: Omit<StoredUiSettings, '_savedAt'> = {
     theme: 'light-theme',
+    themePreference: 'light',
     sideNavOpen: true,
 };
 
 @Injectable({ providedIn: 'root' })
 export class UiSettingsService {
-    private _settings: UiSettings;
+    private _settings: StoredUiSettings;
     private readonly platformId = inject(PLATFORM_ID);
+    private readonly isBrowser = isPlatformBrowser(this.platformId);
+
+    /** Saved choice: light, dark, or match the OS. */
+    readonly themePreference = signal<ThemePreference>(DEFAULTS.themePreference);
+    private readonly systemDark = signal(false);
 
     constructor() {
+        if (this.isBrowser) {
+            this.systemDark.set(window.matchMedia('(prefers-color-scheme: dark)').matches);
+            const media = window.matchMedia('(prefers-color-scheme: dark)');
+            const onChange = (event: MediaQueryListEvent) => {
+                this.systemDark.set(event.matches);
+                if (this.themePreference() !== 'system') {
+                    return;
+                }
+                this.applyResolvedTheme();
+                this._save();
+            };
+            media.addEventListener('change', onChange);
+        }
         this._settings = this._load();
-        this._initTheme();
-    }
-
-    private _initTheme(): void {
-        if (!isPlatformBrowser(this.platformId)) return;
-        document.body.classList.remove('dark-theme', 'light-theme');
-        document.body.classList.add(this._settings.theme);
+        this.themePreference.set(this._settings.themePreference);
+        this.applyResolvedTheme();
     }
 
+    /** Resolved body class (`light-theme` or `dark-theme`), including when the choice is system. */
     get theme(): AppTheme {
-        return this._settings.theme;
+        return resolveThemeClass(this.themePreference(), this.systemDark());
     }
 
+    /** True when the resolved theme is dark, including system-plus-OS-dark. */
+    readonly isDark = computed(() => this.theme === 'dark-theme');
+
     get sideNavOpen(): boolean {
         return this._settings.sideNavOpen;
     }
 
-    setTheme(value: AppTheme): void {
-        this._settings.theme = value;
-        this._save();
-        if (isPlatformBrowser(this.platformId)) {
-            document.body.classList.remove('dark-theme', 'light-theme');
-            document.body.classList.add(value);
+    setThemePreference(value: ThemePreference): void {
+        if (!isThemePreference(value)) {
+            return;
         }
+        this.themePreference.set(value);
+        this._settings.themePreference = value;
+        this.applyResolvedTheme();
+        this._save();
+    }
+
+    /**
+     * Explicit light or dark, for callers that still pass a body class.
+     * Does not select system. Boot code must not call this with the resolved class,
+     * or a saved system preference would be overwritten.
+     */
+    setTheme(value: AppTheme): void {
+        this.setThemePreference(value === 'dark-theme' ? 'dark' : 'light');
     }
 
     setSideNavOpen(value: boolean): void {
@@ -55,27 +81,33 @@ export class UiSettingsService {
         this._save();
     }
 
-    private _load(): UiSettings {
-        if (!isPlatformBrowser(this.platformId)) {
-            return { ...DEFAULTS, _savedAt: Date.now() };
+    private applyResolvedTheme(): void {
+        const resolved = resolveThemeClass(this.themePreference(), this.systemDark());
+        this._settings.theme = resolved;
+        if (!this.isBrowser) {
+            return;
         }
-        try {
-            const raw = localStorage.getItem(STORAGE_KEY);
-            if (raw) {
-                const parsed: UiSettings = JSON.parse(raw);
-                if (parsed._savedAt && Date.now() - parsed._savedAt < TTL_MS) {
-                    return { ...DEFAULTS, ...parsed };
-                }
-            }
-        } catch {
-            // corrupted storage — fall through to defaults
+        document.body.classList.remove('dark-theme', 'light-theme');
+        document.body.classList.add(resolved);
+    }
+
+    private _load(): StoredUiSettings {
+        if (!this.isBrowser) {
+            return { ...DEFAULTS, _savedAt: Date.now() };
         }
-        return { ...DEFAULTS, _savedAt: Date.now() };
+        const stored = readStoredUiSettings(
+            localStorage.getItem(UI_SETTINGS_STORAGE_KEY),
+            Date.now(),
+            this.systemDark()
+        );
+        return stored ?? { ...DEFAULTS, _savedAt: Date.now() };
     }
 
     private _save(): void {
-        if (!isPlatformBrowser(this.platformId)) return;
+        if (!this.isBrowser) {
+            return;
+        }
         this._settings._savedAt = Date.now();
-        localStorage.setItem(STORAGE_KEY, JSON.stringify(this._settings));
+        localStorage.setItem(UI_SETTINGS_STORAGE_KEY, JSON.stringify(this._settings));
     }
 }
diff --git a/apps/36-blocks/src/assets/scss/base/_dark-theme.scss b/apps/36-blocks/src/assets/scss/base/_dark-theme.scss
index 3c6b6c0b..efcb27d8 100644
--- a/apps/36-blocks/src/assets/scss/base/_dark-theme.scss
+++ b/apps/36-blocks/src/assets/scss/base/_dark-theme.scss
@@ -1,4 +1,5 @@
 body.dark-theme {
+    color-scheme: dark;
     --color-common-white: #ffffff;
     --color-common-smoke: #d5d9dc;
     --color-common-cloud: #c1c5c8;
diff --git a/apps/36-blocks/src/assets/scss/base/_light-theme.scss b/apps/36-blocks/src/assets/scss/base/_light-theme.scss
index f4e652d7..8ef61687 100644
--- a/apps/36-blocks/src/assets/scss/base/_light-theme.scss
+++ b/apps/36-blocks/src/assets/scss/base/_light-theme.scss
@@ -1,4 +1,5 @@
 body.light-theme {
+    color-scheme: light;
     //Common color variables
     --color-common-dark: #212528;
     --color-common-slate: #3f4346;
diff --git a/apps/36-blocks/src/assets/scss/component/_experience.scss b/apps/36-blocks/src/assets/scss/component/_experience.scss
index 126ab008..16dbbf97 100644
--- a/apps/36-blocks/src/assets/scss/component/_experience.scss
+++ b/apps/36-blocks/src/assets/scss/component/_experience.scss
@@ -77,9 +77,17 @@ body.dark-theme {
     --experience-soft: #283624;
 }
 body.website-active {
+    --experience-page: #f8f9f3;
+    --experience-surface: #fff;
+    --experience-ink: #202d1d;
+    --experience-muted: #5e6c56;
+    --experience-border: #dce3d4;
+    --experience-accent: #315b2b;
+    --experience-soft: #edf2e7;
     background: var(--experience-page);
     background-image: none;
     color: var(--experience-ink);
+    color-scheme: light;
 }
 .website-shell {
     --experience-page: #f8f9f3;
diff --git a/apps/36-blocks/src/index.html b/apps/36-blocks/src/index.html
index 27dbd648..557b4b9e 100644
--- a/apps/36-blocks/src/index.html
+++ b/apps/36-blocks/src/index.html
@@ -19,6 +19,35 @@
         />
     </head>
     <body>
+        <script>
+            (function () {
+                try {
+                    var raw = localStorage.getItem('ui-settings');
+                    var preference = 'light';
+                    if (raw) {
+                        var parsed = JSON.parse(raw);
+                        var ttl = 30 * 24 * 60 * 60 * 1000;
+                        if (parsed && typeof parsed._savedAt === 'number' && Date.now() - parsed._savedAt < ttl) {
+                            if (
+                                parsed.themePreference === 'light' ||
+                                parsed.themePreference === 'dark' ||
+                                parsed.themePreference === 'system'
+                            ) {
+                                preference = parsed.themePreference;
+                            } else if (parsed.theme === 'dark-theme') {
+                                preference = 'dark';
+                            } else if (parsed.theme === 'light-theme') {
+                                preference = 'light';
+                            }
+                        }
+                    }
+                    var systemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+                    var dark = preference === 'dark' || (preference === 'system' && systemDark);
+                    document.body.classList.remove('light-theme', 'dark-theme');
+                    document.body.classList.add(dark ? 'dark-theme' : 'light-theme');
+                } catch (e) {}
+            })();
+        </script>
         <div id="app-splash-screen">
             <style>
                 #app-splash-screen {
diff --git a/docs/modules/panel-ops.md b/docs/modules/panel-ops.md
index efd3a2af..620c3451 100644
--- a/docs/modules/panel-ops.md
+++ b/docs/modules/panel-ops.md
@@ -5,7 +5,7 @@ verified_on: 2026-10-14
 ---
 # Panel pages (everything except features)
 
-The logged-in dashboard under `/app`: the shell (`LayoutComponent` with side nav, client switcher, theme toggle and the "Ask AI" chatbot), and the Dashboard, Users, Logs and Billing pages. It also covers two pages that sit outside `/app`: `/onboarding` (finish sign-up) and `/project` (legacy proxy-gateway project wizard). The Blocks pages (`/app/features`) are in [panel-features](./panel-features.md). Auth, the root NgRx store and app routes are in [app-shell](./app-shell.md).
+The logged-in dashboard under `/app`: the shell (`LayoutComponent` with side nav, client switcher, Light / Dark / System theme switcher and the "Ask AI" chatbot), and the Dashboard, Users, Logs and Billing pages. It also covers two pages that sit outside `/app`: `/onboarding` (finish sign-up) and `/project` (legacy proxy-gateway project wizard). The Blocks pages (`/app/features`) are in [panel-features](./panel-features.md). Auth, the root NgRx store and app routes are in [app-shell](./app-shell.md).
 
 | File | Role |
 |---|---|
@@ -13,8 +13,9 @@ The logged-in dashboard under `/app`: the shell (`LayoutComponent` with side nav
 | `apps/36-blocks/src/app/panel/layout/layout.routes.ts` | `layoutRoutes`. A stale copy of `panelRoutes` without `billing`. Nothing imports it. |
 | `apps/36-blocks/src/app/panel/layout/layout.component.ts` | `LayoutComponent`: loads clients and client settings into the root store, client switcher, dark mode, hides the sidebar on `/features/create` for first-time users, injects the chatbot script. |
 | `apps/36-blocks/src/app/panel/layout/main-left-side-nav/main-left-side-nav.component.ts` | `MainLeftSideNavComponent`: the `navItems` list (Dashboard, Blocks, User, Logs, Ask Ai). Billing is a separate link in the layout template. |
-| `apps/36-blocks/src/app/panel/layout/sidebar-user-menu/sidebar-user-menu.component.ts` | `SidebarUserMenuComponent`: user avatar menu; emits `darkModeToggled` and `loggedOut`. |
-| `apps/36-blocks/src/app/panel/layout/ui-settings.service.ts` | `UiSettingsService`: theme and side-nav state in `localStorage['ui-settings']` with a 30-day TTL. |
+| `apps/36-blocks/src/app/panel/layout/sidebar-user-menu/sidebar-user-menu.component.ts` | `SidebarUserMenuComponent`: user avatar menu; hosts the theme switcher and emits `loggedOut`. |
+| `apps/36-blocks/src/app/panel/layout/theme-switcher/theme-switcher.component.ts` | `ThemeSwitcherComponent`: Light, Dark and System buttons. Reads and writes `UiSettingsService`. |
+| `apps/36-blocks/src/app/panel/layout/ui-settings.service.ts` | `UiSettingsService`: theme preference and side-nav state in `localStorage['ui-settings']` with a 30-day TTL. |
 | `apps/36-blocks/src/app/panel/layout/side-nav.service.ts` | `SideNavService`: `isSideNavOpen` and `hideSidebar` signals; `toggle`/`open`/`close` persist through `UiSettingsService`. |
 | `apps/36-blocks/src/app/panel/dashboard/dashboard.component.ts` | `DashboardComponent`: range and block filter, overview cards. No store; signals and `AnalyticsService` directly. |
 | `apps/36-blocks/src/app/panel/dashboard/dashboard.models.ts` | Param interfaces, `OVERVIEW_CARDS`, `RANGE_OPTIONS`, `TIMESERIES_METRICS`, `GROUP_BY_OPTIONS`, `intervalForRange`. |
@@ -45,8 +46,8 @@ The logged-in dashboard under `/app`: the shell (`LayoutComponent` with side nav
 
 ## Layout, side nav and UI settings
 
-1. `UiSettingsService` reads `localStorage['ui-settings']` = `{ theme: 'light-theme' | 'dark-theme', sideNavOpen: boolean, _savedAt: number }`. Data older than 30 days (`TTL_MS`) or corrupt JSON falls back to `{ theme: 'light-theme', sideNavOpen: true }`. On the server it never touches storage.
-2. `setTheme` saves and swaps the `light-theme` / `dark-theme` class on `document.body`. Charts and other theme-aware code watch that class (the dashboard charts use a `MutationObserver` on `body`).
+1. `UiSettingsService` reads `localStorage['ui-settings']` = `{ themePreference: 'light' | 'dark' | 'system', theme: 'light-theme' | 'dark-theme', sideNavOpen: boolean, _savedAt: number }`. `theme` is the resolved body class. Records saved before the preference existed are read from `theme` (`dark-theme` → `dark`, otherwise `light`). Data older than 30 days (`TTL_MS`) or corrupt JSON falls back to `{ themePreference: 'light', theme: 'light-theme', sideNavOpen: true }`. On the server it never touches storage.
+2. `setThemePreference` saves the choice and swaps the `light-theme` / `dark-theme` class on `document.body`. `system` follows `prefers-color-scheme` and updates the class when the OS scheme changes. Charts and other theme-aware code watch that class (the dashboard charts use a `MutationObserver` on `body`). The same buttons sit in the workspace top bar and in the account menu. `LayoutComponent` sends the resolved `light` or `dark` value to the chatbot.
 3. `SideNavService.isSideNavOpen` starts from the stored value; `toggle`/`open`/`close` write back. `LayoutComponent` closes it on widths ≤ 992 px. `UserComponent.onTabChange` closes it on the Management tab. `CreateFeatureComponent` and `WidgetPreviewComponent` also use both services.
 4. `hideSidebar` is set on every `NavigationEnd`: on `/features/create` it calls `FeaturesService.getFeature({ itemsPerPage: 1, pageNo: 1 })` and hides the sidebar when the client has no features yet (first-block flow), otherwise it is `false`.
 5. Chatbot ("Ask Ai"): when both login data and client settings exist, `RootService.generateToken({ source: 'chatbot' })` returns `data.jwt`. The layout appends `<script id="chatbot-main-script" src=environment.interfaceScriptUrl embedToken=… parentId="ChatbotContainer" fullScreen hideIcon hideCloseButton>`. On load, after 2 s, it calls `window.SendDataToChatbot({ variables: { variables: JSON.stringify({ session: <auth token> }) }, threadId: email + client.id, bridgeName: 'root', ... })` and `window.openChatbot()`. `#ChatbotContainer` is always in the DOM and shown only when the URL contains `chatbot`. Theme changes are pushed with `window.Chatbot.sendData({ theme })`. The script URL comes from the environment ([environment.md](../environment.md)).
diff --git a/docs/ui/design-system.md b/docs/ui/design-system.md
index a53203c9..286df4d1 100644
--- a/docs/ui/design-system.md
+++ b/docs/ui/design-system.md
@@ -53,13 +53,13 @@ Breakpoints: use Tailwind's defaults (`sm` 640, `md` 768, `lg` 1024, `xl` 1280,
 
 ## Dashboard theme
 
-- **Light/dark switch.** `UiSettingsService` (`apps/36-blocks/src/app/panel/layout/ui-settings.service.ts`) puts exactly one of `light-theme` / `dark-theme` on `<body>` (default `light-theme`), persisted in `localStorage['ui-settings']` for 30 days. `AppComponent.ngOnInit` applies it on boot; `LayoutComponent.switchedDarkMode` toggles it (and tells the GTWY chatbot), `WidgetPreviewComponent` can set it too.
+- **Light / dark / system.** `UiSettingsService` (`apps/36-blocks/src/app/panel/layout/ui-settings.service.ts`) stores a preference `light` | `dark` | `system` in `localStorage['ui-settings']` for 30 days (default `light`; older records that only have `theme: 'light-theme' | 'dark-theme'` still load). It puts exactly one of `light-theme` / `dark-theme` on `<body>`. `system` follows `prefers-color-scheme` and updates when the OS scheme changes. `apps/36-blocks/src/index.html` applies the same choice before Angular boots so the first paint matches. The workspace top bar, the account menu and the widget-preview sidebar (`proxy-theme-switcher`) all set it. `LayoutComponent` tells the GTWY chatbot the resolved `light` or `dark` value whenever it changes. The marketing site (`body.website-active`) keeps its own light palette. The widget preview's Light / System / Dark group is a different control: it sets the embed's `config.theme`, not the console.
 - **Material.** `_default-theme.scss` includes `mat.all-component-themes($light-theme)` once on `html`, then only `mat.all-component-colors($dark-theme)` + `mat.system-level-colors` under `body.dark-theme` (and under a `prefers-color-scheme: dark` block for a body with no theme class). It also re-points `--mat-sys-outline` to `--color-common-border` and sets `--mat-sys-on-surface` per theme.
   - Why colours only for dark: including `all-component-themes` a second time re-emits density and typography and triggers Material's duplicate-styles warning. Keep this split when you add themes.
 - **Tailwind `dark:`.** `apps/shared/scss/global.scss` declares `@variant dark (&:where(.dark-theme, .dark-theme *));` (cbfb7d1e), so `dark:` utilities in dashboard templates follow `body.dark-theme`, not the OS setting.
 
 > [!WARNING]
-> The `prefers-color-scheme` block in `_default-theme.scss` only applies when `<body>` has neither class. `UiSettingsService` always sets one once it is created, so in practice the dashboard ignores the OS theme. Do not rely on that block; use `body.dark-theme`.
+> The `prefers-color-scheme` block in `_default-theme.scss` only applies when `<body>` has neither class. `UiSettingsService` always sets one class. System mode still paints with `body.light-theme` or `body.dark-theme`; it does not leave the body unclassed. Do not rely on that media block; use `body.dark-theme`.
 
 ### Dialogs
 
diff --git a/docs/ui/routes.md b/docs/ui/routes.md
index a24a9ea7..3b87cb39 100644
--- a/docs/ui/routes.md
+++ b/docs/ui/routes.md
@@ -55,7 +55,7 @@ The layout itself (`apps/36-blocks/src/app/website/layout/website-layout.compone
 
 ### Dashboard (`panelRoutes`, layout `LayoutComponent`)
 
-The parent route `/app` lazy-loads `apps/36-blocks/src/app/panel/layout/layout.component.ts:LayoutComponent` (side nav, header, client switcher, theme toggle) with `canActivate: [CanActivateRouteGuard]`. The guard is on the parent only; children inherit it.
+The parent route `/app` lazy-loads `apps/36-blocks/src/app/panel/layout/layout.component.ts:LayoutComponent` (side nav, header, client switcher, Light / Dark / System theme switcher) with `canActivate: [CanActivateRouteGuard]`. The guard is on the parent only; children inherit it.
 
 | Route | Component | Guard | Load | Purpose / data |
 |---|---|---|---|---|
diff --git a/docs/ui/state.md b/docs/ui/state.md
index cc2f29a2..7d3eaf30 100644
--- a/docs/ui/state.md
+++ b/docs/ui/state.md
@@ -14,7 +14,7 @@ Both apps use three kinds of state: a global NgRx store (`@ngrx/store` + `@ngrx/
 | Session-wide, read by the layout and by several pages, must die on logout | Global NgRx store | logged-in user, client settings, clients list, projects | One shared copy; `clearStateMetaReducer` wipes it on `logoutAction`. |
 | Server data and CRUD results for one page | A `ComponentStore` in `<page>.store.ts`, listed in that component's `providers` | blocks list, logs, billing, users/roles | Destroyed with the page, so no stale data on the next visit and no global reset needed. |
 | Local UI flags, view mode, theme, derived values | `signal()` / `computed()` in the component or a root service | side nav open, dialog open, `isEditing`, `isDark` | Commits e1a40b95 (side nav `BehaviorSubject` → signal), 8641b056 (`isEditing` → signal), 39a7ba6e (`isDark` getter → `computed`) moved this kind of state to signals. |
-| User preference that must survive reloads | `UiSettingsService` (`localStorage` key `ui-settings`, 30-day TTL) | theme, side nav open | a4a88252 extracted it from the layout. |
+| User preference that must survive reloads | `UiSettingsService` (`localStorage` key `ui-settings`, 30-day TTL) | theme preference (`light` / `dark` / `system`), side nav open | a4a88252 extracted it from the layout. |
 | Store value read in a signal-based template | `toSignal(store.select(...), { initialValue })` | `RegisterPageComponent`, `ProxyAuthWidgetComponent` | Avoids `async` pipes in signal templates. |
 
 New code follows this table. Do not add page-only data to the global store, and do not add new `BehaviorSubject` UI flags.
@@ -111,7 +111,7 @@ readonly getFeature = this.effect((req$: Observable<IFeatureReq>) => req$.pipe(
 ## Signals
 
 - Signal inputs/outputs (`input<T>()`, `input.required`, `output<T>()`) are the norm in `libs/ui/**`, directives and the widget (78107ece fixed templates to call them as `x()`). A few older libs (`MentionDirective`, `SkeletonDirective`) still use `@Input`.
-- Dashboard: `SideNavService` (`apps/36-blocks/src/app/panel/layout/side-nav.service.ts`) holds `isSideNavOpen` and `hideSidebar` signals, persisted through `UiSettingsService`. `LayoutComponent.isDarkMode`, dashboard charts and `WidgetPreviewComponent` (`referenceId`, `viewMode`, computed snippet) also use signals.
+- Dashboard: `SideNavService` (`apps/36-blocks/src/app/panel/layout/side-nav.service.ts`) holds `isSideNavOpen` and `hideSidebar` signals, persisted through `UiSettingsService`. `UiSettingsService.themePreference` and `isDark` are the console theme signals. Dashboard charts and `WidgetPreviewComponent` (`referenceId`, `viewMode`, computed snippet) also use signals.
 - Widget: `ProxyAuthWidgetComponent` uses `show`, `showRegistration`, `showForgotPassword`, OAuth flags and a `viewMode` computed (see [widget-auth](../modules/widget-auth.md#1-which-screen-shows-the-state-machine)); `WidgetThemeService` exposes `resolvedTheme` and `isDark$` signals; every widget screen has `isDark = computed(() => themeService.isDark$())` and `effect(() => this.themeService.setInputTheme(this.theme()))`.
 - `OtpWidgetService.showlogin` is still a `BehaviorSubject`, bridged with `toSignal`.
 
@@ -119,7 +119,7 @@ readonly getFeature = this.effect((req$: Observable<IFeatureReq>) => req$.pipe(
 
 | What | Where | Owner |
 |---|---|---|
-| Theme + side nav open | `localStorage['ui-settings']`, expires after 30 days | `apps/36-blocks/src/app/panel/layout/ui-settings.service.ts:UiSettingsService` |
+| Theme preference (`light` / `dark` / `system`) + side nav open | `localStorage['ui-settings']`, expires after 30 days. `system` resolves with `prefers-color-scheme`. | `apps/36-blocks/src/app/panel/layout/ui-settings.service.ts:UiSettingsService` |
 | Widget preview "back" target (`originUrl` from navigation state) | `sessionStorage['widget_preview_origin_<referenceId>']` | `WidgetPreviewComponent` |
 | Auth token | cookie `authToken` + memory | `AuthService`, see [app-shell](../modules/app-shell.md#where-the-auth-token-lives) |
 
diff --git a/tools/tests/theme-preference.test.cjs b/tools/tests/theme-preference.test.cjs
new file mode 100644
index 00000000..d7071f58
--- /dev/null
+++ b/tools/tests/theme-preference.test.cjs
@@ -0,0 +1,67 @@
+const assert = require('node:assert/strict');
+const { readFileSync } = require('node:fs');
+const { test } = require('node:test');
+const vm = require('node:vm');
+const ts = require('typescript');
+
+const source = readFileSync('apps/36-blocks/src/app/panel/layout/theme-preference.ts', 'utf8');
+const output = ts.transpileModule(source, {
+    compilerOptions: { target: ts.ScriptTarget.ES2022, module: ts.ModuleKind.CommonJS },
+}).outputText;
+const loaded = { exports: {} };
+vm.runInNewContext(output, { module: loaded, exports: loaded.exports });
+const { preferenceFromStored, resolveThemeClass, readStoredUiSettings, UI_SETTINGS_TTL_MS } = loaded.exports;
+
+test('explicit preference wins over a previously resolved class', () => {
+    assert.equal(preferenceFromStored({ themePreference: 'system', theme: 'dark-theme' }), 'system');
+    assert.equal(preferenceFromStored({ themePreference: 'light', theme: 'dark-theme' }), 'light');
+    assert.equal(preferenceFromStored({ themePreference: 'dark' }), 'dark');
+});
+
+test('older records that only stored a body class still map to light or dark', () => {
+    assert.equal(preferenceFromStored({ theme: 'dark-theme' }), 'dark');
+    assert.equal(preferenceFromStored({ theme: 'light-theme' }), 'light');
+    assert.equal(preferenceFromStored({}), 'light');
+    assert.equal(preferenceFromStored(null), 'light');
+    assert.equal(preferenceFromStored({ themePreference: 'sepia' }), 'light');
+});
+
+test('system follows the OS scheme and light or dark ignore it', () => {
+    assert.equal(resolveThemeClass('light', true), 'light-theme');
+    assert.equal(resolveThemeClass('dark', false), 'dark-theme');
+    assert.equal(resolveThemeClass('system', true), 'dark-theme');
+    assert.equal(resolveThemeClass('system', false), 'light-theme');
+});
+
+test('stored settings expire after 30 days and reject corrupt JSON', () => {
+    const now = 1_700_000_000_000;
+    const fresh = JSON.stringify({
+        themePreference: 'system',
+        theme: 'light-theme',
+        sideNavOpen: false,
+        _savedAt: now - 1000,
+    });
+    const read = readStoredUiSettings(fresh, now, true);
+    assert.equal(read.themePreference, 'system');
+    assert.equal(read.theme, 'dark-theme');
+    assert.equal(read.sideNavOpen, false);
+
+    const expired = JSON.stringify({
+        themePreference: 'dark',
+        theme: 'dark-theme',
+        _savedAt: now - UI_SETTINGS_TTL_MS,
+    });
+    assert.equal(readStoredUiSettings(expired, now, false), null);
+    assert.equal(readStoredUiSettings('{', now, false), null);
+    assert.equal(readStoredUiSettings(null, now, false), null);
+});
+
+test('the boot script in index.html uses the same storage key and theme names', () => {
+    const html = readFileSync('apps/36-blocks/src/index.html', 'utf8');
+    assert.match(html, /ui-settings/);
+    assert.match(html, /themePreference/);
+    assert.match(html, /prefers-color-scheme: dark/);
+    assert.match(html, /light-theme/);
+    assert.match(html, /dark-theme/);
+    assert.match(html, /30 \* 24 \* 60 \* 60 \* 1000/);
+});