Surface contracts

Inverted, precedence, intent boundary

.inverted creates a contrasting surface context. Bare content and transparent treatments follow its foreground; components with their own surface keep it unless the treatment is applied directly to a component that consumes --ui-*. Use data-theme when a whole subtree needs another theme.

Bare inverted

.inverted works on any block. The base paint flips the background and foreground; headings follow through --heading.

Inverted header

This is a bare <header class="inverted">. Text and headings inherit the contrasting foreground.

Generic block

The base paint makes this work on any element — no card, no navbar required.

Direct component opt-in through --ui-*

Components that consume the shared --ui-* surface contract invert as a whole when .inverted is on them.

.card.inverted

The card consumes --ui-*, so it inverts as a surface.

Inverted alert

The alert composes through --ui-* too.

A compact component with the treatment applied directly:

Badge

Cascade precedence

More specific wins

.inverted paints the base surface and remaps the tokens, but explicit variants and component states outrank it by specificity. .card.subtle (0,2,0) beats the base paint, and an active .nav-link keeps its own chip.

.card.inverted

The whole surface inverts.

.card.inverted.subtle

Competing treatments — do not combine. Shown here to fix precedence: .subtle keeps the background while the foreground stays inverted.

The active .nav-link[aria-current] keeps its explicit chip on an inverted navbar — a more specific state outranks the base paint.

Intent boundary

Surface-owning components reset --ui-* with a :where() boundary. Their own surface stops the contrasting treatment; transparent descendants then follow that local foreground.

Inverted wrapper

This paragraph is bare content, so it inherits the inverted foreground.

Card inside inverted

The card keeps its raised surface; its outline follows the card.

Accordion inside inverted

Its raised surface and text establish another local context.

Need a complete theme island?

Use data-theme="dark", data-theme="light", or a named theme when every surface, form control, intent, and state in a subtree must use another palette. .inverted is deliberately narrower: it creates one contrasting surface context.