darkest mode

The incomplete list of websites that force dark mode on you (if you are on a Mac)

  • Six Colors
  • MacSparky
  • 512 Pixels

And probably others I’ve forgotten or haven’t visited. By coincidence, these are all Apple-related sites (though not officially affiliated with Apple).

I’ve written about this before, but after seeing multiple sites doing this, I am compelled to once more highlight this as bad design.

It’s bad design because dark mode should be an OS-level choice, one that provides a dark frame around content that may or may not be dark itself.

A good example of doing this right is the writing program Ulysses. Here’s how it handles dark mode:

  • It lets you toggle dark mode on or off, regardless of the OS setting
  • It lets you choose to match the OS setting if you prefer
  • It lets you set just the outer UI elements to dark mode
  • It lets you choose to make the “inner” elements dark as well–in this case, it’s the actual area where you write, which can be dark or light

A bad example is the iOS Maps app, which simply matches the OS setting, turning the map backgrounds into a dark gray mud that is hard to read. On the Mac, you can sensibly toggle this on/off. On iOS, you can’t because Apple is a trillion-dollar company and can no longer function properly (see also: the mind-bogglingly inept Safari beta that rolled out this summer as part of iOS 15 and macOS Monterey).

The best part is the fix for the three websites mentioned above if you don’t want to be forced into dark mode and don’t want to have to toggle an OS-level display setting every time you visit: Check them on a Windows PC, because even if you have Windows 10 set to Dark mode, the sites will not display as such–it only happens if you’re using a Mac, where these sites take an Apple-like approach of “our way or get out.”

I should point out that all three sites are quite fine in and of themselves, content-wise. I even pay for Six Colors! You should read all of them if you are a Mac geek.

The solution as I’ve mentioned before, is to offer a user toggle. The 9to5Mac website (among others) does this and it works just fine. There’s no reason the others listed can’t do the same. That two of them actually went through recent redesigns and still omitted this is not insanely great.

Bad design: Websites that adopt the OS color scheme

Windows 10 and macOS both offer dark modes for their UIs, allowing the user to exchange light colors for various elements like window borders and backgrounds for darker ones, which is nice if you are viewing a monitor in a dimly-lit room (as an example). Some also just prefer the aesthetic. For myself, I prefer a lighter theme in Windows, but like the Mac’s dark mode implementation.

Depending on how an app is written, it may adopt aspects of the OS color scheme (such as for window elements) or just ignore them entirely. Take my browser of choice, Firefox. Out of the virtual box, it does not comply with the dark mode of either OS, but it does have an included dark theme you can switch to that brings most of the UI in line with whatever you have the OS set to. The current version (88) has some gaps–context menus don’t properly reflect the dark theme, but these appear to be addressed in version 89, which is giving all of Firefox’s UI a going-over. The Firefox dark theme leaves web pages entirely alone, as is to be expected. If you want all websites to be darkity-dark, you can use an extension like Dark Reader, which tries to intelligently make bright websites dark, and works fairly well.

But then you come to the Bad Design–websites that sniff out your OS preference and then set their site to match, thinking this is what the user would naturally want. This is a bad assumption and should never be forced onto the user. At minimum, it should be a choice offered as a toggle between light and dark. Forcing it on the user means that they may end up with an inconsistent browsing experience, or have to deal with a site that may not have been as carefully designed for a particular color scheme (ie. dark mode).

My go-to example for this is https://sixcolors.com, an otherwise excellent and nerdy site focusing on Mac/Apple stuff. If you view it on a Windows PC, it will always look bright. If you view it on a Mac, it will be bright or dark, based on the mode you have chosen for the OS. I find their idea of dark mode a bit too dark, resulting in text that is too high contrast, making it harder to read. My fix is to use something like Dark Reader to fiddle with the colors and make something that looks better (this doesn’t produce great results), toggle dark mode off (inconvenient for one site) or, ironically, view the site from a Windows PC. A simple toggle would fix this.