色彩（Color）

色彩（Colors）

Bootstrap 的調色盤在 v5.3.0 中持續擴充並變得更加細緻。我們為 secondary 和 tertiary 文字及背景色彩新增了新變數，以及為主題色彩新增了 {color}-bg-subtle、{color}-border-subtle 和 {color}-text-emphasis。這些新色彩可透過 Sass 和 CSS 變數使用（但不是我們的色彩 maps 或通用類別），明確目標是讓在淺色和深色等多種色彩模式中的客製化變得更容易。這些新變數在 :root 上全域設定，並針對我們新的深色模式進行調整，同時我們原始的主題色彩保持不變。

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

使用新色彩（Using the new colors）

這些新色彩可透過 CSS 變數和通用類別存取——如 --bs-primary-bg-subtle 和 .bg-primary-subtle——讓您可以使用變數組合自己的 CSS 規則，或透過類別快速套用樣式。這些通用類別是使用色彩相關的 CSS 變數建構的，由於我們為深色模式自訂了這些 CSS 變數，它們預設也會適應色彩模式。

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

主題色彩（Theme colors）

我們使用所有色彩的子集來建立較小的調色盤，用於產生色彩配置，這些也可作為 Sass 變數和 Sass map 在 Bootstrap 的 scss/_variables.scss 檔案中使用。

所有這些色彩都可作為 Sass map $theme-colors 使用。

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

查看我們的 Sass maps 和迴圈文件以了解如何修改這些色彩。

所有色彩（All colors）

所有 Bootstrap 色彩都可作為 Sass 變數和 Sass map 在 scss/_variables.scss 檔案中使用。為避免增加檔案大小，我們不為每個變數建立文字或背景色彩類別。相反，我們選擇這些色彩的子集作為主題調色盤。

在自訂色彩時，請務必監控對比度。如下所示，我們為每個主要色彩新增了三個對比度——一個用於色塊的目前色彩，一個用於與白色對比，一個用於與黑色對比。

Sass 注意事項（Notes on Sass）

Sass 無法以程式方式產生變數，因此我們手動為每個色調和陰影建立了變數。我們指定中點值（例如 $blue-500）並使用自訂色彩函式透過 Sass 的 mix() 色彩函式來調亮（tint）或調暗（shade）我們的色彩。

使用 mix() 與 lighten() 和 darken() 不同——前者將指定的色彩與白色或黑色混合，而後者僅調整每個色彩的亮度值。結果是一套更完整的色彩，如這個 CodePen 示範所示。

我們的 tint-color() 和 shade-color() 函式使用 mix() 結合我們的 $theme-color-interval 變數，該變數為我們產生的每個混合色彩指定一個階段性百分比值。請參閱 scss/_functions.scss 和 scss/_variables.scss 檔案以取得完整的原始碼。

色彩 Sass maps（Color Sass maps）

Bootstrap 的原始 Sass 檔案包含三個 maps，可幫助您快速輕鬆地迴圈遍歷色彩列表及其十六進位值。

• $colors 列出所有可用的基礎（500）色彩
• $theme-colors 列出所有語義命名的主題色彩（如下所示）
• $grays 列出所有灰色的色調和陰影

在 scss/_variables.scss 中，您會找到 Bootstrap 的色彩變數和 Sass map。以下是 $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
);

新增、移除或修改 map 中的值以更新它們在許多其他元件中的使用方式。很遺憾，目前並非_每個_元件都使用這個 Sass map。未來的更新將努力改進這一點。在那之前，請計劃使用 ${color} 變數和這個 Sass map。

範例（Example）

以下是您如何在 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 maps 自己產生這些。

1. 首先，確保您已引入我們的函式、變數、mixins 和 utilities。
2. 使用我們的 map-merge-multiple() 函式將多個 Sass maps 快速合併到一個新的 map 中。
3. 合併這個新的組合 map 以擴充任何具有 {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} 通用類別。您也可以對任何其他通用類別和屬性執行相同操作。