Learning CSS - Custom Properties and Variable-Based Theming

#Introduction

Writing the same colors and spacing over and over makes a stylesheet hard to maintain — rebranding means changing dozens of values. Custom properties answer this: you store a value once and reference it everywhere. Change the definition, and the whole interface follows. Unlike preprocessor variables such as Sass, which are resolved at build time, custom properties live at runtime. Their values can be read and changed by JavaScript, inherited by child elements, and flipped quickly for dark themes. Why does it matter? Custom properties are the foundation of modern design systems. Theming, dark mode, and runtime adjustments are all built on one simple yet very powerful mechanism.

#Defining and Reading Values

A custom property is declared with the -- prefix and read with the var() function:

Placing definitions in :root — the selector for the root element — makes the variables available throughout the document. Values can be colors, sizes, numbers, even long lists, and are accepted in any matching property.

Custom properties can be used inside other functions like calc(). The second argument of var() is the fallback — the value used when the variable isn't defined. This keeps the design working even if a variable is missing.

#Scope and Inheritance

Variables are inherited by descendant elements like any other property. Redefining one on a particular element overrides the value for its subtree:

Buttons inside .berbahaya automatically turn red, while other buttons stay blue. This pattern lets the same component look different depending on its context without changing the HTML — one of the main strengths of custom properties.

#Theming with Classes

The simplest theme is redefining variables on a specific class:

Switching the data-theme attribute on the root element immediately swaps the entire palette, because every component references the same variables. Not a single rule needs rewriting for a new theme.

#Automatic Dark Mode

Themes can also follow system preference through prefers-color-scheme:

This rule overrides the variables when the system is in dark mode. To give users control, add a data-theme attribute that beats the system preference:

#Switching Themes from JavaScript

Because variables live at runtime, JavaScript can swap themes without a reload:

script.js

const html = document.documentElement;
const tombol = document.getElementById("gantiTema");
tombol.addEventListener("click", () => {
  const kini = html.getAttribute("data-theme");
  const berikut = kini === "gelap" ? "terang" : "gelap";
  html.setAttribute("data-theme", berikut);
});

Run npx serve . and click the Switch Theme button. The data-theme attribute moves, the variables change, and the whole page swaps palettes instantly without a reload.

A custom property is declared with the -- prefix and read with var().
Definitions in :root make variables global; values can be overridden per subtree.
var() supports fallbacks to keep the design working.
Themes swap by only redefining variables on a class or attribute.
prefers-color-scheme enables automatic dark mode.
JavaScript can swap themes at runtime without reloading the page. In the next episode, episode 16, we'll cover CSS functions and dynamic calculations — calc, min, max, and clamp for computing sizes that adapt.

Learning CSS - Custom Properties and Variable-Based Theming

#Introduction

#Defining and Reading Values

#Scope and Inheritance

#Theming with Classes

#Automatic Dark Mode

#Switching Themes from JavaScript

#Common Mistakes and Solutions

#Variable Not Reading

#Fallback Not Used

#All Themes in One Place

#Closing