Provide Safe Colour Fallbacks

Keep a declaration usable when an optional custom property is missing.

Use the second argument to var()

background: var(--demo-surface, #fef3c7);

The browser uses #fef3c7 when --demo-surface is missing or invalid. A fallback does not replace a valid but poorly chosen colour.

A component with optional theme values

Fallback notice

This notice does not define any --demo-* properties, so each colour comes from a readable fallback in its declaration.

Theme checklist

  1. Name values by role, not by a colour such as blue or orange.
  2. Define the shared palette in :root.
  3. Override related values together on a container.
  4. Add fallbacks where an absent value would break the declaration.
  5. Test text, controls, states, borders, and focus indicators.

Read the CSS Variables gauge

Important CSS

Fallbacks apply when a custom property is missing or invalid.

.button {
  background: var(--button-background, var(--color-brand));
  color: var(--button-text, var(--color-on-brand));
}