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 : #1 a1a2e ; /* slight blue tint */ --bg : #121212 ; /* Material Design dark */

Enter fullscreen mode

Exit fullscreen mode

3.…