The Perks of Implementing Dark Mode

Let me begin this blog with a topic that is very close to my heart. I suffered from progressively worsening cataracts for about two years. It made me extremely sensitive to glare, especially from bright screens. Eventually, the only way for me to read (and work) was with bright text on a dark background. Fortunately, I have since undergone surgery and my vision has significantly improved. However, I will never forget the relief that the Dark Mode provided me during that period.

I tried my best to illustrate my struggles in the box below. With Dark Mode the light text got blurred and it surely got harder to read. But compared to Light Mode it was a bliss. In light mode the background colour would glow so much that the text was barely visible at all. Not every cataract patient experiences it the same way, but this is how it was for me.

I want to discuss Dark Mode not solely for this reason. As you’ll read later on, there are compelling reasons why the W3 Consortium mentions the Dark Mode multiple times in their recently released sustainability guidelines.¹

In this blog post, I will delve into the numerous advantages of Dark Mode, propose best practices for its effective implementation, and offer solutions for cases where Dark Mode is needed but not provided.

How Dark Mode Benefits Website Owners, Visitors, and the Planet

Whether Dark Mode is an aesthetic enhancement for websites may be doubted. But the benefits that the feature brings are clear. A 2021 survey found that over 80% of Android users had Dark Mode enabled.² Even if other statistics show only a share of about one-third,^{3 4} it is still a significant proportion of visitors who prefer Dark Mode. Therefore, it’s worth considering this visitor group.

Boosting User Engagement

Users appreciate it when their preferences are taken into account. This is also reflected in their behaviour on websites that accommodate to their demand for Dark Mode. There are several case studies that support this.^{5 6} The following reasons play a role:

• Eye comfort correlates with the time spent on a website. Websites offering Dark Mode can potentially enjoy longer visitor sessions, especially in low-light environments.
• Visitors are less likely to abruptly leave (bounce) websites when they are served the desired Dark Mode. This is especially true when they switch from other platforms that offer the feature. Personally, I developed the reflex to immediately hit the “Back” button when a website blinded me with its light.
• In today’s competitive digital landscape, it’s the little things that make a difference. A website that offers Dark Mode when an otherwise equivalent competitor does not will score points with visitors who prioritize this feature. If I encountered a website without Dark Mode, I looked for alternatives that offered it. Honestly, I still do this today, even though my eyes can handle both modes again.

Enhancing Accessibility and Improving Wellbeing

The web should be an inclusive space. We should ensure that as many people as possible can participate. Dark Mode can contribute a small part to this goal. Visitors with visual impairments such as cataracts and other light-phobia-triggering conditions^a rely on the ability to read content in a Dark Mode. Not all visitors have the technical know-how to help themselves.

Another small factor is that Dark Mode doesn’t expose us to as much blue light as its bright counterpart. Blue light can disrupt our sleep patterns and quality.⁷ Blue light can be even more effectively avoided through blue light filters, which are offered in all modern operating systems.

It should also be mentioned that we should offer a Light Mode to increase readability for all visitors. ^b Ideally, we should even provide the option to freely choose font and background colors via a color picker to maximize accessibility.⁸

Conserving Energy and Protecting the Environment

The internet contributes to excessive CO2e emissions and environmental strain. (Read more about my mission.) Dark Mode can play a small part in reducing this burden.

OLED (and AMOLED) displays can save energy through Dark Mode because in this technology, each pixel is individually illuminated (or not) and does not depend on a uniform backlight. Nearly 50% of smartphones sold in Q1 were equipped with OLED (with a rising trend),⁹ so soon more than half of all active smartphones are likely to have this technology. Another technology with similar energy-saving potential in Dark Mode is MicroLED, but it is still in its early stages.¹⁰ Google observed a 40% reduction in energy consumption for devices with AMOLED screens when using YouTube in Dark Mode at full brightness.¹¹ Other studies also report a 9% energy saving through the use of Dark Mode at 50% brightness,¹² which is still a significant value.

Another small but significant aspect: Using screens at night contributes to light pollution¹³. Here again, Dark Mode improves the balance and protects flora and fauna.

Effective Dark Mode Implementation: Best Practices

As discussed, Dark Mode brings several benefits, but its effectiveness heavily depends on the implementation. It’s important to avoid major mistakes. The Nielsen Norman Group has compiled some negative examples regarding UI, and CSS-Tricks has provided a comprehensive guide.

