Unpacking the field notes…
Unpacking the field notes…
night shift · 03
EXP-03 · iHAVECPU
โหมดมืดทั้งเว็บ
Dark mode across the whole store, without changing a single colour of the existing light theme.
01
Designed the token system and rolled it out across the site.
Customers wanted a dark mode, but the store had years of styling in several systems and the light theme could not change at all.
02
Stack: next-themes, CSS variables, View Transitions API
Moved colours into CSS-variable design tokens, so light and dark themes come from the same names.
Every token kept its original light value, so the existing theme stayed pixel-identical.
next-themes for the switch and the View Transitions API for a smooth change between themes.
Third-party widgets like react-select were themed too, so nothing stays glaring white.
03
A complete dark mode shipped without a single regression in the theme customers already knew.
Next expedition →
Storefront UX