DEV Community

Weather Clock Dash
Weather Clock Dash

Posted on

5 CSS Tricks for Firefox Extension Dark Mode

#css #firefox #webdev #browserextensions

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;
}
Enter fullscreen mode Exit fullscreen mode

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 */
Enter fullscreen mode Exit fullscreen mode

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);
}
Enter fullscreen mode Exit fullscreen mode

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; }
Enter fullscreen mode Exit fullscreen mode

5. Fix Icons for Dark Mode 

[data-theme="dark"] .icon-png {
  filter: brightness(0) invert(1);
}
Enter fullscreen mode Exit fullscreen mode

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'));
});
Enter fullscreen mode Exit fullscreen mode

All of these are live in the GitHub source. Happy building!

Top comments (0)