@astryxdesign/core 0.2.0-canary.8d64648 → 0.2.0-canary.8dfd7cf

package/src/index.ts

@@ -168,25 +168,29 @@ export * from './hooks';
 export * from './utils';
 
 // Theme
+export type {TextColorMap} from './Text';
 export * from './theme';
 
 // Internationalization
 export * from './i18n';
 
-// Doc types — for external library authors writing .doc.mjs files
+// Doc types — for external library authors writing .doc.mjs files.
+// @deprecated Import these from `@astryxdesign/cli/authoring` instead. These
+// re-exports are kept for one release cycle and will be removed; `astryx upgrade`
+// repoints them automatically.
 export type {
   ComponentDoc,
   SingleComponentDoc,
   MultiComponentDoc,
-  PropDoc,
+  ComponentPropDoc,
   ComponentEntry,
-  ThemingTarget,
-  ComponentVar,
-  DerivedVar,
-  TranslationDoc,
-  GroupDoc,
+  ComponentThemingTarget,
+  ComponentThemingVar,
+  ComponentThemingDerivedVar,
+  ComponentTranslationDoc,
+  ComponentGroupDoc,
   ReferenceDoc,
   ReferenceSection,
-  ContentBlock,
-  TokenPreviewType,
-} from './docs-types';
+  ReferenceContentBlock,
+  ReferenceTokenPreviewType,
+} from '@astryxdesign/cli/authoring';

package/src/theme/MediaTheme.doc.mjs

@@ -1,6 +1,6 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
-/** @type {import('../docs-types').ComponentDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentDoc} */
 
 export const docs = {
   name: 'MediaTheme',
@@ -100,7 +100,7 @@ export const docs = {
   ],
 };
 
