Quick Dark Mode Toggles
Briefly

Arc browser included a browser-level toggle for switching between light and dark modes. Chrome can emulate color scheme via DevTools: the Rendering tab provides Emulate CSS media feature prefers-color-scheme to choose light or dark. The Command Palette (Command-Shift-P) with an 'emulate' command and the paintbrush icon under Elements → Styles offer quicker toggles. Chrome also includes an Enable automatic dark mode that force-applies dark styling to pages, which is Chrome-specific and generally unnecessary for testing. Firefox DevTools Inspector has sun and moon icons to simulate prefers-color-scheme or default to the system. Safari's Elements panel includes an icon to control color modes and accessibility media preference simulators.
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.
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.
Read at Frontendmasters
[
|
]