NodlumeDark mode converter
Paste the light-mode CSS variables from your shadcn/ui globals.css and get a matching .dark block — not a guess: each color's lightness is moved while its hue and saturation are held, then every foreground/background pair is measured against the WCAG threshold it's actually held to and repaired until it passes. No account needed.
Derived, not guessed
Backgrounds and surfaces drop to fixed dark lightness steps that stay distinguishable from each other; brand colors get a lightness floor so they read on dark instead of vanishing into it.
WCAG-checked output
Text is verified at AA 4.5:1 against the background, surface and muted tones; borders at the 3:1 non-text threshold. Anything that falls short is nudged until it clears.
Honest about limits
Only hex colors carry a lightness this can move — an oklch() or var() value is left out of the override rather than mangled into a color you never chose.
shadcn/ui dark mode, answered
- How does dark mode work in shadcn/ui?
- shadcn/ui components read every color from semantic CSS variables — --background, --primary, --border and the rest. Light mode defines them on :root; dark mode overrides the same variables inside a .dark selector, toggled by adding the dark class to <html>. No component changes, no duplicate markup: switching modes is switching one class.
- Can I convert my shadcn light mode theme to dark automatically?
- Yes — paste your :root block here. Each color's lightness is moved to a dark-appropriate step while its hue and saturation are held, so the dark theme still reads as your brand. Backgrounds and surfaces land on fixed steps that stay distinguishable, and brand colors get a lightness floor so they don't vanish into the dark background.
- Will the generated dark theme pass WCAG contrast?
- The converter measures every foreground/background pair the tokens actually form — text at the AA 4.5:1 threshold, borders at the 3:1 non-text threshold — and nudges anything that falls short until it clears. That check runs on the derived dark values, not on assumptions about them.
- How do I add a shadcn theme switch?
- A shadcn ui theme switcher is just a control that toggles the dark class on <html> — the .dark block this converter generates is what that class reveals. In a Next.js project the usual route is next-themes: wrap the app in its ThemeProvider with attribute set to class, then call setTheme from any button. The switcher needs no knowledge of your colors; it flips the class, and the CSS variables do the rest.
- Do I need separate components for light and dark mode?
- No. Because shadcn/ui styles everything through the semantic variables, one component tree serves both modes. Keep both blocks in the same globals.css — :root for light, .dark for dark — and the whole app follows the class on <html>.
Design the whole theme, not just the dark half
This converter is one step of Nodlume's theme system. In the workspace you design the full palette, typography, radius and shadows with a live light/dark preview — and it ships inside a generated Next.js project designed on a visual canvas.