-/** @type {import('../docs-types').TranslationDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentTranslationDoc} */
 export const docsDense = {
   usage: {
     description:

package/src/theme/SyntaxTheme.doc.mjs

@@ -1,6 +1,6 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
-/** @type {import('../docs-types').ComponentDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentDoc} */
 
 export const docs = {
   name: 'SyntaxTheme',
@@ -74,7 +74,7 @@ export const docs = {
   ],
 };
 
-/** @type {import('../docs-types').TranslationDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentTranslationDoc} */
 export const docsDense = {
   usage: {
     description:

package/src/theme/Theme.doc.mjs

@@ -1,6 +1,6 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
-/** @type {import('../docs-types').ComponentDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentDoc} */
 
 export const docs = {
   name: 'Theme',
@@ -86,7 +86,7 @@ export const docs = {
   ],
 };
 
-/** @type {import('../docs-types').TranslationDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentTranslationDoc} */
 export const docsDense = {
   usage: {
     description:

package/src/theme/Theme.tsx

@@ -41,8 +41,8 @@ import {useIsomorphicLayoutEffect} from '../hooks/useIsomorphicLayoutEffect';
 import * as stylex from '@stylexjs/stylex';
 import type {ThemeMode} from './types';
 import {colorVars, typographyVars} from './tokens.stylex';
-import {registerIcons} from '../Icon/globalIconRegistry';
 import {generateThemeCSS, type DefinedTheme} from './defineTheme';
+import {registerTheme} from './themeRegistry';
 import {dataAttr} from '../naming';
 import {ThemeContext} from './useTheme';
 import {warnOnce} from '../utils/devWarning';
@@ -243,6 +243,8 @@ export function Theme({
 }: ThemeProps): React.ReactElement {
   const isNested = use(ThemeNestingContext);
 
+  registerTheme(theme);
+
   useThemeStyleInjection(theme);
   useRootThemeSync(isNested, mode, theme.name);
 
@@ -254,12 +256,6 @@ export function Theme({
         ? wrapperStyles.light
         : wrapperStyles.system;
 
-  // Icons — register globally (works in both server and client environments)
-  const icons = theme.icons;
-  if (icons != null) {
-    registerIcons(icons);
-  }
-
   // Memoize the context value to prevent unnecessary re-renders
   const ctxValue = useMemo(() => ({theme, mode}), [theme, mode]);
 

package/src/theme/defineTheme.ts

@@ -63,6 +63,7 @@ import {expandColorScale, type ColorScaleConfig} from './expandColorScale';
 import type {DomainTokenName} from './domainTokens';
 import {domainTokenDefaults} from './domainTokens';
 import type {SyntaxThemeDefinition} from './syntax';
+import {registerTheme} from './themeRegistry';
 
 // =============================================================================
 // Types
@@ -624,7 +625,7 @@ export function defineTheme(input: DefineThemeInput): DefinedTheme {
       ? {...base.icons, ...input.icons}
       : (input.icons ?? base?.icons);
 
-  return {
+  const theme: DefinedTheme = {
     name: input.name,
     tokens,
     components,
@@ -633,6 +634,9 @@ export function defineTheme(input: DefineThemeInput): DefinedTheme {
     __onDark,
     __onLight,
   };
+
+  registerTheme(theme);
+  return theme;
 }
 
 // =============================================================================

package/src/theme/index.ts

@@ -30,6 +30,12 @@ export {
   isDefinedTheme,
   tokenDefaults,
 } from './defineTheme';
+export {
+  registerTheme,
+  getRegisteredTheme,
+  getRegisteredThemes,
+  resetThemes,
+} from './themeRegistry';
 export type {
   DefineThemeInput,
   DefinedTheme,
@@ -126,7 +132,7 @@ export type {
   TypeScaleVarName,
 } from './tokens.stylex';
 
-export {useTheme, ThemeContext} from './useTheme';
+export {useTheme, useThemeName, ThemeContext} from './useTheme';
 export type {UseThemeReturn, ThemeContextValue} from './useTheme';
 export {
   resolveThemeToken,
@@ -140,6 +146,7 @@ export type {
   ResolvedThemeMode,
 } from './tokens';
 
+export type {TextColorMap} from '../Text';
 export type {
   ThemeMode,
   HeadingTag,
@@ -150,7 +157,6 @@ export type {
   TextWeight,
   TextColor,
   BuiltinTextColor,
-  TextColorMap,
   TypographyConfig,
   TypographyRole,
   FontWeight,

package/src/theme/themeRegistry.test.ts

@@ -0,0 +1,59 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+import {describe, it, expect, beforeEach} from 'vitest';
+import {defineTheme} from './defineTheme';
+import {
+  getRegisteredTheme,
+  getRegisteredThemes,
+  registerTheme,
+  resetThemes,
+} from './themeRegistry';
+
+describe('themeRegistry', () => {
+  beforeEach(() => {
+    resetThemes();
+  });
+
+  it('registers and resolves themes by name', () => {
+    const theme = defineTheme({
+      name: 'brand',
+      tokens: {'--color-accent': '#123456'},
+    });
+
+    expect(getRegisteredTheme('brand')).toBe(theme);
+  });
+
+  it('returns null for empty or unknown names', () => {
+    expect(getRegisteredTheme(null)).toBeNull();
+    expect(getRegisteredTheme('')).toBeNull();
+    expect(getRegisteredTheme('missing')).toBeNull();
+  });
+
+  it('replaces an existing theme with the same name', () => {
+    const first = defineTheme({name: 'brand'});
+    const second = defineTheme({
+      name: 'brand',
+      tokens: {'--color-accent': '#654321'},
+    });
+
+    expect(getRegisteredTheme('brand')).not.toBe(first);
+    expect(getRegisteredTheme('brand')).toBe(second);
+  });
+
+  it('returns a defensive snapshot of registered themes', () => {
+    const theme = defineTheme({name: 'brand'});
+    const snapshot = getRegisteredThemes();
+
+    expect(snapshot.get('brand')).toBe(theme);
+    expect(snapshot).not.toBe(getRegisteredThemes());
+  });
+
+  it('allows explicit registration of built theme objects', () => {
+    const theme = defineTheme({name: 'built'});
+    resetThemes();
+
+    registerTheme(theme);
+
+    expect(getRegisteredTheme('built')).toBe(theme);
+  });
+});

package/src/theme/themeRegistry.ts

@@ -0,0 +1,53 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file themeRegistry.ts
+ * @input DefinedTheme objects from defineTheme() or built theme packages
+ * @output Exports registerTheme, getRegisteredTheme, getRegisteredThemes, resetThemes
+ * @position Server-safe theme registry for theme-name-based SSR resolution
+ *
+ * This module has NO 'use client' directive. It is importable from SSR/RSC and
+ * lets code resolve theme data by stable theme name without React context.
+ */
+
+import type {DefinedTheme} from './defineTheme';
+
+const themeRegistry = new Map<string, DefinedTheme>();
+
+/**
+ * Register a defined theme under its `name`.
+ *
+ * Registration is idempotent and replaces any previous theme with the same
+ * name. Call from app initialization, theme packages, or <Theme> to make the
+ * theme available to SSR-safe resolvers by name.
+ */
+export function registerTheme(theme: DefinedTheme): void {
+  themeRegistry.set(theme.name, theme);
+}
+
+/**
+ * Return a previously registered theme by name.
+ */
+export function getRegisteredTheme(
+  name: string | null | undefined,
+): DefinedTheme | null {
+  if (name == null || name === '') {
+    return null;
+  }
+  return themeRegistry.get(name) ?? null;
+}
+
+/**
+ * Return all registered themes keyed by theme name.
+ */
+export function getRegisteredThemes(): ReadonlyMap<string, DefinedTheme> {
+  return new Map(themeRegistry);
+}
+
+/**
+ * Reset the theme registry. For testing only.
+ * @internal
+ */
+export function resetThemes(): void {
+  themeRegistry.clear();
+}

package/src/theme/types.ts

@@ -148,38 +148,9 @@ export type TextSize =
 /**
  * Font weight variants for Text/Heading
  */
-export type TextWeight = 'normal' | 'medium' | 'semibold' | 'bold';
+import type {TextColorMap} from '../Text';
 
-/**
- * Extensible map of text color variants for Text/Heading.
- *
- * Themes add custom colors via component overrides in defineTheme; a custom
- * color renders with the `primary` baseline color from StyleX and receives its
- * actual color from theme CSS (`.astryx-text.<color>` / `.astryx-heading.<color>`),
- * exactly like custom text `type`s.
- *
- * To add type-safe custom colors, use module augmentation — the same technique
- * as `ButtonVariantMap` etc.:
- * ```ts
- * declare module '@astryxdesign/core/Text' {
- *   interface TextColorMap {
- *     brand: true;
- *     danger: true;
- *   }
- * }
- * ```
- *
- * `astryx theme build` generates these augmentations automatically when it
- * detects new `color:*` values in a theme's Text/Heading component overrides.
- */
-export interface TextColorMap {
-  primary: true;
-  secondary: true;
-  disabled: true;
-  placeholder: true;
-  accent: true;
-  inherit: true;
-}
+export type TextWeight = 'normal' | 'medium' | 'semibold' | 'bold';
 
 /**
  * Built-in text color variants for Text/Heading. The concrete keys that ship

package/src/theme/useTheme.doc.mjs

@@ -1,6 +1,6 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
-/** @type {import('../docs-types').HookDoc} */
+/** @type {import('@astryxdesign/cli/authoring').HookDoc} */
 export const docs = {
   name: 'useTheme',
   displayName: 'useTheme',
@@ -87,7 +87,7 @@ export const docs = {
   importPath: '@astryxdesign/core/theme',
 };
 
-/** @type {import('../docs-types').HookTranslationDoc} */
+/** @type {import('@astryxdesign/cli/authoring').HookTranslationDoc} */
 export const docsDense = {
   description:
     'Programmatic access to theme tokens for SVG/canvas/charts needing JS values instead of CSS vars.',

package/src/theme/useTheme.test.tsx

@@ -5,6 +5,7 @@ import {render, renderHook, act, waitFor} from '@testing-library/react';
 import React from 'react';
 import {Theme} from './Theme';
 import {defineTheme} from './defineTheme';
+import {resetThemes} from './themeRegistry';
 import {useTheme} from './useTheme';
 import {resolveThemeTokens} from './tokens';
 
@@ -152,6 +153,8 @@ describe('useTheme', () => {
 // straight to OS preference (see Theme.tsx's useRootThemeSync).
 describe('useTheme mode resolution without a ThemeContext ancestor', () => {
   afterEach(async () => {
+    resetThemes();
+    document.documentElement.removeAttribute('data-astryx-theme');
     // The hook from each `it` below is still mounted and subscribed to the
     // shared MutationObserver when this runs (RTL's own cleanup — which
     // unmounts it — is registered after this file's afterEach), so removing
@@ -184,6 +187,46 @@ describe('useTheme mode resolution without a ThemeContext ancestor', () => {
 
     await waitFor(() => expect(result.current.mode).toBe('dark'));
   });
+
+  it('resolves registered theme tokens from <html data-astryx-theme> when set', () => {
+    defineTheme({
+      name: 'root-brand',
+      tokens: {'--color-accent': ['#010203', '#AABBCC']},
+    });
+    document.documentElement.setAttribute('data-astryx-theme', 'root-brand');
+    document.documentElement.setAttribute('data-theme', 'dark');
+
+    const {result} = renderHook(() => useTheme());
+
+    expect(result.current.name).toBe('root-brand');
+    expect(result.current.token('--color-accent')).toBe('#AABBCC');
+  });
+
+  it('stays live when <html data-astryx-theme> changes after mount', async () => {
+    defineTheme({
+      name: 'first-brand',
+      tokens: {'--color-accent': '#111111'},
+    });
+    defineTheme({
+      name: 'second-brand',
+      tokens: {'--color-accent': '#222222'},
+    });
+    document.documentElement.setAttribute('data-astryx-theme', 'first-brand');
+
+    const {result} = renderHook(() => useTheme());
+    expect(result.current.name).toBe('first-brand');
+    expect(result.current.token('--color-accent')).toBe('#111111');
+
+    act(() => {
+      document.documentElement.setAttribute(
+        'data-astryx-theme',
+        'second-brand',
+      );
+    });
+
+    await waitFor(() => expect(result.current.name).toBe('second-brand'));
+    expect(result.current.token('--color-accent')).toBe('#222222');
+  });
 });
 
 // Covers the singleton MutationObserver + no-op gating in useRootThemeModeAttr:
@@ -193,7 +236,9 @@ describe('useTheme mode resolution without a ThemeContext ancestor', () => {
 // zero as they unmount.
 describe('useTheme root-attribute observer lifecycle', () => {
   afterEach(() => {
+    resetThemes();
     document.documentElement.removeAttribute('data-theme');
+    document.documentElement.removeAttribute('data-astryx-theme');
     // vi.stubGlobal'd MutationObserver stubs below are torn down here even if
     // a test fails partway through, instead of relying on a manual restore
     // line at the end of each test that a mid-test throw would skip.
@@ -237,13 +282,13 @@ describe('useTheme root-attribute observer lifecycle', () => {
     const first = renderHook(() => useTheme());
     const second = renderHook(() => useTheme());
 
-    expect(ObserverSpy).toHaveBeenCalledTimes(1);
-    expect(observe).toHaveBeenCalledTimes(1);
+    expect(ObserverSpy).toHaveBeenCalledTimes(2);
+    expect(observe).toHaveBeenCalledTimes(2);
 
     first.unmount();
     expect(disconnect).not.toHaveBeenCalled();
 
     second.unmount();
-    expect(disconnect).toHaveBeenCalledTimes(1);
+    expect(disconnect).toHaveBeenCalledTimes(2);
   });
 });

package/src/theme/useTheme.ts

@@ -5,17 +5,17 @@
 /**
  * @file useTheme.ts
  * @input ThemeContext provided by Theme
- * @output Exports useTheme hook for programmatic access to resolved theme tokens
+ * @output Exports useTheme and useThemeName hooks for programmatic theme access
  * @position Theme hook; used by data viz, canvas, and non-CSS consumers
  *
  * Provides synchronous access to theme token values resolved for the
  * current color mode — no DOM reads on the provider path, no double render.
- * Without a reachable ThemeContext it consults `<html data-theme>` (kept in
- * sync by Theme) via a single shared, refcounted MutationObserver before
- * assuming OS preference; provider-path consumers subscribe to a no-op
- * store instead (the same args-switch technique useMediaQuery uses), so
- * mounting under a Theme never creates an observer. Token resolution is
- * shared with the server-safe helpers in ./tokens.ts.
+ * Without a reachable ThemeContext it consults `<html data-theme>` and
+ * `<html data-astryx-theme>` (kept in sync by Theme) via shared, refcounted
+ * MutationObservers before assuming OS preference/default tokens. Provider-path
+ * consumers subscribe to no-op stores instead, so mounting under a Theme never
+ * creates an observer. Token resolution is shared with the server-safe helpers
+ * in ./tokens.ts.
  *
  * SYNC: When modified, update:
  * - /packages/core/src/theme/index.ts
@@ -25,6 +25,8 @@ import {createContext, use, useMemo, useSyncExternalStore} from 'react';
 import type {ThemeMode} from './types';
 import type {DefinedTheme} from './defineTheme';
 import {resolveThemeTokens} from './tokens';
+import {getRegisteredTheme} from './themeRegistry';
+import {dataAttr} from '../naming';
 import {useMediaQuery} from '../hooks/useMediaQuery';
 
 // =============================================================================
@@ -92,7 +94,7 @@ export interface UseThemeReturn {
 // Hook
 // =============================================================================
 
-function getRootThemeAttrSnapshot(): 'light' | 'dark' | null {
+function getRootModeAttrSnapshot(): 'light' | 'dark' | null {
   if (typeof document === 'undefined') {
     return null;
   }
@@ -100,45 +102,88 @@ function getRootThemeAttrSnapshot(): 'light' | 'dark' | null {
   return attr === 'light' || attr === 'dark' ? attr : null;
 }
 
-function getRootThemeAttrServerSnapshot(): 'light' | 'dark' | null {
+function getRootModeAttrServerSnapshot(): 'light' | 'dark' | null {
   return null;
 }
 
-function getNullThemeMode(): null {
+function getRootNameAttrSnapshot(): string | null {
+  if (typeof document === 'undefined') {
+    return null;
+  }
+  return document.documentElement.getAttribute(dataAttr('theme'));
+}
+
+function getRootNameAttrServerSnapshot(): string | null {
+  return null;
+}
+
+function getNullThemeSnapshot(): null {
   return null;
 }
 
 // Every no-context consumer wants the same <html data-theme> attribute, so
 // one MutationObserver — refcounted via this listener set — serves all of
 // them instead of one per consumer.
-const rootThemeAttrListeners = new Set<() => void>();
-let rootThemeAttrObserver: MutationObserver | null = null;
+const rootModeAttrListeners = new Set<() => void>();
+let rootModeAttrObserver: MutationObserver | null = null;
 
-function notifyRootThemeAttrListeners(): void {
-  for (const listener of rootThemeAttrListeners) {
+const rootNameAttrListeners = new Set<() => void>();
+let rootNameAttrObserver: MutationObserver | null = null;
+
+function notifyRootModeAttrListeners(): void {
+  for (const listener of rootModeAttrListeners) {
     listener();
   }
 }
 
-function subscribeRootThemeAttr(onStoreChange: () => void): () => void {
-  rootThemeAttrListeners.add(onStoreChange);
+function subscribeRootModeAttr(onStoreChange: () => void): () => void {
+  rootModeAttrListeners.add(onStoreChange);
 
   if (
-    rootThemeAttrListeners.size === 1 &&
+    rootModeAttrListeners.size === 1 &&
     typeof MutationObserver !== 'undefined'
   ) {
-    rootThemeAttrObserver = new MutationObserver(notifyRootThemeAttrListeners);
-    rootThemeAttrObserver.observe(document.documentElement, {
+    rootModeAttrObserver = new MutationObserver(notifyRootModeAttrListeners);
+    rootModeAttrObserver.observe(document.documentElement, {
       attributes: true,
       attributeFilter: ['data-theme'],
     });
   }
 
   return () => {
-    rootThemeAttrListeners.delete(onStoreChange);
-    if (rootThemeAttrListeners.size === 0 && rootThemeAttrObserver) {
-      rootThemeAttrObserver.disconnect();
-      rootThemeAttrObserver = null;
+    rootModeAttrListeners.delete(onStoreChange);
+    if (rootModeAttrListeners.size === 0 && rootModeAttrObserver) {
+      rootModeAttrObserver.disconnect();
+      rootModeAttrObserver = null;
+    }
+  };
+}
+
+function notifyRootNameAttrListeners(): void {
+  for (const listener of rootNameAttrListeners) {
+    listener();
+  }
+}
+
+function subscribeRootNameAttr(onStoreChange: () => void): () => void {
+  rootNameAttrListeners.add(onStoreChange);
+
+  if (
+    rootNameAttrListeners.size === 1 &&
+    typeof MutationObserver !== 'undefined'
+  ) {
+    rootNameAttrObserver = new MutationObserver(notifyRootNameAttrListeners);
+    rootNameAttrObserver.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: [dataAttr('theme')],
+    });
+  }
+
+  return () => {
+    rootNameAttrListeners.delete(onStoreChange);
+    if (rootNameAttrListeners.size === 0 && rootNameAttrObserver) {
+      rootNameAttrObserver.disconnect();
+      rootNameAttrObserver = null;
     }
   };
 }
@@ -154,14 +199,38 @@ function subscribeNoop(): () => void {
  * a no-op store when a ThemeContext exists — instead of skipping the hook
  * call, so provider-path consumers never touch the DOM or the observer.
  */
-function useRootThemeModeAttr(hasCtx: boolean): 'light' | 'dark' | null {
+function useRootModeAttr(hasCtx: boolean): 'light' | 'dark' | null {
+  return useSyncExternalStore(
+    hasCtx ? subscribeNoop : subscribeRootModeAttr,
+    hasCtx ? getNullThemeSnapshot : getRootModeAttrSnapshot,
+    getRootModeAttrServerSnapshot,
+  );
+}
+
+function useRootThemeNameAttr(hasCtx: boolean): string | null {
   return useSyncExternalStore(
-    hasCtx ? subscribeNoop : subscribeRootThemeAttr,
-    hasCtx ? getNullThemeMode : getRootThemeAttrSnapshot,
-    getRootThemeAttrServerSnapshot,
+    hasCtx ? subscribeNoop : subscribeRootNameAttr,
+    hasCtx ? getNullThemeSnapshot : getRootNameAttrSnapshot,
+    getRootNameAttrServerSnapshot,
   );
 }
 
+/**
+ * Return the nearest active Astryx theme name.
+ *
+ * Uses ThemeContext when present and otherwise follows the root Theme's
+ * <html data-astryx-theme> attribute. This is intentionally lighter than
+ * useTheme() for consumers that only need theme identity, such as semantic
+ * icon resolution.
+ */
+export function useThemeName(): string | null {
+  const ctx = use(ThemeContext);
+  const hasCtx = ctx != null;
+  const rootThemeName = useRootThemeNameAttr(hasCtx);
+
+  return ctx?.theme.name ?? rootThemeName;
+}
+
 /**
  * Access the current Astryx theme's token values, resolved for the active color mode.
  *
@@ -193,13 +262,15 @@ export function useTheme(): UseThemeReturn {
   // Falls back to the root Theme's mode via <html data-theme> when there's
   // no ThemeContext ancestor (e.g. useToast's detached fallback viewport).
   // Resolves to null when `ctx` is present, so it has no effect there.
-  const rootAttrMode = useRootThemeModeAttr(ctx != null);
+  const hasCtx = ctx != null;
+  const rootAttrMode = useRootModeAttr(hasCtx);
+  const rootThemeName = useRootThemeNameAttr(hasCtx);
 
   // Resolve 'system' to 'light' | 'dark' using the OS preference
   const prefersDark = useMediaQuery('(prefers-color-scheme: dark)');
 
   const mode = ctx?.mode ?? rootAttrMode ?? 'system';
-  const theme = ctx?.theme ?? null;
+  const theme = ctx?.theme ?? getRegisteredTheme(rootThemeName);
 
   const effectiveMode: 'light' | 'dark' =
     mode === 'system' ? (prefersDark ? 'dark' : 'light') : mode;