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