CSS Dark Mode Generator

Home/Tools/Dark Mode Generator

Auto-generate dark mode CSS custom properties by inverting lightness. Manual overrides supported.

No sign-up neededRuns in your browserProduction-ready CSS

CSS Custom Properties Input

Paste CSS custom properties. Dark variants are auto-generated by inverting lightness.

Override Dark Values

--bg-primary

--bg-secondary

--text-primary

--text-secondary

--accent

--border

--card-bg

Light

--bg-primary

#ffffff

--bg-secondary

#f5f5f5

--text-primary

#1d1d1f

--text-secondary

#86868b

--accent

#0071e3

--border

#d1d1d6

--card-bg

#ffffff

Dark

--bg-primary

#000000

--bg-secondary

#0a0a0a

--text-primary

#dfdfe1

--text-secondary

#737378

--accent

#1a8cff

--border

#29292e

--card-bg

#000000

Generated CSS

:root {
  --bg-primary: #ffffff;
  --bg-secondary: #f5f5f5;
  --text-primary: #1d1d1f;
  --text-secondary: #86868b;
  --accent: #0071e3;
  --border: #d1d1d6;
  --card-bg: #ffffff;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg-primary: #000000;
    --bg-secondary: #0a0a0a;
    --text-primary: #dfdfe1;
    --text-secondary: #737378;
    --accent: #1a8cff;
    --border: #29292e;
    --card-bg: #000000;
  }
}

Related Tools

CSS Variables Generator

Create and organize CSS custom properties for your design system.

Media Query Generator

Generate responsive media queries for all device sizes.

Z-Index Visualizer

Visualize and manage z-index stacking contexts.