- Components
- dark-mode
Dark Mode
Dark mode support in JK-UI — theme variants, CSS variable structure, and configuration
JK-UI has first-class dark mode support through CSS variable switching.
How It Works
All theme tokens are defined twice — once under
:root for light mode and once under .dark for dark mode::root {
--background: hsl(0 0% 100%);
--foreground: hsl(240 5% 26%);
--primary: hsl(243 75% 59%);
--muted: hsl(240 5% 96%);
/* ... */
}
.dark {
--background: hsl(240 10% 4%);
--foreground: hsl(240 5% 84%);
--primary: hsl(245 86% 67%);
--muted: hsl(240 6% 10%);
/* ... */
}
Toggle Strategy
JK-UI does not prescribe a specific dark mode toggle library. You can use:
next-themes— Recommended for Next.js projects- Custom
classtoggle — Add/remove.darkfrom<html> prefers-color-scheme— Auto-detect system preference
Theme Modes
The base writes both
:root and .dark values into the main CSS file declared in components.json. Theme presets are optional replacements for those values.| Mode | Description |
|---|---|
both | Full light and dark variable sets. Recommended. |
light | Light mode only. |
dark | Dark mode only. |
Theme Presets
JK-UI includes 17 built-in theme presets, each with both light and dark variants:
| Theme | Character |
|---|---|
| Default | Balanced, neutral palette |
| Air | Light, airy tones |
| Earth | Warm earthy tones |
| Fire | Bold red/orange |
| Water | Cool blue tones |
Install the base first with
bunx shadcn add @jk-ui/base, then optionally apply a preset with bunx shadcn add @jk-ui/theme-{name}. Presets replace semantic values; they do not change the six @reference directives.Example:
bunx shadcn add @jk-ui/theme-earth # Install Earth theme preset