tobyx.com split of light and dark mode

Before the introduction of Dark Mode support in macOS Mojave in 2018, many websites had offered manual Dark Mode support with a JavaScript toggle. In principle, this method implemented a “Dark Mode Switch” somewhere in the UI. On click, the site would load a Dark Mode CSS alternative to switch colors using JavaScript. Persistence was offered through setting a cookie to remember the setting.

This method used to be the most elegant way to offer users a dark theme since you couldn’t store your preference anywhere globally. The preference needed to be saved on a per-site basis, and while setting a cookie for this has no real privacy implications, EU law disagrees with that1 and makes the solution in the very least cumbersome to deal with.

macOS added support for prefers-color-scheme, because now there was a reason to. You could set your preference for a dark theme across the operating system and when switching, all apps with support as well as Safari and all currently loaded websites would switch accordingly.

The code for this is deceptively simple:

@media (prefers-color-scheme: dark) {
  /* add your dark theme changes here */
}

Things to Consider

It’s important to check your light and dark themes thoroughly. I personally use a light theme when I’m in well-lit rooms during the day and a dark theme later in the day when my surroundings are darker.

If you find images on your site to be too bright in dark mode, you can swap them out in your dark theme. If your background color is neutral (all RGB channels with the same value), you can also try reducing the opacity of the respective img elements a bit. With a neutral background color, you’ll avoid changing the overall chroma of the images.

In the end, all issues with the JavaScript and cookie-preference method aside, you could still offer a manual switch for users. You may consider only showing the UI element for this on browsers not supporting prefers-color-scheme.

Apple Platforms

macOS, iOS, and iPadOS all support Dark Mode system-wide and Safari supports CSS @media query prefers-color-scheme.

macOS added Dark Mode support with macOS Mojave (10.14) in 2018. iOS added Dark Mode support with iOS 13.0 in 2019. iPadOS supports it just the same since the name change with iPadOS 13.1.

Microsoft Windows and Edge

Microsoft Edge supports Dark Mode. If you set your Windows to Dark Mode, Microsoft Edge will by default use that preference to also interpet prefers-color-scheme appropriately.

In addition to that, users can enable Dark Mode only for Edge directly in the browser.

Android and Google Chrome

Android supports a system-wide Dark Theme since Android 10 in 2019 and Google’s mobile Chrome browser will adhere to that preference.

Google Chrome on desktop platforms will adhere to system-wide settings of macOS and Windows to also offer Dark Mode @media query support according to user preference.

  1. The GDPR mandates that cookies may only be stored on a user’s computer after specific consent is given, except for strictly mandatory cookies. While most law experts agree on e.g. cookies for load balancer operation or shopping carts being required, thus requiring no prior consent, the discussion is a bit more difficult on topics like setting a theme preference. Since any data stored to differentiate a user’s preference could potentially be labelled “personally identifiable information”, we’re in for a wild ride. The biggest drawback of these privacy laws is big corporations continuing with what they’re doing, gaining a competetive advantage over those who can’t simply weather lawsuits coming their way. ↩︎