How We Added Dark Mode (and Light Mode) to SendRec

You're recording a screen share at 2 PM in a sunlit room. The dark navy dashboard looks fine on your monitor. But your colleague opens it on a bright laptop screen in a coffee shop and squints through every page. Dark mode isn't just an aesthetic preference — it's a usability feature. And the lack of a light alternative was one of the most common requests we heard after launching SendRec . We added three theme modes: Dark, Light, and System. System follows your OS preference and updates in real time when you toggle it. The whole implementation is 12 files, zero new dependencies, and a 93-line React hook. The starting point SendRec's dashboard was already built on CSS custom properties. Eight variables defined in :root controlled every color: :root { --color-bg : #0f1923 ; --color-surface : #1a2b3c ; --color-border : #2a3f54 ; --color-text : #e2e8f0 ; --color-text-secondary : #94a3b8 ; --color-accent : #00b67a ; --color-accent-hover : #00a06b ; --color-error : #f87171 ; } Every componen