主题色 · Bootstrap 6.0 中文文档

类名	样式
.theme-contrast	--bs-theme-fg: var(--bs-theme-contrast); --bs-theme-fg-emphasis: var(--bs-theme-contrast);
.theme-subtle	background-color: var(--bs-theme-bg-subtle); color: var(--bs-theme-fg);
.theme-muted	--bs-theme-fg: var(--bs-theme-fg-emphasis);
.theme-border	border: var(--bs-border-width) solid var(--bs-theme-border);

概览

使用我们的任何主题颜色类，并添加 .theme-contrast、.theme-subtle 或 .theme-muted 来设置预定义的 color and background-colorpairing. Then optionally add。使用 `.theme-border` 来设置预定义的边框颜色。有关主题颜色的更多信息，请参阅我们“自定义”部分的主题文档。

对比

对比将 bg 主题标记与 contrast 文本颜色配对，以在 .theme-contrast 下实现最大可读性。这对于具有纯色背景的高强调元素非常理想。

.主题-主要 .主题-对比

.主题-强调 .主题-对比

.主题-成功 .主题-对比

.主题-危险 .主题-对比

.主题-警告 .主题-对比

.主题信息 .主题对比

.主题-反转 .主题-对比

.主题-次要 .主题-对比

HTML

<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>

嵌套链接继承对比前景，因此它们在纯色背景上仍然清晰可读：

主题主要与一个嵌套链接里面。

主题强调色带有一个嵌套链接里面。

主题成功与一个嵌套链接里面。

主题危险与一个嵌套链接里面。

主题警告嵌套链接里面。

带有主题信息嵌套链接里面。

带有 a 的主题反转嵌套链接里面。

主题次要带有 a 嵌套链接里面。

HTML

<div class="p-3 theme-primary theme-contrast">Theme Primary with a <a class="underline-50 hover:underline-100" href="#">nested link</a> inside.</div>
<div class="p-3 theme-accent theme-contrast">Theme Accent with a <a class="underline-50 hover:underline-100" href="#">nested link</a> inside.</div>
<div class="p-3 theme-success theme-contrast">Theme Success with a <a class="underline-50 hover:underline-100" href="#">nested link</a> inside.</div>
<div class="p-3 theme-danger theme-contrast">Theme Danger with a <a class="underline-50 hover:underline-100" href="#">nested link</a> inside.</div>
<div class="p-3 theme-warning theme-contrast">Theme Warning with a <a class="underline-50 hover:underline-100" href="#">nested link</a> inside.</div>
<div class="p-3 theme-info theme-contrast">Theme Info with a <a class="underline-50 hover:underline-100" href="#">nested link</a> inside.</div>
<div class="p-3 theme-inverse theme-contrast">Theme Inverse with a <a class="underline-50 hover:underline-100" href="#">nested link</a> inside.</div>
<div class="p-3 theme-secondary theme-contrast">Theme Secondary with a <a class="underline-50 hover:underline-100" href="#">nested link</a> inside.</div>

微妙

Subtle 将 bg-subtle 主题令牌与 text 文本颜色配对，以获得较低对比度、更细腻的外观。此组合会自动根据当前颜色模式进行调整。

.主题-主要 .主题-微妙

.主题-强调 .主题-微妙

.主题-成功 .主题-微妙

.主题-危险 .主题-微妙

.主题-警告 .主题-微妙

.主题-信息 .主题-微妙

.主题-反转 .主题-微妙

.主题-次要 .主题-微妙

HTML

<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>

并带有边框：

.主题-主要 .主题-柔和 .主题-边框

.主题-强调 .主题-微妙 .主题-边框

.主题-成功 .主题-微妙 .主题-边框

.主题-危险 .主题-微妙 .主题-边框

.主题-警告 .主题-微妙 .主题-边框

.主题-信息 .主题-微妙 .主题-边框

.主题-反向 .主题-微妙 .主题-边框

.主题-次要 .主题-微妙 .主题-边框

HTML

