Bootstrap5 颜色

Bootstrap 由广泛的颜色系统支持，该系统以我们的样式和组件为主题。这可以为任何项目提供更全面的定制和扩展。

主题色

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

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

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

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

所有颜色

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

在定义颜色时一定要注意查看对比度。如下图所示，为每种主颜色添加了三种对比度，一种是针对当前的颜色，一种是针对白色，另一种是针对黑色。

Sass 的注意事项

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

usingmix()与lighten()and 不同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 映射。这是$colorsSass 映射的示例：

$colors: (
  "blue":       $blue,
  "indigo":     $indigo,
  "purple":     $purple,
  "pink":       $pink,
  "red":        $red,
  "orange":     $orange,
  "yellow":     $yellow,
  "green":      $green,
  "teal":       $teal,
  "cyan":       $cyan,
  "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颜色值。

生成实用程序

在 v5.1.0 中添加

引导不包括color与background-color每一个颜色可变的实用程序，但你可以与我们产生这些自己实用API和我们的扩展映射萨斯在V5.1.0增加。

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

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

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@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}每种颜色和级别生成新的实用程序。您也可以对任何其他实用程序和财产执行相同的操作。