Dark Mode CSS Generator
Paste a block of regular CSS and get a dark mode variant: light backgrounds and surfaces move to dark tones, dark text is lightened for readability, and everything is wrapped in a prefers-color-scheme: dark media query. Adjust the darkness level to taste.
Dark mode output 0 colors changed
Press the button to generate the dark mode stylesheet.
How to use
- Paste your normal light-theme CSS into the box.
- Move the darkness slider to control how deep the dark tones go.
- Press Generate, review the output, then copy or download it into your project.
Note: The output is a best-effort conversion of hex, rgb and common named colors — brand and accent colors may need manual review. Include it after your main stylesheet so it only applies when the visitor prefers dark mode. This is an estimate for design work.
Tips
- Try a mid-range level around 55% first; very high values can wash out subtle borders.
- Hard shadows and gradients are not converted — restyle those by hand for the dark theme.
- Test the result with your operating system set to dark mode.