Blog

Custom Properties and Theming: var(), @property and Dark Mode with light-dark()

Custom properties live at run time inside the cascade and inheritance; for a dark theme it is enough to define the colour tokens with light-dark() and switch color-scheme. On Bookstore we measure the var() fallback, the invalid at computed-value time trap, typed and animatable variables with @property, an inline script that remembers the user's choice in localStorage without a flash of the wrong theme, and a category colour coming from the CMS.