Theming
@/components/kamod-ui/theming
Tailwind v4 reads the package's CSS @theme mappings directly.
Installation
Install @kamod-ch/ui, @kamod-ch/themes, and @preact/signals, then import the themes CSS next to Tailwind. @kamod-ch/ui/theme.css remains the lightweight default if you only need the minimal theme.
pnpm add @kamod-ch/uiUsage
Theme presets are applied to <html data-theme="..."> and color scheme is represented by the .dark class. Keep custom brands token-driven and avoid one-off component overrides.
import { Theming } from "@/components/kamod-ui/theming";<Theming />Tailwind v4 CSS setup
Import the full themes entry after Tailwind to get semantic tokens, default light/dark variables, and all brand presets. Use @kamod-ch/ui/theme.css instead when you want only the minimal compatibility theme.
Runtime provider and controls
ThemeProvider keeps preset and scheme state in sync with localStorage. You can build controls with useTheme() or keep using the demo ThemePresetSelect and @kamod-ch/ui ThemeToggle.
Brand token overrides
Override semantic tokens per preset. Components consume the token contract for surfaces, actions, status colors, borders, radius, and sidebar colors.
Override semantic token blocks to restyle all components.
Optional Tailwind preset
Tailwind v4 projects should prefer CSS @theme imports. @kamod-ch/themes/tailwind-preset is only for config-driven or compatibility setups.
CSS imports are the primary Tailwind v4 integration path.
API Reference
Props, slots and variants for this component.
Theming
Theming component props and accepted values.
| Prop | Type | Default |
|---|---|---|
| Package | @kamod-ch/themes | optional add-on |
| CSS entry | theme.css / tokens.css / brands.css | theme.css |
| Runtime | ThemeProvider, useTheme, ThemeScript | Preact |
| Preset storage key | theme-preset | localStorage |
| Scheme storage key | theme | localStorage + cookie |
| Token groups | surface, action, status, form/focus, radius, sidebar | all presets |
Accessibility Notes
Ensure contrast remains readable in every preset and dark/light combination, especially for focus rings and muted text.