Dev-Toggle prefers-color-scheme

Toggle prefers-color-scheme (dark/light) on the current tab with one click. Uses the Debugger API to emulate CSS @media rules.

Toggle prefers-color-scheme on the current tab with one click, so you can test your CSS @media (prefers-color-scheme) rules without opening DevTools. It does NOT try to do funky color rewrites to pages that doesn't support dark mode. It just flips the dark mode flag so you can test whether your site handles dark mode setting well, or not. This means that the site in question MUST SUPPORT DARK MODE, or it will appear to "not work". You can test if a site supports dark mode by opening Devtools, find Element, Paintbrush and select light/dark there. If nothing happens, the site doesn't actually support dark mode, or it is using a nonstandard control to switch colors. HOW IT WORKS Click the toolbar icon to flip the tab between dark and light. Click again to restore the original setting. Only the tab you click is affected, and your operating system setting is never changed. ABOUT THE DEBUGGER BANNER This extension uses Chrome's Debugger API (Emulation.setEmulatedMedia), the same mechanism as the "Emulate CSS media feature prefers-color-scheme" option in DevTools. Chrome shows a banner saying "Toggle prefers-color-scheme started debugging this browser" while emulation is active. This is expected and is required by Chrome for any extension that uses the Debugger API. Close the banner/Cancel debugging to go back to whatever your current light/dark mode setting is. PRIVACY No data is collected, stored or sent anywhere. The extension has no network access and no remote code. PERMISSIONS - debugger: to emulate prefers-color-scheme on the tab you click. Open source, copyleft.