How to Build a Dark Mode Color Palette

Choose layered dark surfaces

Start with a near-black page background rather than assuming every surface should be #000000. Add slightly lighter values for cards, menus, and raised components. The steps should be visible but subtle enough that the interface does not become a patchwork of gray rectangles.

Use borders and shadows selectively. Traditional dark shadows may disappear, so elevation can rely on surface lightness, thin borders, or restrained highlights.

Reduce text glare through hierarchy

Primary text does not always need to be pure white. A slightly softened near-white can remain readable while reducing glare. Define secondary and muted text colors carefully; they still need sufficient contrast and should not disappear on lighter elevated surfaces.

Check long-form reading separately from labels and headings. Dense white paragraphs on black can be tiring even when the contrast ratio is high.

Rebuild accent tones for dark backgrounds

Brand colors often appear more luminous on dark surfaces. Reduce saturation or shift lightness where needed, then create separate hover, active, and subtle-background variants. Do not automatically reuse the light-theme button color.

Test colored text and icons against every dark surface level. A link that passes on the page background may fail on a lighter card.

Handle imagery and illustrations

Bright white illustrations and photographs can dominate a dark interface. Consider dark-aware assets, transparent backgrounds, or containers that soften the transition. Never reduce image opacity so far that content becomes unclear.

Logos may need an approved reversed version. Record which assets are allowed in each theme to prevent ad hoc recoloring.

Test theme switching and system states

Verify focus rings, selection, autofill, browser form controls, charts, skeleton loaders, code blocks, and scrollbars. Theme bugs often hide in components that were not part of the main design mockup.

Check both themes side by side and preserve semantic meaning. Error, success, warning, and information should remain recognizable without becoming painfully bright.