What it does
Enter your accent colour (and optionally your light background and text colours). The generator derives a dark palette from the same hue — tinted dark surfaces, off-white text, a lightened accent — checks contrast in both themes, and outputs CSS custom properties with a prefers-color-scheme: dark block.
How the dark palette is derived
- Background and surfaces keep your brand hue at very low saturation and 8–13% lightness, so the dark theme still feels like your brand. Choose neutral grey or OLED black if you prefer.
- Text is off-white (about 92% lightness) to avoid glare.
- Accent is lightened to at least 68% lightness, then nudged until it reaches 4.5:1 against the background.
- On-accent text switches between white and near-black for contrast.
Paste the CSS at the top of your stylesheet and replace hard-coded colours with the variables. The dark mode guide covers images, a manual toggle and avoiding a flash of the wrong theme.
Frequently asked questions
Will the app switch automatically?
Yes. Android WebView reports the phone's theme through prefers-color-scheme, so the dark block applies when the phone is in dark mode.
Why not pure black?
Tinted dark greys keep cards and elevation visible. Pick 'OLED black' if you want true black backgrounds.