Color

颜色

Bootstrap的调色板在v5.3.0中不断扩展，变得更加细致入微。 我们为 文本和背景颜色添加了新的 secondary tertiary变量，此外{color}-bg-subtle, {color}-border-subtle，以及{color}-text-emphasis为我们的主题颜色。 这些新颜色可通过Sass和CSS变量（但不是我们的color maps 或 utility classe）获得，其重要目的是更容易在浅色和深色等多种颜色模式下进行自定义。 这些新变量全局设置在:root上，并适用于我们新的深色模式，而我们的原始主题颜色保持不变。

以-rgb结尾的颜色提供红、绿、蓝值，用于rgb()和rgba()颜色模式。 例如，rgba（var（-bs-secondary bg-rgb），.5）。

使用新颜色

这些新颜色可以通过CSS变量和工具集类访问，如--bs-priminary-bg-minute和.bg-primary-aminute，允许你用这些变量组成自己的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 Map。

所有这些颜色都可用作Sass Map $theme-colors。

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

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

所有颜色

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

在自定义颜色时，一定要监控对比度。 如下所示，我们为每种主要颜色添加了三个对比度——一个用于样例的当前颜色，一个用于对比白色，一个针对对比黑色。

Sass笔记

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

使用mix()与lighten()和dark()不同——前者将指定的颜色与白色或黑色混合，而后者仅调整每种颜色的亮度值。 结果是一套更完整的颜色，如在这个CodePen演示中所示.

我们的tint-color()和shade-color())函数在$theme-color-interval变量的旁边使用mix()，该变量为我们生成的每个混合颜色指定一个阶梯百分比值。 有关完整的源代码，请参阅scss/_functions.scss和scss/_variables.scss`文件。

Color Sass maps

Bootstrap的源Sass文件包括三个 Map，可以帮助你快速轻松地循环显示颜色及其十六进制值。

• $colors lists all our available base (500) colors
• $theme-colors lists all semantically named theme colors (shown below)
• $grays lists all tints and shades of gray

在“scss/_variables.scss”中，你可以找到Bootstrap的颜色变量和Sass映射。 以下是 $colors Sass Map 的示例：

$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
);

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

实例

以下是如何在Sass中使用：

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

Color 和 background 实用程序类也可用于使用500颜色值设置Color和background Color。

生成颜色工具集

Bootstrap不包括每个颜色变量的color和background-color工具集，但你可以使用我们的 utility API 和v5.1.0中添加的扩展Sass Map自行生成这些工具集。

1. 首先，请确保您已经导入了我们的函数、变量、mixin和实用程序。 2 .使用我们的map-merge-multiple()函数将多个Sass Map 快速合并到一个新 Map中。
2. 合并这个新的组合 Map 以扩展任何实用程序{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}用于每种颜色和级别的工具集。 你也可以对任何其他工具集和属性执行同样的操作。