Background Reference ↓

Semantic colors

default
.ui-background:default
primary
.ui-background:primary
secondary
.ui-background:secondary
success
.ui-background:success
warning
.ui-background:warning
danger
.ui-background:danger
info
.ui-background:info
brand
.ui-background:brand
accent
.ui-background:accent

Neutral / surface colors

white
.ui-background:white
black
.ui-background:black
surface
.ui-background:surface
base
.ui-background:base

Usage example

Primary panel

Some body text inside a colored section.

Success panel

Operation completed successfully.

Danger panel

Something went wrong.

Reference

Base

ClassDescription

Modifiers

ClassDescription
.ui-background:primaryuses --color-primary
.ui-background:secondaryuses --color-secondary
.ui-background:successuses --color-success
.ui-background:warninguses --color-warning
.ui-background:dangeruses --color-danger
.ui-background:infouses --color-info
.ui-background:branduses --color-brand
.ui-background:accentuses --color-accent
.ui-background:defaultuses --ui-color-surface-alt (neutral)
.ui-background:muteduses --ui-color-surface (lighter)
.ui-background:invertinverted surface (dark in light mode)

Options

ClassDescription