Approach · c. 2016–present; dark themes are far older · Operating systems and apps worldwide
Dark mode interfaces
Light text on dark surfaces, chosen by the person.
What is Dark mode interfaces?
Dark mode uses dark backgrounds with lighter content instead of the usual light surfaces and dark text. Dark themes are as old as terminals, but system-wide dark modes became a standard expectation in the late 2010s, arriving in Windows 10, macOS Mojave, iOS 13 and Android 10. Done well, it is a full design system with its own elevation, colour and contrast rules, not a colour inversion. It is a user preference, so interfaces should respect it.
The story
Desktop and mobile platforms added system dark themes between 2016 and 2019, helped by OLED screens and by comfort in low light. Battery savings apply to OLED screens and depend on the colours used; claims about reduced eye strain are not conclusive.
How do you recognise Dark mode interfaces?
- Dark grey surfaces rather than pure black
- Lighter surfaces to show elevation
- Desaturated accent colours
- Off-white text instead of pure white
Colour, type, layout and material
- #0F1115
- #181B22
- #E8EAF0
- #8AB4FF
Typography. Slightly heavier weights help light text on dark. Avoid thin weights and pure white at small sizes.
Composition. Layer surfaces from the darkest base to lighter raised layers. Separate elements with tone and thin borders, not shadows.
Materials. Tonal surfaces, desaturated accents and subtle borders.
Why does Dark mode interfaces work?
Many people find dark interfaces more comfortable in low light and more focused for media or code. Evidence on eye strain is mixed and preferences differ, so offer a choice.
The principle. Design dark mode as its own palette. Express depth with lighter surfaces instead of shadows, soften colours so they do not vibrate, and keep text contrast comfortable.
Where it was used
macOS Mojave dark mode, Apple, 2018. One of the first system-wide dark modes on a major desktop operating system.
- Developer tools and media players
- Night-time and low-light use
- Dashboards for long sessions
What to avoid
- Simply inverting colours
- Pure black with pure white text
- Saturated accents that glow
Try it: a short exercise
Take one light screen and rebuild it in dark mode without inverting. Use three surface levels and one desaturated accent, and check every text pair for contrast.
How do you prompt for Dark mode interfaces?
These prompts ask for an original piece informed by the style, not a copy of any work. Replace the words in square brackets.
For an image or visual design
Create an original Dark mode interfaces-informed [FORMAT] about [SUBJECT] for [AUDIENCE]. Use dark grey surfaces in three tonal levels, off-white text, thin borders and one desaturated accent. Depth comes from lighter layers, not heavy shadows. Use a disciplined palette drawn from #0F1115, #181B22, #E8EAF0, #8AB4FF. Typography direction: Slightly heavier weights help light text on dark. Avoid thin weights and pure white at small sizes. Composition: Layer surfaces from the darkest base to lighter raised layers. Separate elements with tone and thin borders, not shadows. Make every detail follow a clear visual idea. Build the subject from observations specific to the brief, not stock symbols. Do not copy existing products, branding or screens. Return one resolved composition and explain three deliberate design decisions.
For an interface
Implement a contemporary responsive interface for [SUBJECT], serving [AUDIENCE], in [FORMAT], using Dark mode interfaces as a design principle rather than a costume. Build a dark theme with three surface levels, off-white text, thin borders and a desaturated accent. Avoid pure black and pure white, express elevation with lighter surfaces, and respect prefers-color-scheme with a manual override. Use real content, semantic HTML, responsive CSS and a coherent spacing scale. Keep body text at WCAG AA contrast, never encode meaning only through colour, provide visible keyboard focus, touch targets of at least 44px, and working loading, empty, error and success states. Use motion only to explain interaction and respect prefers-reduced-motion. Explain which principles you translated and test keyboard navigation and mobile overflow.
Lineage
Draws on: Flat design, Material Design.