Designing for Dark Mode: A Complete Guide for Web and Brand

Dark mode has evolved from a niche developer preference into a mainstream design expectation. Over eighty percent of smartphone users now use dark mode at least some of the time, and both Apple and Google have made it a first-class feature in their operating systems. For websites and web applications, offering a dark mode option is no longer a novelty — it is a user experience consideration that directly impacts engagement, accessibility, and how your brand is perceived. This guide covers the design principles, technical implementation, and common pitfalls of building dark mode properly.

Why Dark Mode Matters More Than You Think

The case for dark mode extends well beyond aesthetics. In low-light environments, dark interfaces reduce eye strain and visual fatigue. On OLED and AMOLED screens — which now dominate the mobile market — dark mode genuinely reduces battery consumption because black pixels are literally switched off. From an accessibility standpoint, many users with photosensitivity conditions, migraines, or certain visual impairments find dark interfaces significantly more comfortable to use.

There is also a perception element. Brands that offer dark mode signal that they care about user preferences and modern design standards. It communicates technical competence and attention to detail. For creative agencies, technology companies, and premium brands, dark mode often aligns naturally with their visual identity and positioning.

Design Principles for Dark Mode

The most common mistake in dark mode design is simply inverting colours — swapping white backgrounds for black and dark text for white. This creates harsh, uncomfortable interfaces with excessive contrast that are actually harder to read than light mode. True dark mode design is far more nuanced and requires rethinking your entire colour system.

Dark mode is not about making things dark. It is about making things comfortable and legible in a darker context.

Material Design Guidelines

Colour and Contrast

Start with dark grey backgrounds rather than pure black. A background of around #121212 to #1a1a1a provides sufficient darkness while avoiding the "floating text" effect that pure black creates with white text. Body text should be a slightly muted white — #e0e0e0 or similar — rather than pure white, which reduces glare and improves reading comfort over extended periods. Headings can use a brighter white for hierarchy, but pure #ffffff should be used sparingly.

Your colour palette needs adjustment for dark backgrounds. Saturated colours that look vibrant on white can appear harsh or neon-like on dark backgrounds. Desaturate your brand colours slightly or use lighter tints to maintain visual harmony. Test every colour combination for WCAG contrast compliance — some combinations that pass on light backgrounds will fail on dark ones and vice versa.

Elevation and Depth

In light mode, depth is typically communicated through shadows — elements that are "closer" to the user cast shadows on the surface behind them. In dark mode, shadows are invisible against dark backgrounds. Instead, use lighter surface colours to communicate elevation. A card that sits above the base surface should use a slightly lighter shade of grey, and a modal that floats above the card should be lighter still. This creates an intuitive visual hierarchy without relying on shadows.

Technical Implementation

The cleanest approach to implementing dark mode uses CSS custom properties and 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. This approach keeps your component styles clean — they reference variables rather than hard-coded colours — and makes switching between modes seamless.

• Respect system preferences: Use the prefers-color-scheme media query to automatically match the user's operating system setting as the default, creating a frictionless first experience
• Provide a manual toggle: Always give users explicit control to override the system default, and remember their preference using localStorage so it persists between visits
• Prevent flash of incorrect theme: Load the theme preference before the page renders using an inline script in the document head to prevent a jarring flash of the wrong colour scheme
• Test images and media: Photographs, illustrations, and icons designed for light backgrounds may need alternative versions or CSS filters to work well in dark mode
• Consider reduced transparency: Semi-transparent overlays that work well on light backgrounds can become muddy or illegible on dark backgrounds — adjust opacity values accordingly

Common Pitfalls to Avoid

Beyond the colour inversion mistake, several other pitfalls frequently undermine dark mode implementations. Hard-coded colours buried in component styles that do not respond to theme changes create inconsistencies. Third-party widgets and embeds that ignore your dark mode create jarring visual breaks. Form inputs with browser-default styling can appear as bright white rectangles in an otherwise dark interface. SVG icons with hard-coded fill colours will not adapt. Each of these requires deliberate attention during implementation.

Testing is another area where teams commonly fall short. Dark mode needs to be tested across multiple browsers, operating systems, and devices. It needs to be tested at various screen brightness levels and in different ambient lighting conditions. It needs to be tested by users who actually prefer dark mode, not just developers toggling a switch in DevTools. Thorough testing is what separates a dark mode that delights users from one that frustrates them.

Accessibility Considerations

Dark mode should enhance accessibility, not compromise it. Ensure all text meets WCAG AA contrast requirements at minimum — a 4.5:1 ratio for body text and 3:1 for large text. Be cautious with colour as the sole means of conveying information; status indicators, error states, and interactive elements should use shape, iconography, or text labels alongside colour. Focus indicators must remain clearly visible against dark backgrounds — the default browser focus ring often becomes nearly invisible, requiring custom focus styles.

For users with astigmatism, which affects roughly half the population to some degree, light text on dark backgrounds can cause halation — a glowing or bleeding effect around text that reduces legibility. Using slightly heavier font weights in dark mode and avoiding very thin typefaces can mitigate this effect. These subtle adjustments demonstrate genuine care for your users' experience.

Dark Mode and Brand Identity: Maintaining Consistency

One of the subtlest challenges of dark mode is ensuring your brand remains recognisable across both themes. Your logo, brand colours, imagery style, and overall personality should feel cohesive whether the user is viewing your site in light or dark mode. This often requires creating variant versions of brand assets — a light logo for dark backgrounds, adjusted brand colour palettes that maintain the spirit of your identity without clashing against dark surfaces, and alternative image treatments that sit naturally against darker tones.

Consider how your photography and illustration style translates. Bright, airy product photographs that look stunning on white backgrounds can appear jarring when surrounded by dark grey. Some brands create subtle vignette effects or adjust image brightness and contrast specifically for dark mode contexts. Others use CSS blend modes or subtle border treatments to integrate images more naturally. The goal is seamlessness — the user should never feel like they are viewing a broken or inconsistent version of your site regardless of their theme preference.

A brand that looks different in dark mode is a brand that has not finished designing dark mode. Consistency across themes is not optional — it is a design requirement.

Design Systems Handbook

Performance Benefits and Future-Proofing

Beyond user experience, dark mode offers tangible performance benefits that make it a smart investment. On OLED screens, which now account for the majority of premium smartphones and an increasing share of laptops and monitors, dark mode reduces power consumption by up to sixty percent compared to light interfaces. For progressive web applications and mobile-first websites, this translates directly into longer battery life for your users — a benefit they notice and appreciate even if they cannot articulate why your site feels better to use.

Looking ahead, the trend towards dark mode is accelerating rather than fading. Operating systems, browsers, and even email clients now support automatic dark mode rendering. Websites that have not been designed with dark mode in mind are increasingly being force-rendered into dark colour schemes by browsers and extensions, often with poor results — illegible text, invisible elements, and broken layouts. By designing dark mode intentionally, you retain control over how your website appears in these contexts rather than leaving it to algorithmic guesswork.

• Progressive enhancement: Start with a well-designed light mode as your baseline, then layer dark mode as an enhancement that respects user preferences
• Design token systems: Build your colour system using semantic tokens like "surface-primary" and "text-secondary" rather than literal colour values, making theme switching trivial
• Automated testing: Include dark mode variants in your visual regression testing pipeline to catch theme-specific bugs before they reach production
• User analytics: Track dark mode adoption among your audience to prioritise investment and understand whether theme preference correlates with engagement metrics