<div class="p-2 theme-primary theme-subtle theme-border">.theme-primary .theme-subtle .theme-border</div>
<div class="p-2 theme-accent theme-subtle theme-border">.theme-accent .theme-subtle .theme-border</div>
<div class="p-2 theme-success theme-subtle theme-border">.theme-success .theme-subtle .theme-border</div>
<div class="p-2 theme-danger theme-subtle theme-border">.theme-danger .theme-subtle .theme-border</div>
<div class="p-2 theme-warning theme-subtle theme-border">.theme-warning .theme-subtle .theme-border</div>
<div class="p-2 theme-info theme-subtle theme-border">.theme-info .theme-subtle .theme-border</div>
<div class="p-2 theme-inverse theme-subtle theme-border">.theme-inverse .theme-subtle .theme-border</div>
<div class="p-2 theme-secondary theme-subtle theme-border">.theme-secondary .theme-subtle .theme-border</div>

嵌套链接继承微妙的前景色，因此它们在细微的背景上仍然可读：

主题主要与一个嵌套链接里面。

主题强调色带有 a 嵌套链接里面。

主题成功与一个嵌套链接里面。

主题危险与一个嵌套链接里面。

主题警告带有一个嵌套链接里面。

带有主题信息嵌套链接里面。

带有 a 的主题反转嵌套链接里面。

主题次要带有 a 嵌套链接里面。

HTML

<div class="p-3 theme-primary theme-subtle">Theme Primary with a <a class="underline-50 hover:underline-100" href="#">nested link</a> inside.</div>
<div class="p-3 theme-accent theme-subtle">Theme Accent with a <a class="underline-50 hover:underline-100" href="#">nested link</a> inside.</div>
<div class="p-3 theme-success theme-subtle">Theme Success with a <a class="underline-50 hover:underline-100" href="#">nested link</a> inside.</div>
<div class="p-3 theme-danger theme-subtle">Theme Danger with a <a class="underline-50 hover:underline-100" href="#">nested link</a> inside.</div>
<div class="p-3 theme-warning theme-subtle">Theme Warning with a <a class="underline-50 hover:underline-100" href="#">nested link</a> inside.</div>
<div class="p-3 theme-info theme-subtle">Theme Info with a <a class="underline-50 hover:underline-100" href="#">nested link</a> inside.</div>
<div class="p-3 theme-inverse theme-subtle">Theme Inverse with a <a class="underline-50 hover:underline-100" href="#">nested link</a> inside.</div>
<div class="p-3 theme-secondary theme-subtle">Theme Secondary with a <a class="underline-50 hover:underline-100" href="#">nested link</a> inside.</div>

静音

Muted 将 bg-muted 主题标记与 text-emphasis 文本颜色配对，以获得较低对比度、更柔和的外观。像 subtle 一样，这种组合会自动根据当前的颜色模式进行调整。

.theme-primary .theme-muted

.主题-强调 .主题-弱化

.主题-成功 .主题-静音

.主题-危险 .主题-静音

.主题-警告 .主题-静音

.theme-info .theme-muted

.主题-反向 .主题-淡化

.theme-secondary .theme-muted

HTML

<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>

并带有边框：

.主题-主色 .主题-柔和 .主题-边框

.主题-强调 .主题-柔和 .主题-边框

.主题-成功 .主题-静音 .主题-边框

.主题-危险 .主题-静音 .主题-边框

.主题-警告 .主题-减淡 .主题-边框

.主题信息 .主题弱化 .主题边框

.主题-反转 .主题-静音 .主题-边框

.主题-次要 .主题-静音 .主题-边框

HTML

<div class="p-2 theme-primary theme-muted theme-border">.theme-primary .theme-muted .theme-border</div>
<div class="p-2 theme-accent theme-muted theme-border">.theme-accent .theme-muted .theme-border</div>
<div class="p-2 theme-success theme-muted theme-border">.theme-success .theme-muted .theme-border</div>
<div class="p-2 theme-danger theme-muted theme-border">.theme-danger .theme-muted .theme-border</div>
<div class="p-2 theme-warning theme-muted theme-border">.theme-warning .theme-muted .theme-border</div>
<div class="p-2 theme-info theme-muted theme-border">.theme-info .theme-muted .theme-border</div>
<div class="p-2 theme-inverse theme-muted theme-border">.theme-inverse .theme-muted .theme-border</div>
<div class="p-2 theme-secondary theme-muted theme-border">.theme-secondary .theme-muted .theme-border</div>

