Layout
Theme Provider
Light, dark and system theming for the whole app: wrap once, then read and set the theme with useTheme.
When to use
Wrap the app once to get light/dark/system theming; read and set the theme with useTheme.
When not to
Do not toggle data-theme by hand, and do not wrap the app twice.
Import
import { ThemeProvider, useTheme } from "@countryclub/ui-react";useTheme
Accessibility
Follows the OS preference when enableSystem is on and applies the stored theme before hydration, so there is no flash. Add suppressHydrationWarning to <html>.
API reference
The props the kit declares itself, read from its types on every build. Every part also takes className, render (where it renders an element) and the native attributes of that element.
ThemeProvider
| Prop | Type | Default | Description |
|---|---|---|---|
| themes | string[] | ["light", "dark"] | List of all available theme names |
| forcedTheme | string | Forced theme name for the current page | |
| enableSystem | boolean | true | Whether to switch between dark and light themes based on prefers-color-scheme |
| disableTransitionOnChange | boolean | false | Disable all CSS transitions when switching themes |
| enableColorScheme | boolean | true | Whether to indicate to browsers which color scheme is used (dark or light) for built-in UI like inputs and buttons |
| storageKey | string | theme | Key used to store theme setting in localStorage |
| defaultTheme | string | enableSystem ? "system" : "light" | Default theme name (for v0.0.12 and lower the default was light). If enableSystem is false, the default theme is light |
| attribute | Attribute | Attribute[] | data-theme | 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 for CSP headers |
ThemeContextOverride
| Prop | Type | Default | Description |
|---|---|---|---|
| value* | string |
Also exported
Parts, aliases, class helpers and hooks that take no props of their own beyond the native ones: useTheme, script.