Color 颜色系统

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

颜色 

在 v5.3.0 中添加

Bootstrap 的调色板在 v5.3.0 中不断扩展并变得更加细致入微。我们为 和 文本和背景颜色添加了新变量，以及 、 和主题颜色。这些新颜色可通过 Sass 和 CSS 变量（但不是我们的颜色贴图或实用程序类）获得，其明确目标是更容易跨多种颜色模式（如浅色和深色）进行自定义。这些新变量是全局设置的，并针对我们新的深色模式进行了调整，而我们原来的主题颜色保持不变。secondarytertiary{color}-bg-subtle{color}-border-subtle{color}-text-emphasis:root

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

小心！我们新的辅助色和第三色、现有的辅助主题色以及浅色和深色主题色可能会产生一些混淆。预计这个问题将在 v6 中得到解决。

使用新颜色 

这些新颜色可通过 CSS 变量和实用程序类（如 和 ）访问，允许您使用变量编写自己的 CSS 规则，或通过类快速应用样式。这些实用程序是使用颜色关联的 CSS 变量构建的，并且由于我们为深色模式自定义了这些 CSS 变量，因此它们默认也适应颜色模式。--bs-primary-bg-subtle.bg-primary-subtle

[html]

<div class="p-3 text-primary-emphasis bg-primary-subtle border border-primary-subtle rounded-3">
  带有实用程序的示例元素
</div>

主题颜色 

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

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

scss/_variables.scss

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

使用 is not same as and —前者将指定的颜色与白色或黑色混合，而后者仅调整每种颜色的亮度值。结果是一套更完整的颜色，如此 CodePen 演示所示。mix()lighten()darken()

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

彩色 Sass 贴图 

Bootstrap 的源 Sass 文件包括三个映射，可帮助您快速轻松地循环浏览颜色列表及其十六进制值。

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

在 中，您会找到 Bootstrap 的颜色变量和 Sass 贴图。以下是 Sass 映射的示例：scss/_variables.scss$colors

scss/_variables.scss

$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 映射。未来的更新将努力改进这一点。在那之前，计划使用变量和这个 Sass 映射。${color}

例 

以下是如何在 Sass 中使用这些：

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

颜色和背景实用程序类也可用于设置和使用颜色值。colorbackground-color500

发电公用事业 

在 v5.1.0 中添加

Bootstrap 不包括每个颜色变量的 和 实用程序，但您可以使用我们的实用程序 API 和 v5.1.0 中添加的扩展 Sass 贴图自行生成这些变量。colorbackground-color

1. 首先，请确保您已导入我们的函数、变量、mixin 和实用程序。
2. 使用我们的函数将多个 Sass 地图快速合并到一个新地图中。map-merge-multiple()
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}