Quick Dark Mode Toggles – Frontend Masters Blog

I’ve moved off of Arc browser, but it had a browser-level feature of being able to toggle beween light and dark mode that I liked. I still have some muscle memory for that, so in the time I’m spending back on other Chrome-based browsers, I was looking for another browser-level toggle for it.

Chrome

Chrome can do it, but it’s a little buried in DevTools. The main setting is under the “Rendering” tab (which I always remember how to get to be going under the main Console tab then pressing ESC, then choosing Rendering in the three-dot menu). In there, you’ll see an option for Emulate CSS media feature prefers-color-scheme where you can select light or dark.

Alternatively, it’s a bit quicker to use the Command Palette (Command-Shift-P) and starting typing emulate and you’ll see a quick option to toggle to the value you want.

Or, use the little paintbrush icon under the Elements tab then in the Styles section.

The Non-Standard Chrome Thing

See in the first screenshot there is a setting called Enable automatic dark mode as well. I have made this mistake recently of thinking this was how you flip on dark mode testing, and it was pointed out to me, hence this blog post. That feature is some Chrome-specific thing which takes a page which may have been designed as light-mode-first (or only) and forces a dark mode on it whether it was designed to or not.

The Enabled automatic dark mode feature isn’t particularly relevant. I think it’s some Chrome team idea that hasn’t gone anywhere yet. It’s not something you’d really need to test with/for in my opinion.

Firefox

Firefox has some mutually exclusive buttons in DevTools under the Inspector panel. The little sun icon is simulating preferring light mode and the moon(ish) icon is preferring light mode. Or they can both be off defaulting to the system.

Safari

In Safari DevTools under the Elements panel there is an icon to control the color modes as well as some other accessibility media preference simulators.

OS

Other than the non-standard Chrome thing, all this is doing is pretending as if the user has set one of the modes specifically at their OS level.

Personally, I find it a little cumbersome to need DevTools or go into System Settings to test dark/light mode on sites. It was nice in Arc to have a simple command to do it, but as I write, color modes aren’t really a browser-level settings for the most part (let alone site-specific settings).

So I was happy to find Nightfall, a little macOS menu bar utility for swapping out color modes.

There is something extra nice about doing the toggling at the system level as it feels like the “real” way to do it.