Dark mode has evolved from a niche developer preference to a mainstream user expectation. With major operating systems, browsers, and apps all supporting dark themes, users increasingly expect websites to follow suit. Getting dark mode right, however, involves far more than inverting your colour palette. Here is what we have learned from implementing dark mode across projects at Born Digital.
Why Dark Mode Matters
Dark mode is not purely aesthetic. It reduces eye strain in low-light environments, can lower battery consumption on OLED and AMOLED screens by up to 60%, and provides users with a sense of control over their browsing experience. For businesses, offering dark mode signals attention to detail and modern design sensibility. It is also a practical accessibility consideration for users with photosensitivity or certain visual impairments.
From a product perspective, dark mode can also enhance the visual impact of media-rich content. Photography, video, and data visualisations often appear more vibrant against darker backgrounds, making dark mode particularly valuable for portfolios, media platforms, and dashboards.
Colour Selection for Dark Themes
The most common mistake in dark mode implementation is using pure black (#000000) as the background. Pure black creates harsh contrast with white text, causes visual fatigue, and produces an effect known as "halation" where light text bleeds into the dark background. Instead, use dark greys in the range of #121212 to #1E1E1E as your base surface colour.
Key principles for dark mode colour selection:
- Elevation through lightness: Use progressively lighter surface colours to indicate elevation. A card floating above the page should be slightly lighter than the background beneath it.
- Desaturate accent colours: Fully saturated colours that work on light backgrounds can appear overwhelming on dark surfaces. Reduce saturation by 10-20% for dark mode variants.
- Text opacity: Use off-white (#E0E0E0 or similar) for body text rather than pure white. Reserve full white for headings and emphasis.
- Maintain contrast ratios: Aim for at least 4.5:1 for body text and 3:1 for large text, consistent with WCAG AA standards.
Implementation with CSS
The most robust approach to dark mode uses CSS custom properties (variables) combined with the prefers-color-scheme media query. Define your colour tokens as CSS variables on the root element, then override them within a dark mode media query or a class-based toggle.
A class-based toggle (adding a .dark class to the HTML element) gives users explicit control and should be combined with prefers-color-scheme as the default. Store the user's preference in localStorage so it persists across sessions. Apply the theme class before the page renders to avoid a flash of the wrong theme.
With Tailwind CSS, dark mode support is built in. You can configure it to use either the media query or class strategy, and then prefix any utility with dark: to apply dark-specific styles. This approach scales well and keeps your light and dark styles co-located in the markup.
Handling Images and Media
Images and media require careful consideration in dark mode. Transparent PNGs with dark elements may become invisible against dark backgrounds. SVG icons should use currentColor so they automatically adapt to the surrounding text colour. For photographs, consider adding a subtle semi-transparent overlay or reducing brightness slightly to prevent them from being visually jarring against the dark interface.
Shadows behave differently in dark mode. Traditional box shadows are barely visible on dark surfaces. Replace them with subtle border treatments or use lighter, coloured shadows to create depth. Some designs use a faint glow effect instead of a shadow to indicate elevation.
Testing and Quality Assurance
Dark mode doubles your visual testing surface. Every component, every page, and every state needs to be verified in both themes. Automated contrast checking tools like axe-core can catch accessibility violations, but manual review is essential for catching issues like invisible borders, poorly adapted illustrations, or third-party embeds that ignore your colour scheme.
At Born Digital, we build dark mode into our design system from the start rather than treating it as an afterthought. This approach ensures consistency and reduces the testing burden. If your project is already live without dark mode, a phased rollout starting with core layout components is the most pragmatic approach. The key is to plan your colour token architecture carefully so the switch is purely a matter of changing variable values rather than rewriting styles.