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 ?…