Theme Registry

THEME_REGISTRY in src/tokens/themes/registry.ts is the single source of truth for all themes in Stratum. Unistyles, ThemeProvider, and TypeScript types all auto-derive from this registry — you never need to update them manually.

The registry

src/tokens/themes/registry.ts

export const THEME_REGISTRY: ThemeEntry[] = [
  { name: 'slate',    label: 'Slate',    light: slateLight,    dark: slateDark    },
  { name: 'obsidian', label: 'Obsidian', light: obsidianLight, dark: obsidianDark },
  { name: 'quartz',   label: 'Quartz',   light: quartzLight,   dark: quartzDark   },
];

What auto-derives from the registry

System	What it gets
src/providers/unistyles.ts	Registers all themes with Unistyles so useStyles() works
ThemeProvider	Knows which theme names are valid for initialTheme
ThemeName type	Union type 'slate' | 'obsidian' | 'quartz' — inferred, not hand-written
useThemeToggle()	setTheme() accepts only registered names
HIG ThemeBar	Renders a button for each registered theme

Adding a theme

1. Create your theme file (use createTheme() or implement AppTheme directly):

src/tokens/themes/brand.ts

import { createTheme } from './createTheme';
import { slateThemeLight, slateThemeDark } from './slate';

export const brandLight = createTheme(slateThemeLight, { colors: { accent: '#E11D48' } });
export const brandDark  = createTheme(slateThemeDark,  { colors: { accent: '#FB7185' } });

2. Add one entry to the registry:

import { brandLight, brandDark } from './brand';

export const THEME_REGISTRY: ThemeEntry[] = [
  { name: 'slate',    label: 'Slate',    light: slateLight,    dark: slateDark    },
  { name: 'obsidian', label: 'Obsidian', light: obsidianLight, dark: obsidianDark },
  { name: 'quartz',   label: 'Quartz',   light: quartzLight,   dark: quartzDark   },
  { name: 'brand',    label: 'Brand',    light: brandLight,    dark: brandDark    },
];

That’s the entire change. Everything else updates automatically.

ThemeEntry type

interface ThemeEntry {
  name:  string;     // used in setTheme() and initialTheme prop
  label: string;     // displayed in UI (ThemeBar, pickers)
  light: AppTheme;   // light variant
  dark:  AppTheme;   // dark variant
}

Related

• Custom Themes — creating a theme with createTheme()
• Theming — AppTheme interface reference