CSS Dark Mode Generator

Generate CSS custom properties and a JavaScript toggle for a complete light/dark mode theme system.

Preset: TAILWINDColors Used: 12CSS Size: 707 BJS Size: 684 B

Select Preset System

Light Mode

Background

Surface

Text

Text Muted

Primary

Border

Dark Mode

Background

Surface

Text

Text Muted

Primary

Border

How CSS custom properties enable dark mode

CSS custom properties (variables) are the cleanest approach to dark mode — define all colors once in :root and override them in a [data-theme="dark"] selector. The prefers-color-scheme media query auto-applies dark colors for system-preference users, while the localStorage-backed JS toggle respects explicit user overrides.

Built and maintained by Meet Shah · Last updated 19 July 2026

What this tool is used for

Producing a custom-property theme structure for light and dark modes.
Getting a toggle that respects the system preference by default.
Producing a starting token set you then tune by eye.
Setting up a theme that can be overridden per user without a rebuild.
Generating the media query and attribute selectors in the right order.

Frequently Asked Questions

Why generate custom properties instead of a second stylesheet?: Because a variable is resolved at use time, so overriding six values on one selector re-themes every rule that references them. A duplicate stylesheet has to restate every rule, doubles what you maintain, and drifts the first time someone edits only one copy.
Why does the toggle script have to go in the head?: To avoid the flash of the wrong theme. Anything that runs after the first paint means a dark-mode user sees a white screen first. The snippet reads localStorage and stamps `data-theme` on `<html>` before the body renders, which is why it is a blocking inline script rather than a module.
How do a system preference and a manual toggle coexist?: The stored choice wins, and the media query is the fallback. The script checks localStorage first and only consults `prefers-color-scheme` when nothing is stored — so a visitor who explicitly picked light keeps light even on a device set to dark, which is what an explicit choice means.
Why is the dark background not pure black?: All three presets avoid #000: minimal uses #121212, Tailwind-style uses #0f172a, Material-style uses #1c1b1f. Pure black against light text maximises contrast to the point of halation, and on OLED it makes scrolling smear. A near-black also lets elevated surfaces read as lighter.
Can I just invert my light theme?: No — a `filter: invert(1)` dark mode inverts your images and photos too, and inverting brand colours produces their complement rather than a dark equivalent. Dark themes also want lower saturation, because a vivid colour that reads well on white vibrates against a dark ground.

Common errors and gotchas

Defining a colour only inside the dark block, so it is undefined in light mode.
Handling the system preference but not an explicit user choice, or the reverse.
Forgetting a background colour on the body, so the page shows the browser's default behind it.
Reusing light-mode shadows, which are invisible on dark surfaces.
Shipping without re-checking contrast, since every ratio changes.