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, 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.

Leave a Comment