Change one value, update everywhere
Your brand blue appears in 30 places. Want to change it? With custom properties (CSS variables), you change it once. They also make dark mode a few lines of CSS — Sikau itself works this way.
Variables and themes
- Define with --name: value;, usually on :root (the html element) so every element inherits it.
- Use with var(--name), optionally with a fallback: var(--brand, navy).
- Redefine variables inside a media query or a class (.dark) to switch themes.
- calc() does maths with them: calc(var(--space) * 2).