Home/Tools/Utilities/Dark Mode Generator

Utilities · Generator

Dark Mode Generator

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

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;
  }
}

100%

Free, no
sign-up needed

Code written
by hand

85+

CSS tools
in one place

<1s

Copy-ready
CSS instantly

What is this

What is the CSS Dark Mode Generator?

Generate dark mode CSS using prefers-color-scheme, data-theme attributes, or CSS custom properties. Three implementation strategies in one tool.

Everything runs locally in your browser. Adjust the controls above, preview instantly, and copy clean, production-ready CSS — no account, no upload.

How to use

Using the CSS Dark Mode Generator

Everything lives in the panel at the top of this page. There is nothing to install — it all runs right here in your browser.

Choose strategy

OS preference only: follows the OS setting. Toggle + OS: lets users override the OS setting. Class toggle: legacy approach for maximum compatibility.

Set your colour pairs

Enter light and dark values for background, surface, text, secondary text, border, and primary colour.

Copy the CSS and optional JS

Strategy 2 requires a small JavaScript snippet to toggle the data-theme attribute. It is included in the output.

The output

What the generated code looks like

Clean, production-ready CSS — no vendor bloat, no unnecessary declarations.

dark-mode.css

/* Strategy 1: OS preference only (simplest) */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #000;
    --text: #f5f5f7;
  }
}

/* Strategy 2: Toggle + OS fallback (recommended) */
:root { --bg: #fff; --text: #1d1d1f; }
[data-theme="dark"] { --bg: #000; --text: #f5f5f7; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #000; --text: #f5f5f7;
  }
}

/* Strategy 3: Class toggle (legacy) */
.dark-mode body { background: #000; color: #f5f5f7; }

Pro tips

Pro tips for better results

★

Always test dark mode for contrast ratios

Dark backgrounds with coloured text often fail WCAG AA contrast (4.5:1). Light text on dark backgrounds can also be hard to read at full saturation. Use a contrast checker after generating your dark palette.

FAQ

Frequently asked questions

Strategy 2 (toggle + OS fallback) is the current best practice. It respects the OS setting by default and lets users override if they prefer light mode on a dark OS or vice versa. Persist the choice in localStorage.

Images do not automatically adapt to dark mode. Add filter: brightness(0.8) to img elements within a dark mode context to reduce the visual harshness of bright images against dark backgrounds.