嵌套链接继承了柔和的前景色，因此在柔和的背景上仍然清晰可读：

主题主要与一个嵌套链接里面。

主题强调色带有 a 嵌套链接里面。

主题成功与一个嵌套链接里面。

主题危险与一个嵌套链接里面。

主题警告带有一个嵌套链接里面。

带有主题信息嵌套链接里面。

带有 a 的主题反转嵌套链接里面。

主题次要带有 a 嵌套链接里面。

HTML

<div class="p-3 theme-primary theme-muted">Theme Primary with a <a class="underline-50 hover:underline-100" href="#">nested link</a> inside.</div>
<div class="p-3 theme-accent theme-muted">Theme Accent with a <a class="underline-50 hover:underline-100" href="#">nested link</a> inside.</div>
<div class="p-3 theme-success theme-muted">Theme Success with a <a class="underline-50 hover:underline-100" href="#">nested link</a> inside.</div>
<div class="p-3 theme-danger theme-muted">Theme Danger with a <a class="underline-50 hover:underline-100" href="#">nested link</a> inside.</div>
<div class="p-3 theme-warning theme-muted">Theme Warning with a <a class="underline-50 hover:underline-100" href="#">nested link</a> inside.</div>
<div class="p-3 theme-info theme-muted">Theme Info with a <a class="underline-50 hover:underline-100" href="#">nested link</a> inside.</div>
<div class="p-3 theme-inverse theme-muted">Theme Inverse with a <a class="underline-50 hover:underline-100" href="#">nested link</a> inside.</div>
<div class="p-3 theme-secondary theme-muted">Theme Secondary with a <a class="underline-50 hover:underline-100" href="#">nested link</a> inside.</div>

比较

这里是每种主题颜色三种样式的并排比较，包括嵌套链接：

主要与一个链接

带有 a 的重音链接

成功与链接

有危险链接

带有警告链接

带有信息的链接

与a的逆链接

辅以链接

HTML

<div class="d-flex gap-2 mb-2">
  <div class="theme-primary theme-contrast p-3 flex-fill text-center rounded">Primary with a <a class="underline-50 hover:underline-100" href="#">link</a></div>
  <div class="theme-primary theme-subtle p-3 flex-fill text-center rounded">Primary with a <a class="underline-50 hover:underline-100" href="#">link</a></div>
  <div class="theme-primary theme-muted p-3 flex-fill text-center rounded">Primary with a <a class="underline-50 hover:underline-100" href="#">link</a></div>
</div>
<div class="d-flex gap-2 mb-2">
  <div class="theme-accent theme-contrast p-3 flex-fill text-center rounded">Accent with a <a class="underline-50 hover:underline-100" href="#">link</a></div>
  <div class="theme-accent theme-subtle p-3 flex-fill text-center rounded">Accent with a <a class="underline-50 hover:underline-100" href="#">link</a></div>
  <div class="theme-accent theme-muted p-3 flex-fill text-center rounded">Accent with a <a class="underline-50 hover:underline-100" href="#">link</a></div>
</div>
<div class="d-flex gap-2 mb-2">
  <div class="theme-success theme-contrast p-3 flex-fill text-center rounded">Success with a <a class="underline-50 hover:underline-100" href="#">link</a></div>
  <div class="theme-success theme-subtle p-3 flex-fill text-center rounded">Success with a <a class="underline-50 hover:underline-100" href="#">link</a></div>
  <div class="theme-success theme-muted p-3 flex-fill text-center rounded">Success with a <a class="underline-50 hover:underline-100" href="#">link</a></div>
</div>
<div class="d-flex gap-2 mb-2">
  <div class="theme-danger theme-contrast p-3 flex-fill text-center rounded">Danger with a <a class="underline-50 hover:underline-100" href="#">link</a></div>
  <div class="theme-danger theme-subtle p-3 flex-fill text-center rounded">Danger with a <a class="underline-50 hover:underline-100" href="#">link</a></div>
  <div class="theme-danger theme-muted p-3 flex-fill text-center rounded">Danger with a <a class="underline-50 hover:underline-100" href="#">link</a></div>
