CSS Custom Properties (Variables)

Custom properties are reusable values that cascade just like any other property.

:root { --primary:#0066cc; --spacing:1rem; }
.button { background:var(--primary); margin:var(--spacing); }

You can update them at runtime with JavaScript (element.style.setProperty('--primary','#ff6600')).

---

Example: Dark‑mode toggle using CSS variables

:root { --bg:#fff; --text:#111; }
[data-theme="dark"] { --bg:#111; --text:#eee; }
body { background:var(--bg); color:var(--text); }