.badge { color: var(--badge-color, #1f2937); }If --badge-color does not exist, the text uses #1f2937.
LESSON 92 OF 100
Add a fallback value to var()
Keep text readable when a local token is undefined.
STEP 1 · LEARN
How it works
The second var() argument is used when the requested custom property is missing or invalid at substitution time.
.badge { color: var(--badge-color); }Without a fallback, the declaration can become invalid when the token is missing.
STEP 2 · APPLY
Your exercise
Set .badge colour to var(--badge-color, #1f2937).
index.htmlCSS
Safe resultisolated
The draft stays only in this browser.HTML and CSS allowed · scripts and network blocked
STEP 4 · CHECK
What needs to pass
0%not checked
- ○The colour includes the required token and fallback.
- ○The target element is present in the page.
Explain the solution logic
The comma separates the requested token from the fallback used only when needed.