A per-site dark mode toolbar toggle with a built-in custom color picker. One click to flip any webpage into dark mode — your way, your colors, saved per site.
Features
Dark Reader Button is intentionally minimal. Every feature earns its place.
Your dark mode preference is saved individually per hostname. Switch to dark on one site and it stays dark — even after you close and reopen the browser.
One click on the toolbar button applies your chosen mode immediately. No page reload required — the change is live within milliseconds.
Full control over background, text, link, and link-child colors via native hex color pickers. Your palette applies across all sites and persists across sessions.
Standard dark mode covers most pages. Dark+ (Nuclear) goes deeper — using adopted stylesheets and a MutationObserver to override aggressive inline styles and dynamic content.
Videos, images, canvases, and iframes are intentionally preserved with transparent backgrounds so your media always looks correct — dark mode never ruins video playback.
No analytics, no telemetry, no remote calls. All data — your preferences and color settings — are stored locally in your browser using chrome.storage.local only.
How It Works
Dark Reader Button injects a lightweight content script that applies CSS overrides to the current page. The mode you pick is stored per hostname and restored automatically on your next visit.
Click the toolbar button
The popup opens showing your current mode and color palette for that site.
Choose a mode
Select Dark, Dark+, or Light. The content script receives the message and applies CSS instantly — no reload needed.
Optionally customize colors
Adjust background, text, and link colors using the built-in hex pickers. Changes push live to the active tab as you type.
It remembers everything
Your mode and colors are saved per hostname. Come back to any site and your settings are already applied on page load.
🌙 Dark
Applies CSS overrides to html, body, and anchor elements. Uses a <style> tag injection with a MutationObserver to handle dynamic inline styles. Best for most static and lightly dynamic pages.
☀️ Dark+
Upgrades to an adoptedStyleSheet for higher CSS specificity and deploys a full-DOM MutationObserver. Overrides aggressive inline style attributes on every element. Ideal for SPAs and sites that fight back against CSS overrides.
💡 Light
Removes all injected styles and disconnects all observers. The page returns to its native appearance. Use this to turn off dark mode on sites that already look great in light.
Permissions Explained
Dark Reader Button requests three browser permissions. Here's exactly why each one is required.
tabs
Used to identify the active tab's URL so the extension can look up the saved mode for that specific hostname. Never used to read tab content or browsing history.
storage
Saves your dark mode preference and custom color palette per hostname using chrome.storage.local. All data stays on your device — nothing is ever sent to a server.
scripting
Allows the background service worker to send messages to the content script already running in the active tab. Required to apply mode changes without a full page reload.
host_permissions: <all_urls>
The content script needs access to every page so it can apply dark mode on any site you visit. This is standard for any extension that modifies page appearance globally.
FAQ
Dark mode injects a stylesheet and watches for DOM mutations using a standard MutationObserver. It handles the vast majority of websites well. Dark+ (Nuclear) adds an adopted stylesheet with higher specificity and monitors inline style attribute changes on every element — useful for single-page apps or sites that set colors via JavaScript after load.
Yes. The extension explicitly preserves video, canvas, image, iframe, SVG, and picture elements with transparent backgrounds so media playback is unaffected. YouTube's player UI elements are also whitelisted to prevent color interference.
Currently, settings are stored locally using chrome.storage.local and are device-specific. Cross-device sync via chrome.storage.sync is planned for a future update.
No. There are zero analytics, zero telemetry, and no remote servers involved. The extension has no network requests aside from loading the welcome page on first install. All storage is local to your browser.
Yes — click the "Reset Colors" button at the bottom of the popup. This restores the defaults: background #161616, text #e5e5e5, links #6996d0, and link children #e5e5e5.
No. Dark Reader Button is an independent extension by burnSYMBOL. It is not affiliated with, endorsed by, or based on the Dark Reader project. It uses its own lightweight CSS injection engine built from scratch.
Version History
Nuclear mode upgrade & YouTube compatibility
Added Dark+ (Nuclear) mode using adopted stylesheets for maximum CSS specificity
Full MutationObserver watching inline style attributes to handle JS-driven color changes
YouTube and video player elements explicitly whitelisted to prevent media interference
Welcome page now opens on re-enable in addition to fresh install
Inline style detection logic: auto-upgrades to Nuclear when dense inline styling is detected
Custom color picker
Introduced hex color pickers for background, text, link, and link-child colors
Colors stored globally and applied live as you edit
Reset button to restore default color palette
Initial release
Per-site dark/light mode toggle stored in chrome.storage.local
Manifest V3 service worker architecture
Content script injected at document_start for instant application on page load
Free & Open
Install Dark Reader Button in seconds. No account, no payment, no tracking. Just dark mode — your way.