CSS Custom Properties (Variables)

:root scope, var() syntax, fallbacks, and runtime JavaScript theming

« CSS Transitions & Keyframe Animations« Previous CSS Transforms: 2D & 3D Manipulations »Next »

CSS Custom Properties (Variables) store reusable values throughout stylesheets. Unlike Sass variables, CSS variables are live in the DOM and can be updated at runtime in JavaScript.

Declaring and Using Custom Properties

Declare global variables on the :root pseudo-class: --primary-color: #04AA6D;.

Consume variables using the var() function: color: var(--primary-color, #000); with an optional fallback.

Scoped overrides: Variables can be redefined within localized selectors (e.g. .dark-theme { --bg-color: #0f172a; }).

JavaScript manipulation: Read or update custom properties dynamically via document.documentElement.style.setProperty("--primary-color", "#38bdf8").

Light and Dark Theme Architecture

Try It Yourself »

:root {
  --bg-surface: #ffffff;
  --text-main: #0f172a;
  --brand-accent: #04AA6D;
}

[data-theme="dark"] {
  --bg-surface: #0f172a;
  --text-main: #f8fafc;
  --brand-accent: #10b981;
}

body {
  background-color: var(--bg-surface);
  color: var(--text-main);
  transition: background-color 0.3s ease;
}

Google AdSense Slot (inContentBanner)

Set your Publisher ID in src/config/ads.ts to display live ads.

Test Yourself With Exercise

+15 XP

What prefix is required when declaring a CSS Custom Property (Variable)?

« Previous: CSS Transitions & Keyframe Animations Next: CSS Transforms: 2D & 3D Manipulations »