Before this lesson
Understand the cascade, inheritance and color values; be ready to read var() expressions.
What you will be able to do
Organize repeated values into scoped tokens and build local themes without duplicating every rule.
Understand the mechanism
Custom properties participate in the cascade and normally inherit, with var resolved where used. They are not merely compile-time substitutions. A component can inherit different values from different parents, so name tokens by role rather than literal color.
Define defaults at root, override at a theme container, and consume in components. Extract values when meaningful reuse exists rather than turning every pixel into a token. A local override should not accidentally restyle unrelated navigation.
A var fallback handles missing or invalid custom-property values, but an existing token unsuitable for its consuming property does not automatically use the fallback. A color used for padding makes the declaration invalid. Validate values at their use sites.
A theme includes text, borders, links, focus and native controls as well as background. color-scheme helps native UI adapt. Define precedence between system preference and manual choice; this example demonstrates local themes without preference persistence.
Runnable example
Run HTML examples as separate .html files in a modern browser. Prepare resource files and multi-file modules as described in the lesson.
<!doctype html>
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Honeysuck practice</title></head><body>
<style>
:root{--surface:#fff;--text:#20362c;--border:#c7d5c9;--accent:#176343;--space:20px}
.theme-dark{--surface:#20362c;--text:#f6f8f0;--border:#789784;--accent:#c4e596;color-scheme:dark}
.card{padding:var(--space,16px);background:var(--surface);color:var(--text);border:1px solid var(--border);margin:16px 0;border-radius:12px}
.card a{color:var(--accent)}.card a:focus-visible{outline:3px solid currentColor;outline-offset:4px}
</style><article class="card"><h2>Light card</h2><a href="#next">Next lesson</a></article>
<section class="theme-dark"><article class="card"><h2>Dark card</h2><a href="#next">Next lesson</a></article></section><p id="next">Shared structure, different inherited tokens.</p>
</body></html>Trace and verify
Both cards share the same rule but inherit different colors. Change --space on the dark parent and observe only that area. Set it to red to inspect invalid padding, then remove the override. Verify focus contrast in both themes.
Common mistakes and boundaries
Ordinary media-query conditions do not accept custom properties this way. Naming colors as tokens does not guarantee contrast; check every theme state.
Practice challenge
Add a compact variant overriding spacing only, plus a print theme with dark text on white.
Reference solution and reasoning
Override tokens for the variant and semantic colors inside a print media rule. Confirm in print preview instead of assuming a written rule works.