5 CSS Tricks for Firefox Extension Dark Mode
Building a browser extension that looks great in both light and dark mode is harder than it sounds. Here are 5 techniques from the Weather & Clock Dashboard Firefox extension.
1. CSS Custom Properties as Your Single Source of Truth
:root {
--bg-primary: #ffffff;
--text-primary: #1a1a1a;
--accent: #4a90e2;
}
[data-theme="dark"] {
--bg-primary: #1a1a2e;
--text-primary: #e8e8e8;
--accent: #64b5f6;
}
Switching themes is a single attribute change on <html>. Use var(--bg-primary) everywhere.
2. Don't Use Pure Black
#000000 feels harsh. Real dark UIs use:
--bg: #1a1a2e; /* slight blue tint */
--bg: #121212; /* Material Design dark */
3. Adjust Box Shadows Per Theme
:root {
--shadow: 0 2px 12px rgba(0,0,0,0.08);
}
[data-theme="dark"] {
--shadow: 0 2px 12px rgba(0,0,0,0.4);
--border: 1px solid rgba(255,255,255,0.08);
}
In dark mode, borders often replace shadows.
4. prefers-color-scheme + User Override
@media (prefers-color-scheme: dark) {
:root { --bg-primary: #1a1a2e; }
}
/* Explicit user choice overrides system preference */
[data-theme="light"] { --bg-primary: #ffffff; }
[data-theme="dark"] { --bg-primary: #1a1a2e; }
5. Fix Icons for Dark Mode
[data-theme="dark"] .icon-png {
filter: brightness(0) invert(1);
}
SVG icons with currentColor work better — they inherit from the parent's color automatically.
The Toggle
function toggleTheme() {
const next = document.documentElement.getAttribute('data-theme') === 'dark' ? 'light' : 'dark';
document.documentElement.setAttribute('data-theme', next);
browser.storage.local.set({ theme: next });
}
browser.storage.local.get('theme').then(({ theme }) => {
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
document.documentElement.setAttribute('data-theme', theme || (prefersDark ? 'dark' : 'light'));
});
All of these are live in the GitHub source. Happy building!
