颜色

颜色

¥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 颜色都可用作 scss/_variables.scss 文件中的 Sass 变量和 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)

  ¥$colors lists all our available base (500) colors

• $theme-colors 列出了所有语义命名的主题颜色（如下所示）

  ¥$theme-colors lists all semantically named theme colors (shown below)

• $grays 列出了所有灰色色调和阴影

  ¥$grays lists all tints and shades of gray

在 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;
}

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

¥Color and background utility classes are also available for setting color and background-color using the 500 color values.

生成工具

¥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. 首先，请确保你已导入我们的函数、变量、混合宏和实用程序。

   ¥To start, make sure you’ve imported our functions, variables, mixins, and utilities.

2. 使用我们的 map-merge-multiple() 函数可以快速将多个 Sass 映射合并到一个新映射中。

   ¥Use our map-merge-multiple() function to quickly merge multiple Sass maps together in a new map.

3. 合并这个新的组合映射以扩展具有 {color}-{level} 类名的任何工具。

   ¥Merge this new combined map to extend any utility with a {color}-{level} class name.

以下是使用上述步骤生成文本颜色实用程序（例如 .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.