Dark UI design: principles and practical tips
Good dark UI design uses dark greys rather than pure black, lightens and desaturates brand colours, keeps text contrast accessible, shows depth with lighter surfaces instead of heavy shadows, adapts images and charts, and respects the user’s system preference while offering a manual choice.
Why dark UI matters
Dark mode has become a standard feature across operating systems, apps and websites. Many people prefer it at night or in low light, some find it more comfortable for long sessions, and on phones with OLED screens it can reduce battery use. For certain products, such as media apps, developer tools and dashboards used in control rooms, a dark interface is the default rather than an option.
Designing a good dark interface takes more than flipping colours. Simply inverting a light design often produces harsh contrast, glowing colours and confusing depth. A well-designed dark theme is planned as its own colour system, with careful attention to readability, hierarchy and brand expression.
Core principles of dark UI
| Principle | Why it matters | Practical tip |
|---|---|---|
| Use dark grey, not pure black | Pure black with white text can feel harsh and cause smearing on some screens | Start with a very dark grey background |
| Adjust colours | Saturated colours appear to glow on dark backgrounds | Use lighter, less saturated versions of brand colours |
| Keep contrast accessible | Text must remain readable for everyone | Meet WCAG contrast, but avoid pure white on pure black |
| Show depth with lightness | Shadows are hard to see on dark surfaces | Make raised surfaces slightly lighter |
| Reduce large bright areas | Big white blocks are glaring in the dark | Use dark cards and limit bright fills |
| Respect user choice | Preferences differ by person and situation | Follow the system setting and offer a toggle |
Backgrounds and surfaces
In light interfaces, depth is often shown with shadows. On dark backgrounds, shadows are barely visible, so dark themes usually show elevation through lightness instead. The base background is the darkest, cards and panels sit on a slightly lighter surface, and menus, dialogs and other raised elements are lighter still. This creates a clear sense of layering without heavy borders or shadows.
- Background: The darkest layer, a deep grey rather than pure black.
- Surface: Cards and panels, slightly lighter than the background.
- Raised surface: Menus and popovers, lighter again.
- Overlay: Dialogs and sheets, the lightest dark surface, often with a scrim behind.
Colour on dark backgrounds
Brand colours that look balanced on white can appear too bright or vibrating on dark backgrounds. Most dark themes use lighter, slightly desaturated variants of the primary and accent colours. Semantic colours for success, warning and error also need adjusting so they remain clear without being harsh. Defining these as separate colour tokens for the dark theme keeps everything consistent.
Text and contrast
Text on dark backgrounds should meet accessibility contrast requirements, at least 4.5 to 1 for normal text under WCAG. At the same time, pure white text on a very dark background can feel glaring for long reading. Many designers use an off-white for primary text and a slightly dimmer shade for secondary text, while keeping both above the required contrast. Avoid very thin font weights, which can look blurry on dark backgrounds. Our guide to accessibility in UI/UX design covers contrast in detail.
- Use off-white for primary text instead of pure white
- Use a dimmer, still accessible shade for secondary text
- Avoid very thin font weights
- Increase line height slightly for long text
- Check contrast for every text and background pair
Images, icons and charts
Images and illustrations designed for light backgrounds may look out of place in a dark theme. Photos often work as they are, but illustrations with white backgrounds, logos with dark text and screenshots may need dark versions. Icons should use the same lighter colour tokens as text. Charts need colour palettes that remain distinguishable on dark surfaces, with gridlines and labels that are visible but not dominant. Our post on effective dashboard design discusses chart colours.
Respecting user preference
Users have different preferences, and those preferences can change with the time of day or environment. Most platforms provide a system-wide setting for light or dark appearance, which products should follow by default. Offering a manual option in settings, such as light, dark or system, gives users control. Remember the choice and apply it consistently across the product.
Testing dark themes
- Review every screen: Check that no light-only assets or colours slipped through.
- Check contrast: Test all text, icons and controls against their backgrounds.
- Test in real conditions: View designs in dim rooms and on different screen types.
- Ask users: Gather feedback on comfort and readability.
- Maintain both themes: Update light and dark tokens together as the design system evolves.
Building dark mode into your design system
The easiest way to support dark mode is to build it into the design system from the start. Define colour tokens by role, such as background, surface, text primary and accent, with separate values for light and dark themes. Components then switch automatically when the theme changes. Our guide to building a design system from zero explains how to structure tokens.
Frequently asked questions
Is dark mode better for the eyes?
It depends on the person and environment. Many find it more comfortable in low light, while others read better in light mode. Offer both.
Should dark mode use pure black?
Usually not. Very dark greys are more comfortable and show depth better, though pure black can save battery on OLED screens.
Does dark mode save battery?
On OLED and similar screens, darker pixels use less power, so dark themes can help battery life.
Do all products need dark mode?
Not all, but it is increasingly expected in apps and tools used for long periods or in low light.
How do we design charts for dark mode?
Use a palette tested on dark surfaces, lighten gridlines and labels slightly and check that series remain distinguishable.