A toolbar button for Zen Browser & Firefox that toggles website dark/light mode with a single click using the built-in color-scheme preference in the browser settings — draggable anywhere in the toolbar like any native button.
How it works: It detects your system color scheme and gives you a two-state toggle between automatic and the opposite. The default light mode icon is ✨ sparkle — a ☀️ sun variant is also available.
- System is Light → button shows ✨ sparkle → click forces Dark → button shows 🌙 moon → click resets to Auto (Light)
- System is Dark → button shows 🌙 moon → click forces Light → button shows ✨ sparkle → click resets to Auto (Dark)
The icon always reflects the current website color scheme, and clicking always switches to the opposite then back to auto.
The button integrates natively into the Zen/Firefox toolbar — it respects hover states, sizing, and icon color automatically.
| State | Icon | Tooltip |
|---|---|---|
| Websites are dark (auto or forced) | 🌙 Moon | "Switch to Light" |
| Websites are light (auto or forced) | ✨ Sparkle (or ☀️ Sun) | "Switch to Dark" |
The button can be placed anywhere: nav bar, sidebar, overflow menu — anywhere Firefox lets you drag toolbar items via right-click → Customize Toolbar.
Right-click the toggle button to assign a default appearance to the current workspace in the context menu:
- Workspace: Auto — follows your system theme (default)
- Workspace: Dark — forces dark mode whenever you're in this workspace
- Workspace: Light — forces light mode whenever you're in this workspace
Left-clicking still works as a manual override anytime — it temporarily overrides the workspace default for the current session and resets on next browser start.
Sine is a mod manager for Zen/Firefox that installs mods in one click.
If you already have Sine installed, find this mod in Sine store and install it directly — no manual file copying needed.
Sine also lets you customize the icons from its settings panel. You can:
- Choose an icon set — pick between Original (the custom icons made for this mod) or Zen (Zen Browser's own built-in icons)
- Choose your light mode icon — pick between ✨ Sparkle or ☀️ Sun
- Override individual icons — optionally mix and match, e.g. Zen's moon with the Original sparkle, or any other combination
All changes apply instantly without restarting.
New to Sine? See the Sine installation guide.
fx-autoconfig is a small open-source loader by @MrOtherGuy that lets Zen/Firefox run your own JavaScript at startup.
- Go to https://github.com/MrOtherGuy/fx-autoconfig
- Click Code → Download ZIP and extract it somewhere
Copy files into Zen's install folder (the folder where zen.exe / zen lives):
From the extracted ZIP, open the program/ folder and copy both into your Zen install directory (e.g. C:\Program Files\Zen Browser\ on Windows):
config.jsdefaults/folder
⚠️ Windows may prompt for admin permission — click Yes.
⚠️ If you get a prompt that files already exist, click Skip — you don't have to replace them.
Copy files into your profile's chrome folder:
Find your profile folder: go to about:support → Profile Folder → Open Folder. Inside it, open or create the chrome/ folder.
From the extracted ZIP, open profile/chrome/ and copy these three folders into your chrome/ folder:
utils/JS/resources/
Your chrome/ folder should now look like:
chrome/
├── userChrome.css ← yours (already exists or create it)
├── utils/ ← new (fx-autoconfig engine)
├── JS/ ← new (where scripts go)
└── resources/ ← new
In about:config, find and set to true:
svg.context-properties.content.enabled
This makes the button icon color automatically match your toolbar icons.
zen-colorscheme-toggle-sparkle.uc.jsorzen-colorscheme-toggle-sun.uc.js→ choose only one and copy it intochrome/JS/userChrome.css→ if you already have auserChrome.css, paste the contents at the end of your existing file. If you don't have one yet, copy it directly intochrome/.
- Open Zen Browser
- Go to
about:support - Click "Clear startup cache…" (top-right corner)
- Confirm — Zen restarts automatically
The toggle button will appear in your toolbar. To move it, right-click the toolbar → Customize Toolbar and drag it wherever you want.
- Delete
zen-colorscheme-toggle-sparkle.uc.jsorzen-colorscheme-toggle-sun.uc.jsfromchrome/JS/ - Remove the toggle CSS from your
userChrome.css - Clear startup cache once more
To fully remove fx-autoconfig: delete config.js and defaults/ from Zen's install directory (if you didn't get a prompt that files already exist), and delete utils/, JS/, and resources/ from your chrome/ folder.
Button not appearing — Make sure the .uc.js is inside chrome/JS/, not directly in chrome/. Verify fx-autoconfig is installed correctly and that you cleared the startup cache.
Icon invisible or wrong color — Set svg.context-properties.content.enabled to true in about:config.
CSS not applying — Check that zen.themes.disable-all is not true in about:config.
The fx-autoconfig version registers a toolbar widget using UC_API.Utils.createWidget(), and the Sine version uses CustomizableUI.createWidget() directly — both allow the button to be dragged to any toolbar position and appear in the Customize menu.
The icon is set as a data URI SVG on the button's existing <image class="toolbarbutton-icon"> element, using context-fill so it inherits the toolbar icon color automatically. No extra DOM elements are added — hover, sizing, and alignment are handled natively by the toolbarbutton.
Workspace defaults are stored as a JSON map in a browser preference, keyed by workspace UUID. A TabSelect listener detects workspace changes and applies the saved default automatically. Left-click overrides are tracked in-memory per workspace for the session and take priority over the saved default until the browser restarts.
On each click, it reads window.matchMedia("(prefers-color-scheme: dark)") to detect your system preference, then writes to layout.css.prefers-color-scheme.content-override:
| Value | Effect |
|---|---|
3 |
Automatic (follows system/browser theme) |
0 |
Force Dark on all websites |
1 |
Force Light on all websites |
This is the same preference Zen's Settings → General → Website Appearance controls.
