A practical walkthrough of building a fully dynamic, theme-aware colour scheme system using only modern CSS. Starting from a single base colour defined in OKLCH, the system uses CSS custom properties as live tokens, calc() to derive colour-theory relationships (complementary, triadic, analogous) via hue angle arithmetic, color-mix() for tints and shades without Sass, light-dark() for automatic dark mode support, and contrast-color() for accessible text colours. Switching colour schemes requires only a data-scheme attribute change on the root element, with JavaScript doing nothing more than toggling that attribute.
Table of contents
CSS Custom Properties — The FoundationThe OKLCH Colour Space — Perceptually Uniform Colourcalc() — Live Colour Mathscolor-mix() — Tints and Shades Without a Preprocessorlight-dark() — Theme-Aware Colours in One Declarationcontrast-color() — Automatic Accessible TextThe Complete SystemThe Bigger PictureSee It In Action10.2K Impressions