Dark Mode is the new, well, black. Sites, apps, and operating systems have been rushing to implement dark mode, and OnMSFT.com brought you our own version a few months ago, after having an earlier version go dormant for a time.
OnMSFT, like many websites large and small, runs on WordPress, and it’s interesting that there really aren’t any plugins or themes that make implementing dark mode easy. Our version has made use of cookies, setting a cookie on your browser to remember your preferences.
Turns out that’s not ideal. For one thing, there’s the whole thing with cookies and privacy. The only thing our cookie stored was your dark mode preferences, but still, it’s better for us not to store anything at all on your browser.
Another problem with cookies has to do with WordPress and caching. We use a plugin called “W3 Total Cache,” but the problem exists with other caching plugins. Basically, cached pages may or may not be cached in dark mode, making for a less than ideal experience. So in order to optimize the dark mode experience, we’ve been running with page caching off (we still made use of caching, just not page caching).
Enter prefers-color-scheme. Thanks to a fairly new CSS Media Query, WordPress now able to detect (without a cookie) your system preferences and/or browser preferences and set dark mode accordingly. This new feature is available in Chrome (version 76 and up), Edge Chromium, Firefox, and Safari.
To set your system-wide dark mode settings
On Windows 10, go to Settings>Personalization>Colors>Choose your color>Custom/Light/Dark.
In MacOS, it’s System Preferences>General>Appearance
On iOS 13, it’s Settings>Display & Brightness>Light/Dark/Automatic
On Android (9.0 and up) it’s Settings>Display>Advanced>Light/Dark/Automatic
In short, if your system is set to use dark mode (Windows, Mac, Android, iOS), the media query will detect that and change OnMSFT to match.
Browser support
In addition, in Edge Chromium, you can set the browser to override the system settings (Settings >Appearance>Theme>Light/Dark/System Default). With that set, even if your OS is set to Dark, you can set your browsing experience to light mode, and OnMSFT (and any other sites that use prefers-color-scheme) will respect that.
Firefox has similar settings, in Options>General>Language and Appearance>Colors. From there, you can set your colors, or “Use system colors”. Chrome (76 and up) respects system Dark Mode settings, but doesn’t allow you to override them for just the browser.
If you’re interested, you can learn a lot more about dark mode and prefers-color-scheme in an excellent post by Google’s Thomas Steiner. Microsoft has been doing a lot of work on dark mode, too. You can read what the Outlook mobile team has been doing in this post on Medium.
What this means for you is OnMSFT will follow your system and browser preferences without having to explicitly set a light or dark mode and remember that setting. We’ve removed the code that read the cookie we stored, you can remove it if you’d like, and still get OnMSFT.com in dark mode. What it means for us is we’ll be able to cache pages again, making OnMSFT a bit faster with a bit less stress on our server.
There may be a small number of you who were able to set a cookie but don’t have access to a browser that supports prefers-color-scheme, and we apologize for that. However cleaning up our use of cookies, and enabling page caching wins out over supporting every old browser.
Finally, we made a few changes to our Dark Mode CSS itself, cleaning up some legacy code in the process. Hope you enjoy OnMSFT.com Dark Mode v2, let us know what you think in the comments
