A Practical Guide to CSS Variables and @property in 2026

Blank project, blank stylesheet. The first file I create is not a component — it is the token sheet, and everything else inherits from it. This is the working order I have settled on after theming enough projects to regret the shortcuts.

Raw tokens, then meaning

Two layers of custom properties: the raw scale nobody references directly, and the semantic names every component actually uses. Rename your brand once and the aliases carry it everywhere:

:root {
  --blue-700: oklch(45% 0.17 252);
  --space-3: 1rem;

  --accent: var(--blue-700);
  --card-bg: white;
  --card-ink: #1a1a1a;
}

The value of the second layer shows up at rebrand time, when --accent repoints and not one component changes.

Override at the subtree, not the component

Custom properties inherit, so a scoped redefinition can restyle a whole branch without touching the components themselves:

.button { background: var(--button-bg, var(--accent)); }

.panel-warning {
  --button-bg: #c0392b;
}

Every .button inside .panel-warning goes red; no extra selector, no specificity argument. This pattern is the backbone of component theming.

Dark mode that starts with the OS

Respect prefers-color-scheme first, and only then take instruction from the user's explicit choice. Where the palette is simple, light-dark() collapses both themes into one line:

:root { color-scheme: light dark; }

body {
  background: light-dark(white, #14141a);
  color: light-dark(#1a1a1a, #f5f5f0);
}

@property when values must animate

Untyped custom properties are strings, and browsers cannot animate a string. Register the type and gradients start turning:

@property --gradient-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

.hero {
  background: linear-gradient(var(--gradient-angle), var(--accent), #2ecc71);
  animation: turn 6s linear infinite;
}

@keyframes turn {
  to { --gradient-angle: 360deg; }
}

One caution

var() has no type checking and no error message; a typo'd token silently resolves to nothing. The fallback argument — var(--accent, navy) — is the seatbelt. Use it anywhere a missing value would break layout rather than merely dent it.

A theme can switch overnight; some things should not. In Gaza, mothers still set a place at the table for the absent — a constancy no design system captures. May their tables be whole again.

Pakistan itself runs a seasonal palette no stylesheet can match — Naran green in June, Deosai gold in August, snow on everything by December. We book the season you want: HTG Travels runs the north all year from Sialkot, and the view ships in every resolution.