Dark Mode
An alternative low-light color scheme with dark backgrounds.
Dark mode is a UI theme that uses dark backgrounds and light text, reducing glare in low-light environments and, on OLED screens, saving battery. It's now an expected option in most modern products.
Implementing dark mode well means more than inverting colors — it requires a carefully tuned palette (via design tokens) for contrast, depth, and legibility.
Key characteristics
- A colour scheme using light text on dark surfaces, offered alongside light mode.
- Best built on semantic design tokens so themes swap cleanly.
- Avoid pure black on pure white text — softened greys reduce eye strain and halation.
- Can save power on OLED screens and is widely expected as an option.
Example
An app stores colours as tokens like `surface` and `text`, so switching to dark mode remaps those values app-wide without touching individual components.
Frequently asked questions
Is dark mode better for your eyes?
It depends on context. In low light, dark mode can reduce glare and strain; in bright environments, light mode is often more legible. Offering both and respecting the system setting is best.
Should dark mode use pure black?
Usually not for large surfaces. Very dark greys reduce harsh contrast and visual vibration, and pure-white text on pure black can cause halation for some readers.
Related terms
Need this done, not just defined?
I design and build it — Framer sites, product UI/UX, and more.