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.
Frequently Asked Questions (FAQ)
How does the dark mode CSS generator work?
It scans your CSS for hex, rgb and common named colors, darkens light surfaces and lightens dark text using your darkness level, then wraps everything in a prefers-color-scheme dark media query.
What does the darkness level control?
The slider sets how far light colors move toward the dark base tone; higher values give a deeper, near-black dark theme.
Should I review the output?
Yes, it is a best-effort conversion, so check accent and brand colors before shipping.
How do I use the generated CSS?
Paste your light CSS, press Generate dark CSS, then copy the result or download it as a .css file. It is wrapped in a prefers-color-scheme dark media query, so it applies automatically in dark mode.