Dark Mode in Firefox Extensions: Respecting System Preferences

Firefox users who prefer dark mode shouldn't have to manually toggle it in every extension. Here's how to automatically respect the system preference.

The CSS Media Query

/* Default: light mode */ :root { --bg : #ffffff ; --text : #1a1a1a ; --card-bg : #f5f5f5 ; --border : #e0e0e0 ; }

/* Auto dark mode from system */ @media ( prefers-color-scheme : dark ) { :root { --bg : #1a1a2e ; --text : #e0e0e0 ; --card-bg : #16213e ; --border : #2d3561 ; } }

Enter fullscreen mode

Exit fullscreen mode

Using CSS custom properties makes this effortless — one block of overrides handles the whole page.

JavaScript Detection

For dynamic behavior based on the current theme:

const isDark = window . matchMedia ( ' (prefers-color-scheme: dark) ' ). matches ;

// Listen for changes (user switches system theme) window . matchMedia ( ' (prefers-color-scheme: dark) ' ). addEventListener ( ' change ' , e => { const newScheme = e . matches ?…