Theme Provider
Basic Usage
Loading...
Installation
pnpm add @corew500/uiUsage
import { ThemeProvider } from "@corew500/ui/theme-provider"
<ThemeProvider>Content</ThemeProvider>API Reference
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| themes | string[] | — | List of all available theme names |
| forcedTheme | string | — | Forced theme name for the current page |
| enableSystem | enum | true | Whether to switch between dark and light themes based on prefers-color-scheme |
| disableTransitionOnChange | enum | true | Disable all CSS transitions when switching themes |
| enableColorScheme | enum | — | Whether to indicate to browsers which color scheme is used (dark or light) for built-in UI like inputs and buttons |
| storageKey | string | — | Key used to store theme setting in localStorage |
| defaultTheme | string | system | Default theme name (for v0.0.12 and lower the default was light). If `enableSystem` is false, the default theme is light |
| attribute | enum | class | HTML attribute modified based on the active theme. Accepts `class`, `data-*` (meaning any data attribute, `data-mode`, `data-color`, etc.), or an array which could include both |
| value | ValueObject | — | Mapping of theme name to HTML attribute value. Object where key is the theme name and value is the attribute value |
| nonce | string | — | Nonce string to pass to the inline script and style elements for CSP headers |
| scriptProps | ScriptProps | — | Props to pass the inline script |
Accessibility
Additional
- - Theme preference persists across sessions via localStorage
- Respects user's system-level color scheme preference by default
- No flash of incorrect theme on page load (next-themes handles this)
Localization
Translatable Content
- - No translatable strings; theme names are internal ("light", "dark", "system")