</div>
<div class="d-flex gap-2 mb-2">
  <div class="theme-warning theme-contrast p-3 flex-fill text-center rounded">Warning with a <a class="underline-50 hover:underline-100" href="#">link</a></div>
  <div class="theme-warning theme-subtle p-3 flex-fill text-center rounded">Warning with a <a class="underline-50 hover:underline-100" href="#">link</a></div>
  <div class="theme-warning theme-muted p-3 flex-fill text-center rounded">Warning with a <a class="underline-50 hover:underline-100" href="#">link</a></div>
</div>
<div class="d-flex gap-2 mb-2">
  <div class="theme-info theme-contrast p-3 flex-fill text-center rounded">Info with a <a class="underline-50 hover:underline-100" href="#">link</a></div>
  <div class="theme-info theme-subtle p-3 flex-fill text-center rounded">Info with a <a class="underline-50 hover:underline-100" href="#">link</a></div>
  <div class="theme-info theme-muted p-3 flex-fill text-center rounded">Info with a <a class="underline-50 hover:underline-100" href="#">link</a></div>
</div>
<div class="d-flex gap-2 mb-2">
  <div class="theme-inverse theme-contrast p-3 flex-fill text-center rounded">Inverse with a <a class="underline-50 hover:underline-100" href="#">link</a></div>
  <div class="theme-inverse theme-subtle p-3 flex-fill text-center rounded">Inverse with a <a class="underline-50 hover:underline-100" href="#">link</a></div>
  <div class="theme-inverse theme-muted p-3 flex-fill text-center rounded">Inverse with a <a class="underline-50 hover:underline-100" href="#">link</a></div>
</div>
<div class="d-flex gap-2 mb-2">
  <div class="theme-secondary theme-contrast p-3 flex-fill text-center rounded">Secondary with a <a class="underline-50 hover:underline-100" href="#">link</a></div>
  <div class="theme-secondary theme-subtle p-3 flex-fill text-center rounded">Secondary with a <a class="underline-50 hover:underline-100" href="#">link</a></div>
  <div class="theme-secondary theme-muted p-3 flex-fill text-center rounded">Secondary with a <a class="underline-50 hover:underline-100" href="#">link</a></div>
</div>

带组件

主题工具与支持主题的组件配合得很好。将主题颜色应用于容器，并在各个元素上使用主题样式类。

对比徽章细微徽章已静音徽章

HTML

<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>

你也可以通过将不同的.theme-{color}类应用到子元素，在同一个容器中混合主题颜色：

成功

警告

危险

HTML

<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>

重置

当嵌套子树应放弃继承的主题并返回组件默认值时使用 .theme-reset。详情请参见主题工具类。

主要徽章默认徽章

HTML

<div class="theme-primary p-3 rounded">
  <span class="badge theme-contrast">Primary badge</span>
  <span class="badge theme-reset">Default badge</span>
</div>

CSS

生成的 CSS

主题样式类生成以下 CSS：

CSS

          .theme-contrast {
  --theme-fg: var(--theme-contrast);
  --theme-fg-emphasis: var(--theme-contrast);
  background-color: var(--theme-bg);
  color: var(--theme-contrast);
}

.theme-subtle {
  background-color: var(--theme-bg-subtle);
  color: var(--theme-fg);
}

.theme-muted {
  --theme-fg: var(--theme-fg-emphasis);
  background-color: var(--theme-bg-muted);
  color: var(--theme-fg-emphasis);
}

Sass 工具 API

主题工具在我们的工具类 API scss/_utilities.scss 中声明。了解如何使用工具类 API。

scss/_utilities.scss

// 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-fg)
  ),
  class: theme-subtle,
  values: (null: null)
),
"theme-muted": (
  property: (
    "background-color": var(--theme-bg-muted),
    "color": var(--theme-fg-emphasis)
  ),
  class: theme-muted,
  values: (null: null)
),
"theme-border": (
  property: border,
  class: theme-border,
  values: (null: var(--border-width) solid var(--theme-border))
),