Background

Ready to use

The background utilities control background colors.

How it works

Scheme-aware classes (e.g. .background-default, .surface-subtle, .fill-default) automatically adapt to the active color scheme. Wrap content in a .tng-scheme.is-contrast element to switch to contrast colors. Non-scheme classes (e.g. .fill-primary, .fill-error) set background-color directly.

Colors

Background

Surface

Fill

Background

.background-default

.background-subtle

.background-muted

.background-decorative-accent-start

.background-decorative-accent-end

Surface

.surface-default

.surface-subtle

.surface-muted

.surface-error

.surface-success

.surface-dim-default

.surface-dim-subtle

.surface-dim-muted

.surface-ev

Fill

.fill-default

.fill-emphasis

.fill-subtle

.fill-muted

.fill-soft

.fill-dim-default

.fill-dim-subtle

.fill-dim-muted

.fill-primary

.fill-primary-emphasis

.fill-primary-subtle

.fill-primary-muted

.fill-secondary

.fill-secondary-emphasis

.fill-secondary-subtle

.fill-secondary-muted

.fill-bz4x

.fill-bz4x-subtle

.fill-bz4x-muted

.fill-success

.fill-success-subtle

.fill-success-muted

.fill-error

.fill-error-subtle

.fill-error-muted

.fill-info

.fill-info-subtle

.fill-info-muted

.fill-warning

.fill-warning-subtle

.fill-warning-muted

When to use

Use background utilities when:

• You need to set only the background color without affecting text color
• Building custom layouts with precise color control
• Combining multiple utilities for specific effects

For automatic scheme switching and preset color combinations, use Box component instead.