Scope and Override a Palette

Custom properties follow the cascade and inherit into descendants.

Keep a component recipe stable

.warm { --card-surface: #fff7ed; --card-action: #c2410c; }

Each card uses the same component rules. Its container changes only the custom property values, and descendants inherit the local palette.

Compare scoped themes

Default card

Uses the component values that refer back to the root palette.

Open default

Warm card

Overrides the card variables only inside this article.

Open warm

Cool card

Uses another local palette without duplicating component rules.

Open cool

Scope rule

The nearest applicable declaration wins according to the normal cascade. Keep every text/background pair readable when overriding a theme.

Read the CSS Variables gauge

Important CSS

A nearer ancestor can override inherited custom properties.

.card-featured {
  --color-surface: #0d4f56;
  --color-text: #ffffff;
}
.card {
  background: var(--color-surface);
  color: var(--color-text);
}