Devtheme Tester Native Li

The high-precision tool for web developers to test Dark and Light mode themes instantly, regardless of site security policies.

Are you tired of digging through Chrome DevTools' deep "Rendering" menu just to toggle prefers-color-scheme? Do other dark mode extensions fail on your local development sites because of strict Content Security Policies (CSP)?

DevTheme Tester is a minimalist, open-source utility designed specifically for the modern web development workflow. It provides a one-click solution to force-test your CSS media queries using the high-level Chrome DevTools Protocol (CDP).

Why DevTheme Tester?
Most "Dark Mode" extensions work by injecting custom CSS or running scripts on the page. While fine for general users, these methods are unreliable for developers because:

They don't trigger actual CSS @media (prefers-color-scheme) queries.

They are often blocked by Content Security Policy (CSP) headers on secure sites.

They "pollute" the DOM, making it hard to debug your actual code.

DevTheme Tester operates at the browser level using the Debugger API. It tells the rendering engine to act as if the system theme has changed, ensuring 100% accuracy for your native styles.

Key Features:
Instant Toggle: Switch between "System Default," "Force Light," and "Force Dark" in one click.

Full CSP Bypass: Works on GitHub, banking sites, and local environments where script injection is blocked.

Zero Persistence: No settings are saved to your browser storage. It resets to "System" when you close the tab or toggle back, preventing "theme ghosting" during regular browsing.

Privacy-First: No tracking, no data collection, and no "home-calling."

Open Source Transparency: We believe developer tools should be "Glass Boxes." The source code is fully available for audit on GitHub.

How to Use:
Open the website or local app you are developing.

Click the DevTheme Tester icon in your toolbar.

Select your target theme.

Observe your site's native response to color-scheme media queries.

Note on the "Debugging" Bar:
Because this extension uses the high-level Debugger API to bypass site security, Chrome will display a notification bar ("DevTheme Tester started debugging this browser"). This is a native security feature. Simply leave it open while testing; closing the bar will detach the debugger and reset the theme.

Technical Specs:
Engine: Manifest V3

API: chrome.debugger (Emulation.setEmulatedMedia)

Permissions: debugger, activeTab

Source Code: https://github.com/hochenri/native-theme-switcher-extension

Stop fighting with your OS settings. Start testing your themes accurately.