Foundations
Theme Provider
Manages the display mode: light, dark, or following the OS. The choice lands on the data-theme attribute of <html> and persists to localStorage. App-wide theme color overrides are also set here. For React and Vue; with Web Components you use the attribute and CSS variables directly.
ReactVue
View in Storybook Playground
Examples
<ThemeProvider
defaultMode="system"
colors={{ primary: '#115e59', 'on-primary': '#ffffff' }}
>
<App />
</ThemeProvider>Props
| Name | Type | Default | Description |
|---|---|---|---|
children required | ReactNode | — | |
defaultMode | ThemeMode | — | Initial mode before any stored preference is read. |
enablePersistence | boolean | — | Persist the user's choice to localStorage. Default: true. |
storageKey | string | — | localStorage key. Default: `lily-theme`. |
colors | ThemeColorOverrides | — | App-wide color-token overrides applied in both schemes. |
light | ThemeColorOverrides | — | App-wide color-token overrides applied only in the light scheme. |
dark | ThemeColorOverrides | — | App-wide color-token overrides applied only in the dark scheme. |
Accessibility
- Body/background contrast is ≥ 7:1 (AAA) in both light and dark.
- Every interaction works with the keyboard alone.
- The focus ring is always visible.
- Respects prefers-reduced-motion and stops excessive motion.
Every component is designed to meet WCAG 2.1 AAA.