{"id":6826,"date":"2025-08-22T09:57:23","date_gmt":"2025-08-22T14:57:23","guid":{"rendered":"https:\/\/frontendmasters.com\/blog\/?p=6826"},"modified":"2025-08-22T09:57:24","modified_gmt":"2025-08-22T14:57:24","slug":"quick-dark-mode-toggles","status":"publish","type":"post","link":"https:\/\/frontendmasters.com\/blog\/quick-dark-mode-toggles\/","title":{"rendered":"Quick Dark Mode Toggles"},"content":{"rendered":"\n

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.<\/p>\n\n\n\n

Chrome<\/h2>\n\n\n\n

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<\/strong> tab then pressing ESC<\/strong>, then choosing Rendering<\/strong> in the three-dot menu). In there, you’ll see an option for Emulate CSS media feature prefers-color-scheme<\/strong> where you can select light or dark.<\/p>\n\n\n

\n
\"Screenshot<\/figure>\n<\/div>\n\n\n

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

\n
\"Screenshot<\/figure>\n<\/div>\n\n\n

Or, use the little paintbrush icon under the Elements<\/strong> tab then in the Styles<\/strong> section.<\/p>\n\n\n

\n
\"Screenshot<\/figure>\n<\/div>\n\n\n

The Non-Standard Chrome Thing<\/h3>\n\n\n\n

See in the first screenshot there is a setting called Enable automatic dark mode<\/strong> 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<\/em> 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.<\/p>\n\n\n

\n
\"Screenshot
This blog post in the WordPress editor with forced<\/em> dark mode. This page doesn’t support a dark mode normally.<\/figcaption><\/figure>\n<\/div>\n\n\n

The Enabled automatic dark mode<\/strong> 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.<\/p>\n\n\n\n

Firefox<\/h2>\n\n\n\n

Firefox has some mutually exclusive buttons in DevTools under the Inspector<\/strong> 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.<\/p>\n\n\n\n

\"Screenshot<\/figure>\n\n\n\n

Safari<\/h2>\n\n\n\n

In Safari DevTools under the Elements<\/strong> panel there is an icon to control the color modes as well as some other accessibility media preference simulators. <\/p>\n\n\n

\n
\"A<\/figure>\n<\/div>\n\n\n

OS<\/h2>\n\n\n\n

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.<\/p>\n\n\n

\n
\"A
The macOS version of setting Dark Mode.<\/figcaption><\/figure>\n<\/div>\n\n\n

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). <\/p>\n\n\n\n

So I was happy to find Nightfall<\/a>, a little macOS menu bar utility for swapping out color modes. <\/p>\n\n\n\n\t\t

\n\t\t\t