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
Dark Mode
CSS theme updated
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.
Private & free — this tool runs entirely in your browser.
Related Design & CSS tools
Color Converter
Convert a color to HEX, RGB, HSL, HSB, and CMYK at once.
HEX to RGB
Convert HEX color codes to RGB / RGBA values.
RGB to HEX
Convert RGB values into HEX color codes.
CSS Box Shadow Generator
Visually design CSS box-shadow with a live preview and code.
CSS Border Radius Generator
Visually craft border-radius with a live preview.
HEX to CMYK
Convert HEX colors to CMYK print values.
CMYK to HEX
Convert CMYK print values to HEX colors.
HEX to HSB
Convert HEX colors to HSB / HSV values.