颜色

颜色

Bootstrap 的颜色调色板在 v5.3.0 中继续扩展并变得更加细致。我们为 secondary 和 tertiary 的文本和背景颜色，以及我们的主题颜色的 {color}-bg-subtle、{color}-border-subtle 和 {color}-text-emphasis 添加了新变量。这些新颜色可以通过 Sass 和 CSS 变量使用（但不能通过我们的颜色映射或工具类使用），其明确目标是使在浅色和深色等多种颜色模式之间进行自定义更容易。这些新变量在全局范围内设置在 :root 上，并适用于我们的新深色模式，而我们的原始主题颜色保持不变。

以……结尾的颜色 -rgb 提供 red, green, blue 用于…的值 rgb() 和 rgba() 色彩模式。例如， rgba(var(--bs-secondary-bg-rgb), .5).

使用新颜色

这些新颜色可通过 CSS 变量和工具类访问——例如 --bs-primary-bg-subtle 和 .bg-primary-subtle——允许你使用这些变量自行组合 CSS 规则，或通过类快速应用样式。这些工具类是基于颜色的相关 CSS 变量构建的，由于我们为深色模式自定义了这些 CSS 变量，它们默认也能适应颜色模式。

<div class="p-3 text-primary-emphasis bg-primary-subtle border border-primary-subtle rounded-3">
  Example element with utilities
</div>

主题颜色

我们使用所有颜色的子集来创建一个较小的颜色调色板用于生成配色方案，这些颜色也可以作为 Sass 变量和 Bootstrap scss/_variables.scss 文件中的 Sass 映射使用。

所有这些颜色都可以作为 Sass 映射使用，$theme-colors。

$theme-colors: (
  "primary":    $primary,
  "secondary":  $secondary,
  "success":    $success,
  "info":       $info,
  "warning":    $warning,
  "danger":     $danger,
  "light":      $light,
  "dark":       $dark
);

查看我们的 Sass Map 和循环文档，了解如何修改这些颜色。

所有颜色

所有 Bootstrap 颜色都可以作为 Sass 变量和 Sass 映射在 scss/_variables.scss 文件中使用。为了避免增加文件大小，我们不会为每个变量创建文本或背景颜色类。相反，我们为 主题调色板 选择这些颜色的一个子集。

在自定义颜色时，请确保监控对比度比率。如下面所示，我们已经为每种主要颜色添加了三个对比度比率——一个用于调色板的当前颜色，一个用于与白色对比，一个用于与黑色对比。

关于 Sass 的说明

Sass 无法以编程方式生成变量，因此我们手动为每个色调和阴影创建了变量。我们指定中间值（例如 $blue-500），并使用自定义颜色函数通过 Sass 的 mix() 颜色函数来为颜色着色（变亮）或加深（变暗）。

使用mix()与lighten()和darken()不同——前者将指定的颜色与白色或黑色混合，而后者仅调整每种颜色的亮度值。结果是一个更完整的颜色组合。

我们的tint-color()和shade-color()函数使用mix()以及我们的$theme-color-interval变量，该变量为我们生成的每种混合颜色指定了分步百分比值。完整源代码请参见scss/_functions.scss和scss/_variables.scss文件。

颜色 Sass 映射

Bootstrap 的源 Sass 文件包含三个映射，帮助你快速轻松地遍历颜色列表及其十六进制值。

• $colors 列出我们所有可用的基础（500）颜色
• $theme-colors 列出所有语义命名的主题颜色（如下所示）
• $grays 列出所有灰色的色调和阴影

在 scss/_variables.scss 中，你会找到 Bootstrap 的颜色变量和 Sass 映射。下面是 $colors Sass 映射的一个示例：

$colors: (
  "blue":       $blue,
  "indigo":     $indigo,
  "purple":     $purple,
  "pink":       $pink,
  "red":        $red,
  "orange":     $orange,
  "yellow":     $yellow,
  "green":      $green,
  "teal":       $teal,
  "cyan":       $cyan,
  "black":      $black,
  "white":      $white,
  "gray":       $gray-600,
  "gray-dark":  $gray-800
);

在映射中添加、删除或修改值，以更新它们在许多其他组件中的使用方式。不幸的是，目前并非每个组件都使用此 Sass 映射。未来的更新将努力改进这一点。在此之前，请计划使用 ${color} 变量和此 Sass 映射。

示例

以下是你可以在 Sass 中使用它们的方法：

.alpha { color: $purple; }
.beta {
  color: $yellow-300;
  background-color: $indigo-900;
}

颜色 和 背景 工具类也可用于设置 color 和 background-color 使用 500 颜色值。

生成工具类

Bootstrap 并没有为每个颜色变量提供 color 和 background-color 工具类，但你可以使用我们的 工具 API 和在 v5.1.0 中新增的扩展 Sass 映射自行生成这些工具类。

1. 首先，确保你已经导入了我们的函数、变量、mixin和工具。
2. 使用我们的map-merge-multiple()函数，将多个Sass映射快速合并到一个新的映射中。
3. 将这个新的组合映射合并，以使用{color}-{level}类名扩展任何工具。

这是一个使用上述步骤生成文本颜色工具类（例如 .text-purple-500）的示例。

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/variables-dark";
@import "bootstrap/scss/maps";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/utilities";
$all-colors: map-merge-multiple($blues, $indigos, $purples, $pinks, $reds, $oranges, $yellows, $greens, $teals, $cyans);
$utilities: map-merge(
$utilities,
(
"color": map-merge(
map-get($utilities, "color"),
(
values: map-merge(
map-get(map-get($utilities, "color"), "values"),
(
$all-colors
),
),
),
),
)
);
@import "bootstrap/scss/utilities/api";

这将为每种颜色和等级生成新的.text-{color}-{level}工具类。你也可以对任何其他工具类和属性做同样的操作。