Free JS toggle to create a dark mode for your website

Free JS toggle to create a dark mode for your website

Did you know that a dark mode could save 63% power usage on mobile devices? More important from UX perspective is that you can also introduce a dark mode to make your site more pleasant for all kinds of users.

This article is part of the Dutch week of digital Accessibility, which I am participating in.

I already talked about accessible data saving websites before. But what about an additional feature that is listening to users' contrast preferences?

Reasons for a dark mode

Let's shortly dive into reasons to introduce dark mode, their advantages and caveats.

Saving electricity

I already named the advantage of saving electricity. This is only the case on OLED or AMOLED screens though.

it is stated that a dark theme can reduce battery usage up to 63% on AMOLED displays even with max brightness

Search Engine Watch

UX and accessibility advantages

At least as important are advantages from user experience and accessibility perspective. Let's dive into them:

  • Helping people with cataract and related disorders;
  • Reducing flicker problems;
  • Dark modes are less prone to triggering photophobia;
  • Defective pixels are causing less notable or disturbing;
  • Dark mode is ideal in dark rooms.

More on advantages and myths are written down before by Sheri, in her article about dark mode and are they accessible?

Detecting user contrast preferences

Data-saving preferences can be detected server side or via JS. And soon also via CSS media queries by the way. Contrast preferences can already be detected via CSS media queries. The following are possible when it comes to contrast.

High color contrast

Detecting high color contrast preferences can be done via prefers-contrast media query. For example, you could give body text a darker color, or even improved CSS outlines.

If you want to know if colors have sufficient contrast, you could use color contrast checking tools such as accessible-colors for accessibility level AA and even AAA.

Light or dark mode preferences

Detecting light or dark mode preferences can be done via prefers-color-scheme media query. When writing CSS, be sure to never use pure black color for texts or backgrounds by the way.

JavaScript dark mode demo

Let's dive in a demo right away. Next to this very contrast-toggler within this website, you can view a vanilla JS dark mode demo on this page. Other characteristics:

  • auto detecting user preferences;
  • adjusting on site, saved between page navigations (using sessionStorage);
  • revocable on-site;
  • constructed with simple checkboxes.

View darkmode demo

Obviously, the lay-out of the checkboxes is completely up to you. It can be simple checkboxes such as at my own site (www.erwinhofman.nl) or a fancy styled toggler such as at www.cuebic.nl. Both are using the same HTML inputs and same JS, just different CSS. So, very flexible to set up and tweak. No libraries needed.

Darkmode by design or default

You could also work the other way around if you have a darkmode by design. This means looking for a light-mode preferences instead of dark mode preferences, via @media (prefers-color-scheme: light).

Be sure to not just turn to dark mode by default, as users might still perform better on light mode websites, as the pupil contracts more.

there are fewer spherical aberrations, greater depth of field, and overall better ability to focus on details without tiring the eyes

Nielsen Norman Group

Disadvantage of JS dark mode toggler

There is one caveat: without JS, there is no darkmode support in this setup. I didn't solve this yet, as you would run into CSS inheritance issues and one have to create double CSS declarations (once using classes when JS is supported, and once when no classes are attached to the body and CSS media queries should be used). Even when using a build tool, this would unfortunately create double CSS output.

You could choose to implement a CSS-only solution via the same media queries. However, users wouldn't be able to disable or enable it again for your website alone. This is something that I wanted to achieve. Another solution could be to show some text when @media (prefers-color-scheme: dark) is detected and JavaScript was disabled, by putting an alert in a noscript element.

Dark mode conclusion

Sheri's conclusion is that there are advantages, but also caveats and thus you could chose to support a light and dark mode for your website, and let users pick their preference.

Nielsen Norman Group is drawing the same conclusion, for three reasons:

  1. there may be long-term effects associated with light mode;
  2. some people with visual impairments will do better with dark mode;
  3. some users simply like dark mode better.

Moreover, Sheri as well as Nielsen Norman Group recommend to detect and save their preferences throughout their session. This is exactly what this very article is describing and the demo is demonstrating.

Dark mode improvements

This code snippets could undoubtedly be shortened or improved. I just subtracted it from our very own codebase and rewrote it to vanilla JS. This way, everyone can start introducing a dark mode for their website, without any third party library dependancies.

Any recommendations or even ideas? Let me know!