颜色
在 Bootstrap 的新颜色系统中，有 16 种颜色的 13 个色调，这意味着在使用 Bootstrap 时我们可以使用 208 种颜色。
所有 Bootstrap 颜色都可以作为 Sass 变量以及 scss/_config.scss 文件中的 Sass map使用。为了避免文件大小增加，我们不会为每个变量创建文本或背景颜色类。相反，我们会为 主题调色板 选择其中的一部分颜色。
在自定义颜色时，请确保监控对比度比率。如下面所示，我们已经为每种主要颜色添加了三个对比度比率——一个用于调色板的当前颜色，一个用于与白色对比，一个用于与黑色对比。
蓝色
靛蓝
紫罗兰
紫色
粉色
红色
橙色
琥珀
黄色
酸橙
绿色
青绿色
青色
棕色
灰色
白铜
附加
它是如何工作的
Bootstrap 使用一系列 Sass 变量和一个名为 $colors 的 Sass map（位于 scss/_colors.scss 中）生成颜色。这些是我们的基础颜色——蓝色、靛青色、紫罗兰色等——用于生成你上面看到的每种颜色的色调和阴影。你可以通过在 $colors 映射中添加或移除颜色来自定义这些颜色。
默认颜色
以下是我们的默认颜色列表。颜色在 Bootstrap 中是独特的，因为它们默认仍然是 Sass 变量。此外，它们采用 oklch() 格式，这是一种旨在感知上均匀的现代颜色空间。
$blue: oklch(60% 0.24 240);
$indigo: oklch(56% 0.26 288);
$violet: oklch(56% 0.24 300);
$purple: oklch(56% 0.24 320);
$pink: oklch(60% 0.22 4);
$red: oklch(60% 0.22 20);
$orange: oklch(70% 0.22 52);
$amber: oklch(79% 0.2 78);
$yellow: oklch(88% 0.24 88);
$lime: oklch(65% 0.24 135);
$green: oklch(64% 0.22 160);
$teal: oklch(68% 0.22 190);
$cyan: oklch(69% 0.22 220);
$brown: oklch(60% 0.12 54);
$gray: oklch(60% 0.02 245);
$pewter: oklch(65% 0.01 290);
上述颜色随后被转换成一个名为 $colors 的 Sass map。
$colors: ();
// stylelint-disable-next-line scss/dollar-variable-default
$colors: defaults(
(
"blue": $blue,
"indigo": $indigo,
"violet": $violet,
"purple": $purple,
"pink": $pink,
"red": $red,
"orange": $orange,
"amber": $amber,
"yellow": $yellow,
"lime": $lime,
"green": $green,
"teal": $teal,
"cyan": $cyan,
"brown": $brown,
"gray": $gray,
"pewter": $pewter,
),
$colors
);
颜色混合
如前所述，我们使用color-mix()函数生成每种颜色的浅色（色调）和深色（阴影）版本。这使我们能够快速且轻松地生成完整的色彩范围。
色彩的明暗停点、color-mix()色彩空间以及混合颜色都可以自定义。
$color-mix-space: oklch;
$tint-color: var(--white);
$shade-color: var(--black);
$color-tints: ();
// stylelint-disable-next-line scss/dollar-variable-default
$color-tints: defaults(
(
"025": 94%,
"050": 90%,
"100": 80%,
"200": 60%,
"300": 40%,
"400": 20%,
),
$color-tints
);
$color-shades: ();
// stylelint-disable-next-line scss/dollar-variable-default
$color-shades: defaults(
(
"600": 16%,
"700": 32%,
"800": 48%,
"900": 64%,
"950": 70%,
"975": 76%,
),
$color-shades
);
这些选项和 $colors 映射用于生成 $color-tokens 映射，该映射作为 CSS 自定义属性输出到 :root 上。
$color-tokens: ();
$-color-defaults: ();
@each $color, $value in $colors {
@each $stop, $percent in $color-tints {
$-color-defaults: map.set($-color-defaults, --#{$color}-#{$stop}, color-mix(in #{$color-mix-space}, #{$tint-color} #{$percent}, #{$value}));
}
$-color-defaults: map.set($-color-defaults, --#{$color}-500, #{$value});
@each $stop, $percent in $color-shades {
$-color-defaults: map.set($-color-defaults, --#{$color}-#{$stop}, color-mix(in #{$color-mix-space}, #{$shade-color} #{$percent}, #{$value}));
}
}
// stylelint-disable-next-line scss/dollar-variable-default
$color-tokens: defaults($-color-defaults, $color-tokens);
在实践中，我们从中输出的 CSS 变量看起来像这样：
// Example generated custom properties from _colors.scss
--bs-blue-025: color-mix(in lab, var(--bs-white) 94%, oklch(60% 0.24 240));
--bs-blue-050: color-mix(in lab, var(--bs-white) 90%, oklch(60% 0.24 240));
--bs-blue-100: color-mix(in lab, var(--bs-white) 80%, oklch(60% 0.24 240));
// ...
--bs-blue-500: oklch(60% 0.24 240);
// ...
--bs-blue-900: color-mix(in lab, var(--bs-black) 64%, oklch(60% 0.24 240));
--bs-blue-975: color-mix(in lab, var(--bs-black) 88%, oklch(60% 0.24 240));
我们使用 CSS 变量 var(--bs-white) 和 var(--bs-black) 来防止 LightningCSS 将实时混合转换为静态 lab() 值。不幸的是，目前无法在 LightningCSS 中禁用此功能。
自定义
你可以通过在$colors地图中添加或移除颜色来自定义颜色。你还可以自定义色调和阴影刻度、color-mix()颜色空间以及混合颜色。比如，你想添加另一种蓝灰色，比如板岩色。
- 为新颜色创建一个新的 Sass 变量，使用
oklch()格式。 - 将新颜色添加到
$colors映射中。 - 重新编译源 Sass 以生成新颜色。
这就是它的样子：
$slate: oklch(55% 0.07 260);
@use "bootstrap" as * with (
$colors: (
"slate": $slate,
),
);
要移除颜色，将值设置为 null。
@use "bootstrap" as * with (
$colors: (
"pewter": null,
),
);
从颜色到主题
上面的--bs-{color}-{stop}令牌是原始调色板。它们本身不会为组件添加样式——Bootstrap将其中选择的一部分输入到主题层，在该层中它们被分配语义角色（背景、前景、边框等），并以.theme-*类的形式呈现，组件可以读取这些类。
完整的流程如下：
$colors(scss/_colors.scss) 定义基本色调并生成--bs-{color}-{stop}代币（例如--bs-blue-500）。$theme-colors(scss/_theme.scss) 将语义名称（primary,success,danger等）映射到这些代币上，每次一个角色（base,fg,bg,bg-subtle,border,contrast, …），大多数包裹在light-dark()中以适应颜色模式。- 这些角色被作为
--bs-{name}-{role}代币发出（例如--bs-primary-bg）。 .theme-{name}类将它们重新映射到通用--bs-theme-{role}代币上（例如.theme-primary设置--bs-theme-bg: var(--bs-primary-bg)）。- 组件 读取
--bs-theme-*代币，因此单个.theme-primary类可以重新样式化任何主题感知组件。
主题层——语义标记、.theme-* 类、层颜色和颜色模式——在 主题页面 上有完整文档。本页的其余部分保持在基础颜色层。
生成工具类
Bootstrap 不会发货 color 和 background-color 每个调色板标记的工具——这会增加很多很少使用的 CSS。如果你只需要几个特定的色调作为工具，可以通过添加一个工具组来实现 工具类 API. 配置 $utilities 导入时映射 utilities，然后加载 utilities/api 输出 CSS。每个值指向一个生成的颜色令牌（--bs-{color}-{stop}):
@use "../node_modules/bootstrap/scss/utilities" with (
$utilities: (
"fg-palette": (
property: color,
class: fg,
values: (
"purple-300": var(--bs-purple-300),
"purple-500": var(--bs-purple-500),
"purple-700": var(--bs-purple-700),
),
),
)
);
@use "../node_modules/bootstrap/scss/utilities/api";
这增加了 .fg-purple-300, .fg-purple-500，和 .fg-purple-700. Bootstrap 将你的入口合并到默认之上 $utilities 映射，因此内置工具类保持不变。列出你需要的任意多的颜色，并设置 property: background-color 与 class: bg 改为生成背景。（颜色标记本身来自你的主要 Bootstrap 导入；此代码片段仅生成额外的工具类。）