A point of sale is used for eight hours straight, often in a bright shop and sometimes in a dim one. So Tilly POS needed a calm interface, a real dark mode, and — because I'm one developer — a way to get both without writing every style twice.

The answer is boring and it works: design tokens as CSS custom properties, and components that only ever use tokens.

Tokens: names for decisions, not colours

:root , [ data-theme = "light" ] { --bg : #f8fafc ; --surface : #ffffff ; --surface-muted : #f1f5f9 ; --border : #e2e8f0 ; --ink : #0f172a ; --ink-muted : #475569 ; --primary : #4f46e5 ; --primary-hover : #4338ca ; }

[ data-theme = "dark" ] { --bg : #020617 ; --surface : #0f172a ; --surface-muted : #1e293b ; --border : #1e293b ; --ink : #f1f5f9 ; --ink-muted : #94a3b8 ; --primary : #818cf8 ; --primary-hover : #a5b4fc ; }

Enter fullscreen mode

Exit fullscreen mode

The names describe what the colour is for — background, surface, ink, primary — never what it looks like .…