Empowering User Choice

When the webpage is initially loaded, it should take into account the system settings. If visitors prefer a light design, they should receive it accordingly. Visitors can then choose the other variant using a toggle button. I believe this button should be directly integrated into the header.

Once users have chosen a mode, it should appear immediately. Even on subsequent page loads, the selected mode should be displayed without any “flashing.” This means that the design in the system mode should not briefly flash before the selected mode appears. This can be implemented server-side using cookies or by prioritizing the corresponding JavaScript code block, which is render-blocking. Smashing Magazine recently introduced a JavaScript-light, cookie-free implementation.

Using Images Responsibly

What the above implementation does not consider are images that are loaded based on the prefers-color-scheme media query. This approach can be useful when we want images that best complement the respective mode. However, the challenge arises when the user does not select the system mode. Here, we can distinguish between images that should be lazy-loaded and those that should be quickly visible and are usually recognized by the browser’s preload scanner, which initiates loading directly. In the case of lazy loading, a few lines of JavaScript code are sufficient to override the respective media attributes. See example below:

function adjustSourcesMediaQuery(colorScheme){ // colorScheme = 'dark'|'light' 

  //all `source` nodes with selected prefer-color-scheme value 
  const slctr = 'source[media*="prefers-color-scheme"][media*="$1"]';

  const darkSources   = document.querySelectorAll(slctr.replace('$1','dark'));
  const lightSources  = document.querySelectorAll(slctr.replace('$1','light'));

  darkSources .forEach( el => _adjustMediaQuery(el,'dark') );
  lightSources.forEach( el => _adjustMediaQuery(el,'light') );


  function _adjustMediaQuery(el,mode){

    //prefixes for media queries, that in-/exclude all 
    const prefixExclude = '(not all) and ';
    const prefixInclude = 'all, ';
      
    const prefix = colorScheme === mode ? prefixInclude : prefixExclude;

    el.setAttribute('media', prefix + `(prefers-color-scheme: ${mode})`);
  }
 }

It becomes more challenging when the images are supposed to be loaded immediately. The preload scanner initiates loading of the potentially incorrect file here, before our JavaScript code is executed. So, the only solution is to output server-side modified HTML code. For this solution, we then need cookies to be able to consider the Dark/Light mode choice of the users server-side.

What to Do When Websites Lack Dark Mode

For those moments when a website doesn’t offer dark mode, here are some workarounds:

1. Chromium browsers allow users to force Dark Mode. This can be activated through the flag #enable-force-dark (e.g., on chrome://flags, edge://flags, brave://flags). There are multiple options available; “Enabled with selective Image Inversion” is one option that I’ve found to work well, but opinions may vary¹⁴. The Brave Browser even allows users to change the “Night Mode” as it’s called here via the Settings UI.
2. For iPhone and iPad users, there’s the Accessibility feature “Smart Invert.” This inverts colors only when they don’t already represent a dark mode. Images are usually exempt from inversion.¹⁵
3. For desktop users, there are numerous extensions available that can also force Dark Mode. These extensions offer more customization options than native browser/OS implementations and can be disabled for specific domains.
4. If the lack of Dark Mode is only occasionally problematic for desktop users and installing an extension isn’t worthwhile for this case, perhaps this small bookmarklet might help. It inverts all colors on the current page, while leaving images unchanged:

   javascript:(function(){var t=window.t^=1,i='invert('+t+')',b=document.body,p=b.parentNode;p?p.style.filter=i:b.style.filter=i;for(let e of document.images)e.parentNode.style.filter=i;})();

The biggest challenge in providing a good Dark Mode experience is with images, as described above. I am currently starting to develop a browser extension that allows users to invert, darken, or increase contrast for individual images. I will update this post once its implemented.

In Conclusion: The Responsibility and Reward of Offering Dark Mode

While there are now fortunately ways to force a Dark Mode, the responsibility still lies with website owners to offer a Dark Mode. Only then can it be ensured that the UX meets their own standards. When Dark Mode is well implemented, it can delight visitors, improve user signals, save energy, and contribute to health. All it takes is time, resources, and willingness.

P.S.: This blog post will be further edited once the Dark/Light Mode Switch has been implemented on this website. Until then, only the Dark Mode will be available here. 🙈