Theme
Combine one of three theme utilities with our theme color classes to set color and background-color pairings on any element, just like component variants.
On this page
| Class | Styles |
|---|---|
| .theme-contrast | background-color: var(--bs-theme-bg); color: var(--bs-theme-contrast); |
| .theme-subtle | background-color: var(--bs-theme-bg-subtle); color: var(--bs-theme-text); |
| .theme-muted | background-color: var(--bs-theme-bg-muted); color: var(--bs-theme-text-emphasis); |
| .theme-border | border: var(--bs-border-width) solid var(--bs-theme-border); |
Overview
Take any of our theme color classes and add .theme-contrast, .theme-subtle, or .theme-muted to set a predefined color and background-colorpairing. Then optionally add.theme-border` to set a predefined border color. For more information on how theme colors work, see the Theme documentation in our Customize section.
Contrast
Contrast pairs the bg theme token with the contrast text color for maximum readability. This is ideal for high-emphasis elements with solid backgrounds.
.theme-primary .theme-contrast
.theme-accent .theme-contrast
.theme-success .theme-contrast
.theme-danger .theme-contrast
.theme-warning .theme-contrast
.theme-info .theme-contrast
.theme-inverse .theme-contrast
.theme-secondary .theme-contrast
<div class="p-2 theme-primary theme-contrast">.theme-primary .theme-contrast</div>
<div class="p-2 theme-accent theme-contrast">.theme-accent .theme-contrast</div>
<div class="p-2 theme-success theme-contrast">.theme-success .theme-contrast</div>
<div class="p-2 theme-danger theme-contrast">.theme-danger .theme-contrast</div>
<div class="p-2 theme-warning theme-contrast">.theme-warning .theme-contrast</div>
<div class="p-2 theme-info theme-contrast">.theme-info .theme-contrast</div>
<div class="p-2 theme-inverse theme-contrast">.theme-inverse .theme-contrast</div>
<div class="p-2 theme-secondary theme-contrast">.theme-secondary .theme-contrast</div>Subtle
Subtle pairs the bg-subtle theme token with the text text color for a lower-contrast, more subtle appearance. This combination will automatically adjust to the current color mode.
.theme-primary .theme-subtle
.theme-accent .theme-subtle
.theme-success .theme-subtle
.theme-danger .theme-subtle
.theme-warning .theme-subtle
.theme-info .theme-subtle
.theme-inverse .theme-subtle
.theme-secondary .theme-subtle
<div class="p-2 theme-primary theme-subtle">.theme-primary .theme-subtle</div>
<div class="p-2 theme-accent theme-subtle">.theme-accent .theme-subtle</div>
<div class="p-2 theme-success theme-subtle">.theme-success .theme-subtle</div>
<div class="p-2 theme-danger theme-subtle">.theme-danger .theme-subtle</div>
<div class="p-2 theme-warning theme-subtle">.theme-warning .theme-subtle</div>
<div class="p-2 theme-info theme-subtle">.theme-info .theme-subtle</div>
<div class="p-2 theme-inverse theme-subtle">.theme-inverse .theme-subtle</div>
<div class="p-2 theme-secondary theme-subtle">.theme-secondary .theme-subtle</div>And with borders:
.theme-primary .theme-subtle
.theme-accent .theme-subtle
.theme-success .theme-subtle
.theme-danger .theme-subtle
.theme-warning .theme-subtle
.theme-info .theme-subtle
.theme-inverse .theme-subtle
.theme-secondary .theme-subtle
<div class="p-2 theme-primary theme-subtle theme-border">.theme-primary .theme-subtle</div>
<div class="p-2 theme-accent theme-subtle theme-border">.theme-accent .theme-subtle</div>
<div class="p-2 theme-success theme-subtle theme-border">.theme-success .theme-subtle</div>
<div class="p-2 theme-danger theme-subtle theme-border">.theme-danger .theme-subtle</div>
<div class="p-2 theme-warning theme-subtle theme-border">.theme-warning .theme-subtle</div>
<div class="p-2 theme-info theme-subtle theme-border">.theme-info .theme-subtle</div>
<div class="p-2 theme-inverse theme-subtle theme-border">.theme-inverse .theme-subtle</div>
<div class="p-2 theme-secondary theme-subtle theme-border">.theme-secondary .theme-subtle</div>Muted
Muted pairs the bg-muted theme token with the text-emphasis text color for a lower-contrast, more muted appearance. Like subtle, this combination will automatically adjust to the current color mode.
.theme-primary .theme-muted
.theme-accent .theme-muted
.theme-success .theme-muted
.theme-danger .theme-muted
.theme-warning .theme-muted
.theme-info .theme-muted
.theme-inverse .theme-muted
.theme-secondary .theme-muted
<div class="p-2 theme-primary theme-muted">.theme-primary .theme-muted</div>
<div class="p-2 theme-accent theme-muted">.theme-accent .theme-muted</div>
<div class="p-2 theme-success theme-muted">.theme-success .theme-muted</div>
<div class="p-2 theme-danger theme-muted">.theme-danger .theme-muted</div>
<div class="p-2 theme-warning theme-muted">.theme-warning .theme-muted</div>
<div class="p-2 theme-info theme-muted">.theme-info .theme-muted</div>
<div class="p-2 theme-inverse theme-muted">.theme-inverse .theme-muted</div>
<div class="p-2 theme-secondary theme-muted">.theme-secondary .theme-muted</div>And with borders:
.theme-primary .theme-muted
.theme-accent .theme-muted
.theme-success .theme-muted
.theme-danger .theme-muted
.theme-warning .theme-muted
.theme-info .theme-muted
.theme-inverse .theme-muted
.theme-secondary .theme-muted
<div class="p-2 theme-primary theme-muted theme-border">.theme-primary .theme-muted</div>
<div class="p-2 theme-accent theme-muted theme-border">.theme-accent .theme-muted</div>
<div class="p-2 theme-success theme-muted theme-border">.theme-success .theme-muted</div>
<div class="p-2 theme-danger theme-muted theme-border">.theme-danger .theme-muted</div>
<div class="p-2 theme-warning theme-muted theme-border">.theme-warning .theme-muted</div>
<div class="p-2 theme-info theme-muted theme-border">.theme-info .theme-muted</div>
<div class="p-2 theme-inverse theme-muted theme-border">.theme-inverse .theme-muted</div>
<div class="p-2 theme-secondary theme-muted theme-border">.theme-secondary .theme-muted</div>Comparison
Here's a side-by-side comparison of all three styles for each theme color:
Primary contrast
Primary subtle
Primary muted
Accent contrast
Accent subtle
Accent muted
Success contrast
Success subtle
Success muted
Danger contrast
Danger subtle
Danger muted
Warning contrast
Warning subtle
Warning muted
Info contrast
Info subtle
Info muted
Inverse contrast
Inverse subtle
Inverse muted
Secondary contrast
Secondary subtle
Secondary muted
<div class="d-flex gap-2 mb-2">
<div class="theme-primary theme-contrast p-3 flex-fill text-center rounded">Primary contrast</div>
<div class="theme-primary theme-subtle p-3 flex-fill text-center rounded">Primary subtle</div>
<div class="theme-primary theme-muted p-3 flex-fill text-center rounded">Primary muted</div>
</div>
<div class="d-flex gap-2 mb-2">
<div class="theme-accent theme-contrast p-3 flex-fill text-center rounded">Accent contrast</div>
<div class="theme-accent theme-subtle p-3 flex-fill text-center rounded">Accent subtle</div>
<div class="theme-accent theme-muted p-3 flex-fill text-center rounded">Accent muted</div>
</div>
<div class="d-flex gap-2 mb-2">
<div class="theme-success theme-contrast p-3 flex-fill text-center rounded">Success contrast</div>
<div class="theme-success theme-subtle p-3 flex-fill text-center rounded">Success subtle</div>
<div class="theme-success theme-muted p-3 flex-fill text-center rounded">Success muted</div>
</div>
<div class="d-flex gap-2 mb-2">
<div class="theme-danger theme-contrast p-3 flex-fill text-center rounded">Danger contrast</div>
<div class="theme-danger theme-subtle p-3 flex-fill text-center rounded">Danger subtle</div>
<div class="theme-danger theme-muted p-3 flex-fill text-center rounded">Danger muted</div>
</div>
<div class="d-flex gap-2 mb-2">
<div class="theme-warning theme-contrast p-3 flex-fill text-center rounded">Warning contrast</div>
<div class="theme-warning theme-subtle p-3 flex-fill text-center rounded">Warning subtle</div>
<div class="theme-warning theme-muted p-3 flex-fill text-center rounded">Warning muted</div>
</div>
<div class="d-flex gap-2 mb-2">
<div class="theme-info theme-contrast p-3 flex-fill text-center rounded">Info contrast</div>
<div class="theme-info theme-subtle p-3 flex-fill text-center rounded">Info subtle</div>
<div class="theme-info theme-muted p-3 flex-fill text-center rounded">Info muted</div>
</div>
<div class="d-flex gap-2 mb-2">
<div class="theme-inverse theme-contrast p-3 flex-fill text-center rounded">Inverse contrast</div>
<div class="theme-inverse theme-subtle p-3 flex-fill text-center rounded">Inverse subtle</div>
<div class="theme-inverse theme-muted p-3 flex-fill text-center rounded">Inverse muted</div>
</div>
<div class="d-flex gap-2 mb-2">
<div class="theme-secondary theme-contrast p-3 flex-fill text-center rounded">Secondary contrast</div>
<div class="theme-secondary theme-subtle p-3 flex-fill text-center rounded">Secondary subtle</div>
<div class="theme-secondary theme-muted p-3 flex-fill text-center rounded">Secondary muted</div>
</div>With components
Theme utilities work great with components that support theming. Apply the theme color to a container and use theme style classes on individual elements.
Contrast badge
Subtle badge
Muted badge
Contrast badge
Subtle badge
Muted badge
<div class="theme-primary">
<div class="d-flex gap-2 mb-3">
<span class="badge theme-contrast">Contrast badge</span>
<span class="badge theme-subtle">Subtle badge</span>
<span class="badge theme-muted">Muted badge</span>
</div>
</div>
<div class="theme-danger">
<div class="d-flex gap-2 mb-3">
<span class="badge theme-contrast">Contrast badge</span>
<span class="badge theme-subtle">Subtle badge</span>
<span class="badge theme-muted">Muted badge</span>
</div>
</div>You can also mix theme colors within the same container by applying different .theme-{color} classes to child elements:
Success
Warning
Danger
<div class="d-flex gap-2">
<div class="theme-success theme-contrast p-3 rounded">Success</div>
<div class="theme-warning theme-contrast p-3 rounded">Warning</div>
<div class="theme-danger theme-contrast p-3 rounded">Danger</div>
</div>CSS
Generated CSS
The theme style classes generate the following CSS:
.theme-contrast {
background-color: var(--theme-bg);
color: var(--theme-contrast);
}
.theme-subtle {
background-color: var(--theme-bg-subtle);
color: var(--theme-text);
}
.theme-muted {
background-color: var(--theme-bg-muted);
color: var(--theme-text-emphasis);
}Sass utilities API
Theme utilities are declared in our utilities API in scss/_utilities.scss. Learn how to use the utilities API.
// Theme style utilities - pair with .theme-{color} to apply coordinated bg + text colors
"theme-contrast": (
property: (
"background-color": var(--theme-bg),
"color": var(--theme-contrast)
),
class: theme-contrast,
values: (null: null)
),
"theme-subtle": (
property: (
"background-color": var(--theme-bg-subtle),
"color": var(--theme-text)
),
class: theme-subtle,
values: (null: null)
),
"theme-muted": (
property: (
"background-color": var(--theme-bg-muted),
"color": var(--theme-text-emphasis)
),
class: theme-muted,
values: (null: null)
),
"theme-border": (
property: border,
class: theme-border,
values: (null: var(--border-width) solid var(--theme-border))
),