颜色

颜色

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

以 -rgb 结尾的颜色提供了用于 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>

主题颜色

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

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

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

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

所有颜色

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

在自定义颜色时，请务必监控对比度。如下图所示，我们为每种主要颜色添加了三种对比度–一种是色块的当前颜色，一种是白色，还有一种是黑色。

关于 Sass 的说明

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

使用mix()与lighten()和darken()不同–前者将指定的颜色与白色或黑色混合，而后者只调整每种颜色的明度值。结果是一套更完整的颜色，如CodePen 演示所示。

我们的 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;
}

颜色和背景实用程序类也可用来使用 500颜色值设置 颜色和 背景颜色。

生成 utilities

Bootstrap 并不包含针对所有颜色变量的 color 和 background-color 工具，但您可以使用我们的 utility API 和 v5.1.0 中添加的扩展 Sass 映射自行生成这些工具。

1. 首先，确保你已经导入了我们的函数、变量、mixins 和实用工具。
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} 工具。您也可以对任何其他实用程序和属性执行同样的操作。