颜色

颜色

🌐 Colors

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

🌐 Bootstrap’s color palette has continued to expand and become more nuanced in v5.3.0. We’ve added new variables for secondary and tertiary text and background colors, plus {color}-bg-subtle, {color}-border-subtle, and {color}-text-emphasis for our theme colors. These new colors are available through Sass and CSS variables (but not our color maps or utility classes) with the express goal of making it easier to customize across multiple colors modes like light and dark. These new variables are globally set on :root and are adapted for our new dark color mode while our original theme colors remain unchanged.

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

🌐 Colors ending in -rgb provide the red, green, blue values for use in rgb() and rgba() color modes. For example, rgba(var(--bs-secondary-bg-rgb), .5).

使用新颜色

🌐 Using the new colors

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

🌐 These new colors are accessible via CSS variables and utility classes—like --bs-primary-bg-subtle and .bg-primary-subtle—allowing you to compose your own CSS rules with the variables, or to quickly apply styles via classes. The utilities are built with the color’s associated CSS variables, and since we customize those CSS variables for dark mode, they are also adaptive to color mode by default.

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

主题颜色

🌐 Theme colors

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

🌐 We use a subset of all colors to create a smaller color palette for generating color schemes, also available as Sass variables and a Sass map in Bootstrap’s scss/_variables.scss file.

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

🌐 All these colors are available as a Sass map, $theme-colors.

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

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

🌐 Check out our Sass maps and loops docs for how to modify these colors.

所有颜色

🌐 All colors

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

🌐 All Bootstrap colors are available as Sass variables and a Sass map in scss/_variables.scss file. To avoid increased file sizes, we don’t create text or background color classes for each of these variables. Instead, we choose a subset of these colors for a theme palette.

在自定义颜色时，请务必监控对比度比率。如下面所示，我们已为每个主色添加了三个对比度比率——一个针对色板的当前颜色，一个针对白色，一个针对黑色。

🌐 Be sure to monitor contrast ratios as you customize colors. As shown below, we’ve added three contrast ratios to each of the main colors—one for the swatch’s current colors, one for against white, and one for against black.

Sass 注释

🌐 Notes on Sass

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

🌐 Sass cannot programmatically generate variables, so we manually created variables for every tint and shade ourselves. We specify the midpoint value (e.g., $blue-500) and use custom color functions to tint (lighten) or shade (darken) our colors via Sass’s mix() color function.

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

🌐 Using mix() is not the same as lighten() and darken()—the former blends the specified color with white or black, while the latter only adjusts the lightness value of each color. The result is a much more complete suite of colors, as shown in this CodePen demo.

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

🌐 Our tint-color() and shade-color() functions use mix() alongside our $theme-color-interval variable, which specifies a stepped percentage value for each mixed color we produce. See the scss/_functions.scss and scss/_variables.scss files for the full source code.

彩色 Sass 映射

🌐 Color Sass maps

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

🌐 Bootstrap’s source Sass files include three maps to help you quickly and easily loop over a list of colors and their hex values.

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

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

🌐 Within scss/_variables.scss, you’ll find Bootstrap’s color variables and Sass map. Here’s an example of the $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
);

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

🌐 Add, remove, or modify values within the map to update how they’re used in many other components. Unfortunately at this time, not every component utilizes this Sass map. Future updates will strive to improve upon this. Until then, plan on making use of the ${color} variables and this Sass map.

示例

🌐 Example

以下是如何在 Sass 中使用它们：

🌐 Here’s how you can use these in your Sass:

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

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

生成工具

🌐 Generating utilities

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

🌐 Bootstrap doesn’t include color and background-color utilities for every color variable, but you can generate these yourself with our utility API and our extended Sass maps added in v5.1.0.

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

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

🌐 Here’s an example that generates text color utilities (e.g., .text-purple-500) using the above steps.

@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} 工具。你也可以对任何其他工具和属性执行相同的操作。

🌐 This will generate new .text-{color}-{level} utilities for every color and level. You can do the same for any other utility and property as well.