Designing Dark Mode for a Firefox Extension: Beyond Just Inverting Colors

Every new tab extension should support dark mode. But good dark mode isn't just filter: invert() or flipping colors — it requires intentional design decisions. Here's how I implemented dark mode in the Weather & Clock Dashboard extension.

The Core Principle: Surfaces, Not Just Colors

Good dark mode thinks in surfaces:

Background : 0% lightness (true black) vs 12-15% (near-black)

Surface 1 (cards, panels): slightly lighter than background

Surface 2 (hover states): slightly lighter than Surface 1

Text primary : ~87% opacity white

Text secondary : ~60% opacity white

Material Design's dark theme guide is worth reading: this elevation-based approach prevents dark mode from looking flat.

CSS Custom Properties for Theming

:root { /* Light mode (default) */ --bg-primary : #f0f2f5 ; --bg-surface : rgba ( 255 , 255 , 255 , 0.85 ); --bg-surface-hover : rgba ( 255 , 255 , 255 , 0.95 ); --text-primary : #1a1a2e ; --text-secondary :…