Dark Mode Generator

Generate light and dark mode CSS variable systems from your brand colors.

Brand Colors

Preview

Light

Card Title

This is a sample paragraph showing how text appears on different background colors.

Dark

Card Title

This is a sample paragraph showing how text appears on different background colors.

CSS Variables

Token Reference

Backgrounds
--bg-primary, --bg-secondary, --bg-tertiary
Text
--text-primary, --text-secondary, --text-muted
Borders
--border-default, --border-muted
Accents
--accent-primary, --accent-secondary

Semantic tokens make dark mode maintainable

The key to a dark mode that doesn't turn into a maintenance nightmare is naming CSS variables by role, not by color. --bg-surface and --text-primary describe what a value is used for; --gray-100 describes what it looks like today. Swap themes by changing only the values behind those role-based names, and every component that already consumes --bg-surface picks up the new theme automatically.

There are two common ways to apply those values. A prefers-color-scheme media query follows the visitor's OS setting with zero JavaScript, which is the right default for most sites. A [data-theme] attribute lets people override that choice with a toggle, at the cost of a few lines of script to read, apply, and persist their preference — usually to localStorage.

A couple of practical details make dark themes feel considered rather than simply inverted: avoid pure black backgrounds (#000 next to white text creates harsh contrast and can cause smearing on OLED and low-refresh displays — a dark gray around oklch(0.15 0 0) reads better), and pull back the chroma on saturated accent colors, since fully saturated hues tend to vibrate against a dark background.

FAQ

Should I use prefers-color-scheme or a data-theme attribute?

Use both. Default to prefers-color-scheme so the site matches the OS setting with no JavaScript required, then layer a [data-theme] override so visitors who want to pick a theme manually can, with their choice persisted for next visit.

Why avoid pure black backgrounds in dark mode?

Pure black (#000) next to light text creates the highest contrast possible, which reads as harsh rather than comfortable, and can cause visible smearing on OLED and low-refresh-rate screens. A dark gray a few steps above black keeps contrast comfortable while still feeling dark.

How do I avoid a flash of the wrong theme on page load?

Add a small inline script in the document head that reads the saved preference and sets data-theme before the page paints. Anything that runs after first paint, including scripts loaded normally, will show a flash of the default theme first.

Do I need to change my brand colors for dark mode?

Usually, yes, but only slightly. Keep the same hue, lower the chroma a little, and adjust lightness so the color still reads clearly against a dark background — a color tuned for a white background often looks oversaturated or glowing on black.