顏色

顏色

Bootstrap 的調色盤在 v5.3.0 中持續擴充並變得更細緻。我們新增了 `secondary` 和 `tertiary` 文字和背景顏色的新變數，加上 `{color}-bg-subtle`、`{color}-border-subtle` 和 `{color}-text-emphasis` 給我們的佈景主題顏色。這些新顏色可透過 Sass 和 CSS 變數（但不是我們的顏色對應或實用程式類別）取得，其明確目標是讓自訂化在多種色彩模式（例如淺色和深色）中變得更容易。這些新變數會在 `:root` 上設定為全域，並針對我們新的深色模式進行調整，而我們原本的佈景主題顏色則維持不變。

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

使用新的顏色

這些新顏色可透過 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>

主題顏色

我們使用所有顏色的子集來建立較小的調色盤，以產生配色方案，也可以在 Bootstrap 的 scss/_variables.scss 檔案中作為 Sass 變數和 Sass 地圖取得。

所有這些顏色都可以作為 Sass 地圖 $theme-colors 取得。

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

查看 我們的 Sass 地圖和迴圈文件，了解如何修改這些顏色。

所有顏色

所有 Bootstrap 顏色都可以在 scss/_variables.scss 檔案中作為 Sass 變數和 Sass 地圖取得。為了避免檔案大小增加，我們不會為每個變數建立文字或背景顏色類別。相反地，我們會從這些顏色中選擇一個子集作為 主題調色盤。

自訂顏色時，請務必監控對比度。如下所示，我們已針對每個主要顏色新增三個對比度，一個是色票的目前顏色，一個是對比白色，另一個是對比黑色。

Sass 備註

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

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

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

色彩 Sass 地圖

Bootstrap 的原始 Sass 檔案包含三個地圖，可協助您快速且輕鬆地迴圈一組色彩及其十六進位值。

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

在 scss/_variables.scss 中，您會找到 Bootstrap 的色彩變數和 Sass 地圖。以下是 $colors Sass 地圖的範例

$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 地圖。

範例

以下是如何在 Sass 中使用這些內容

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

色彩 和 背景 實用程式類別也可使用 500 色彩值設定 color 和 background-color。

產生實用程式

Bootstrap 並未針對每個色彩變數包含 color 和 background-color 實用程式，但您可以使用我們的 實用程式 API 和在 v5.1.0 中新增的延伸 Sass 地圖自行產生這些實用程式。

1. 首先，請確定您已匯入我們的函數、變數、混合和實用程式。
2. 使用我們的 map-merge-multiple() 函數，將多個 Sass 地圖快速合併到新的地圖中。
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} 實用程式。您也可以對任何其他實用程式和屬性執行相同的動作。