CSS Essentials·Positioning and systems

Custom properties and theming

Define tokens once, then let the cascade theme every component.

Beginner 13 min read Lesson 12 of 480 Challenge included

What you will be able to do

Declare custom properties
Override tokens per theme
Use fallbacks safely

Custom properties are values stored in the cascade. Components read them with var(), so one token change updates every place that uses it.

tokens.cssCSS

:root {
  --brand: #e4472b;
  --paper: #f7f4ee;
  --ink: #1c1917;
}

[data-theme="dark"] {
  --paper: #12100e;
  --ink: #f7f4ee;
}

body {
  background: var(--paper);
  color: var(--ink);
}

.button {
  background: var(--brand, #e4472b);
  color: white;
}

Live exampleOne button, two themes

Your turn

Create a spacing scale

Easy

Define three spacing tokens and use them for the card padding and gap.

CSS · starter

:root {
  /* tokens here */
}

Check your understanding before moving on.

Knowledge checkQuestion 1

Where does a custom property get its value?

Select an answer to continue

Study tools

Make it yours.

Keep a private note for this lesson, then turn the key ideas into flashcards you can revisit.

Sign in to save notes and flashcards.Both are private to your account and stay with your progress.

Finished reading?

Lock in what you just learned.

Mark this lesson complete to save your place and move one step closer to the certificate.

Next: Forms and states

Lesson 12 of 480 · 0% of course