Dark Mode Preview Tool
Preview designs in dark and light modes.
Last reviewed by the Radiatus Cloud team
Need this done properly for your business?
Radiatus delivers secure cloud, DevOps & compliance engineering.
See your design both ways
Supporting dark mode means your design has to work in two colour schemes, and a palette that looks right in light mode can be unreadable in dark. This tool previews designs in both dark and light modes side by side so you can check them together before shipping, rather than discovering the problem from a frustrated user weeks later. Seeing both at once is the only reliable way to catch a scheme that works in one and fails in the other.
Dark mode is not just inverted
The mistake many teams make is treating dark mode as light mode with the colours flipped. Pure white text on pure black is harsh and causes eye strain; shadows that give depth in light mode disappear entirely against a dark background; and contrast ratios that comfortably pass in one mode can fail accessibility checks in the other. Previewing both schemes together reveals exactly where a colour choice works in one and breaks in the other, so you fix it before release.
Catch the mismatch early
It runs entirely in your browser, so nothing you enter is uploaded and the generated code is yours to paste straight into a project. Because it works client-side, you can iterate freely, regenerating as often as you like without a round trip to any server.
Related tools
- Color Converter — Convert colours between HEX, RGB, HSL, HWB and OKLCH, with alpha support. Runs in your browser and shows the live swatch for each format.
- Accessibility Color Contrast Checker — Check foreground and background colour contrast against WCAG thresholds, with the rules for text size, UI components and states.
- Typography Scale Generator — Generate a modular type scale from a base size and ratio, with fluid clamp() values for responsive layouts.
- Design Token Generator — Generate design tokens as CSS variables, JSON or platform formats, structured in the layers that make them maintainable.
Frequently Asked Questions
Why preview both modes?
Because a palette that reads well in light mode can be unreadable in dark. Checking both before shipping catches problems users would otherwise report.
Is dark mode just inverted colours?
No. Pure white on pure black is harsh, shadows behave differently, and contrast that passes in one mode can fail in the other. Dark mode needs its own considered palette.
What breaks most often in dark mode?
Text contrast, shadows that vanish on dark backgrounds, and images or borders that assumed a white background. Previewing surfaces these before users do.
Does contrast need checking in both modes?
Yes. A colour pair can meet contrast requirements in one scheme and fail in the other, so both need verifying independently.
Is my design uploaded?
No. The preview runs entirely in your browser.
Privacy & Security
Preview done locally.
About This Tool
This tool runs entirely in your browser. No data is sent to any server, ensuring complete privacy. Simply use the interface above to get started — no registration or login required.
Disclaimer: This tool is provided "as is" without warranty of any kind. Results are for educational and utility purposes.
Related Tools
Color Converter
DesignConvert colours between HEX, RGB, HSL, HWB and OKLCH, with alpha support. Runs in your browser and shows the live swatch for each format.
Accessibility Color Contrast Checker
DesignCheck foreground and background colour contrast against WCAG thresholds, with the rules for text size, UI components and states.
Typography Scale Generator
DesignGenerate a modular type scale from a base size and ratio, with fluid clamp() values for responsive layouts.