Dark Mode Generator

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

Brand Colors

Primary *

Secondary

Accent (optional)

Neutral (optional)

Light

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

Dark

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

CSS Variables

Backgrounds

--bg-primary, --bg-secondary, --bg-tertiary

Text

--text-primary, --text-secondary, --text-muted

Borders

--border-default, --border-muted

Accents

--accent-primary, --accent-secondary