Background
The background utilities control background colors. For a multi-purpose color component, see the Box.
How it works
Section titled “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
Section titled “Colors”Background
Surface
Background
Section titled “Background”.background-default .background-subtle .background-muted Surface
Section titled “Surface”.surface-default .surface-subtle .surface-muted .surface-error .surface-success .surface-dim-default .surface-dim-subtle .surface-dim-muted .fill-default .fill-emphasis .fill-subtle .fill-muted .fill-dim-default .fill-dim-subtle .fill-dim-muted .fill-primary .fill-primary-subtle .fill-primary-muted .fill-secondary .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 When to use
Section titled “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.