Dark mode went from a niche developer preference to a mainstream expectation faster than anyone predicted. Apple introduced system-wide dark mode in iOS 13 back in 2019. Android followed suit. By 2025, a study by Android Authority found that over 80% of smartphone users had dark mode enabled on their devices. And now, in 2026, the question isn't whether people like dark mode. It's whether your website should support it.
The answer, like most things in web design, is "it depends." But it depends on fewer things than you might think, and the technical barrier to entry has dropped significantly.
The Case for Dark Mode
Users Expect It
When someone sets their phone to dark mode, they expect the websites they visit to respect that. According to a 2025 UXCam survey, 72% of users notice when a website doesn't match their system's dark mode setting. 34% said it negatively affects their perception of the brand.
Battery Life (On OLED Screens)
On devices with OLED or AMOLED screens (most modern smartphones), dark mode genuinely saves battery. Google confirmed dark mode on OLED screens can reduce power consumption by up to 63% at maximum brightness.
Reduced Eye Strain in Low Light
Research from the Lighting Research Center suggests dark mode doesn't universally reduce eye strain. In well-lit environments, light mode with good contrast is actually easier to read. But in low-light conditions, dark mode genuinely helps.
It Looks Good
A well-designed dark mode can make a website feel premium, modern and polished. Photography, video and colourful UI elements pop against dark backgrounds.
The Case Against (Or at Least, Reasons to Pause)
Long-Form Reading Gets Harder
Light text on dark backgrounds reduces reading speed and comprehension compared to dark text on light backgrounds. The effect is small but compounds over longer sessions. Blog-heavy sites, news sites and documentation portals should default to light mode.
Colour Accuracy Suffers
If colour matters for your business (you sell paint, you're a photographer, you run a fashion brand), dark mode can shift how colours are perceived.
It's Extra Work (But Less Than You Think)
Supporting dark mode means maintaining two colour schemes. Not double the work, but not zero either. Modern frameworks with CSS custom properties make this manageable.
How to Implement Dark Mode Properly
The CSS Foundation
Modern browsers support the prefers-color-scheme media query, which detects the user's OS preference. Define your colour palette as CSS custom properties (variables), then override them inside a prefers-color-scheme: dark media query. The entire site adapts automatically when the user's system preference changes. No JavaScript required for basic implementation.
Don't Just Invert Everything
The biggest mistake people make with dark mode is treating it as a simple colour inversion. Pure white text on pure black creates excessive contrast that's actually harder to read. Google's Material Design recommends #121212 as a base dark surface and text at around 87% opacity (#e0e0e0).
Shadows work differently too. Traditional drop shadows are invisible against dark backgrounds. Use lighter borders or subtle elevation differences for depth.
Give Users a Toggle
Some people prefer light mode for your site even if their system is set to dark. A simple toggle button in your header or footer, with the preference saved to localStorage, handles this gracefully.
Handle Images and Media
Images designed for light backgrounds can look awful on dark ones. Logos with transparent backgrounds are the most common offender. Options: provide alternate versions, add a subtle background, or use SVGs with CSS fills.
Accessibility Matters More, Not Less
Dark mode doesn't get you off the hook. WCAG 2.1 requires 4.5:1 contrast for normal text and 3:1 for large text in both modes. Check every colour pairing with WebAIM's contrast checker. We've written about accessibility requirements in detail.
Which Businesses Benefit Most?
Strong candidates: - Tech companies and SaaS products - Creative agencies and portfolios - Entertainment and media sites - Developer tools and documentation - E-commerce for electronics, gaming or luxury goods
Less obvious but still beneficial: - Professional services with modern positioning - Businesses targeting 18-35 demographics
Proceed with caution: - Content-heavy editorial sites (reading concerns) - Businesses where colour accuracy is central - Government or institutional sites where familiarity matters
The Performance Angle
CSS custom properties and media queries add negligible overhead. The danger comes from JavaScript-heavy implementations that flash the wrong theme on page load (FOUC). To avoid this, apply the theme preference as early as possible. In Next.js, use a small inline script in the head that checks localStorage before render.
For headless CMS setups like Next.js with Sanity, theming can be integrated at the component level for fine-grained control.
What About Email and Other Touchpoints?
If your website supports dark mode, consider your email templates too. Apple Mail, Outlook and Gmail have their own dark mode rendering quirks. An email that looks perfect in light mode can become unreadable when an email client forces its own dark transformation.
Frequently Asked Questions
Does dark mode improve SEO? Not directly. Google doesn't rank sites higher for supporting it. But dark mode can indirectly improve SEO signals by reducing bounce rates and increasing time on site.
How long does it take to add dark mode to an existing website? For a site already using CSS custom properties, a day or two. For older sites with hardcoded colours, a week or more depending on complexity.
Should I default to dark mode or light mode? Default to the user's system preference using prefers-color-scheme. For the fallback, default to light mode.
Will dark mode break my existing design? It can if implemented carelessly. Common issues: logos disappearing, unreadable text, broken shadows. Audit every component in both modes first.
Is dark mode required for accessibility compliance? No. WCAG 2.1 and the UK Equality Act 2010 don't require dark mode specifically. They require sufficient colour contrast in both modes.
Time to Go Dark?
Dark mode in 2026 isn't really a question of "should we?" for most businesses. It's a question of "when?" The implementation is straightforward, the user expectation is there, and the benefits are real. Need help implementing dark mode (or building a website that supports it from the ground up)? Talk to our web development team about a custom website design that looks sharp in any lighting. To chat through the details, get in touch.
