One component, three themes via scope
The .btn rule is the same for all three; each reads the --brand of its nearest ancestor that sets one.
Custom properties (CSS variables) are properties you name yourself, like --brand, read with var(--brand, fallback); they inherit down the page like color does, so redefining one on a parent re-themes everything inside it.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 5 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Create tokens --space-1 (0.25rem), --space-2 (0.5rem) and --space-4 (1rem) on :root and use them for a .card's padding (space-4) and gap between its children (space-2).
Make an .alert component whose border and text use --alert-color, defaulting to blue when not set, and an .alert.error variant that sets it to red.
Write a JavaScript line that reads --brand from the root, and one that sets it to #7c3aed.
Explain it without notes
What is a custom property and how do you read it?
Explain how scope and inheritance make custom properties good for theming.
When is the fallback in var(--x, fallback) used, and when is it not?
What does "invalid at computed-value time" mean, and what value does the property get?
How do CSS custom properties differ from Sass variables?
Preview
Console
Nothing logged yet.Expected console output
Save #2563eb rgb(37, 99, 235)
Delete #dc2626 rgb(220, 38, 38)
Publish #16a34a rgb(22, 163, 74)