Background
The background utilities control background colors.
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 .background-decorative-accent-start .background-decorative-accent-end Surface
Section titled “Surface”.surface-default .surface-subtle .surface-muted .surface-error .surface-success .surface-dim-default .surface-dim-subtle .surface-dim-muted .surface-ev .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
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.