カラーシステム（Color）

カラーパレット（Colors）v5.3.0新設

Bootstrapのカラーパレットは、v5.3.0でも拡張を続け、よりニュアンスのあるものになり、secondary（二次）と tertiary（三次）の文字色と背景色用の新しい変数とテーマカラー用の {color}-bg-subtle, {color}-border-subtle, {color}-text-emphasis を追加。これらの新しい色はSassとCSS変数（カラーマップやユーティリティクラスではない）で利用可能で、ライトやダークなど複数のカラーモードでのカスタマイズを容易にすることを明確な目標としている。これらの新しい変数は :root でグローバルに設定され、元のテーマカラーを変更せずに新しいダークカラーモードに適応される。

rgb で終わるカラーは、rgb() や rgba() のカラーモードで使用する赤、緑、青の値を提供する（例：rgba(var(-bs-secondary-bg-rgb), .5)）。

新色を使用（Using the new colors）v5.3.0新設

これらの新しい色には、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">
  ユーティリティを使用した要素の例。
</div>

テーマカラー（Theme colors）v5.0.0-alpha3設定変更

すべての色のサブセットを使用して、配色を生成するための小さなカラーパレットを作成。これは、Sass変数とBootstrapの scss/_variables.scss 内のSassマップとしても使用できる。

見本

デフォルトの設定

scss/_variables.scss 内 theme-colors-map の設定$theme-colors: (
  "primary":    $primary,
  "secondary":  $secondary,
  "success":    $success,
  "info":       $info,
  "warning":    $warning,
  "danger":     $danger,
  "light":      $light,
  "dark":       $dark
);

全てのカラー（All colors）v5.0.0-alpha2設定変更

全てのBootstrapのカラーは、Sass変数（$colors）とSassマップとして scss/_variables.scss で使用できる。ファイルサイズの増加を回避するため、これらの変数のそれぞれのクラスは作成していない。代わりに、テーマパレットでこれらのカラーのサブセットを選択する。

色をカスタマイズするときは、必ずコントラスト比を監視してください。以下に示すように、メインの各色に3つのコントラスト比を追加（1番目は文字色（#fff または #000）に対して、2番めは白（#fff）に対して、3番目は黒（#000）に対するコントラスト比）。

見本 $xxx は変数名、$xxx-500 は $xxx と同色

Sassに関する注意（Notes on Sass）

Sassはプログラムで変数を生成できないため、すべての色合いと陰影用に手動で変数を作成する必要がある。Bootstrapでは、中間値（例：$blue-500）を指定し、カスタムカラー関数を使用して、Sassの mix() カラー関数を経由て色を色合い（明るさ）や陰影（暗さ）をつけている。

mix() の使用方法は lighten() や darken() と同じではない。前者は指定された色を白や黒とブレンドするが、後者は各色の明度値のみを調整する。このCodePenのデモに示すように、結果はより完全な色の組み合わせができる。

tint-color() 関数と shade-color() 関数では、$theme-color-interval 変数と一緒に mix() を使用して、生成する各混合色の段階的なパーセント値を指定。完全なソースコードは、scss/_functions.scss と scss/_variables.scss 内にある。

カラーSassマップ（Color Sass maps）v5.2.0変更

BootstrapのソースSassファイルには3つのマップが組み込まれており、カラーとその16進値のリストを迅速に簡単にループする。

• $colors は、使用可能なすべてのベース（500）カラーをリスト（以下に表示）
• $theme-colors は、意味的に名前が付けられたすべてのテーマカラーをリスト（テーマカラーに表示済）
• $grays は、すべてのグレーの色合いと陰影をリスト

scss/_variables.scss 内に、Bootstrapのカラー変数とSassマップがある。以下に、$colors Sassマップの例を表示：

デフォルトの設定

scss/_variables.scss 内 colors-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マップを使用する。

実例（Example）

Sassでこれらを使用する方法は以下のとおり：

設定例

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

カラーユーティリティクラスと背景色ユーティリティクラスも 500 カラー値を使用して、color と background-color の設定に利用できる。

ユーティリティの生成（Generating utilities）v5.1.0追加、v5.3.0設定変更

Bootstrapには、すべての色変数の color と background-color ユーティリティが組み込まれているわけではないが、v5.1.0で追加されたユーティリティAPIと拡張Sassマップを使用すれば、これらを自分で生成できる。

1. まず、関数、変数、ミックスイン、ユーティリティをインポートしたことを確認。
2. map-merge-multiple() 関数を使用して、複数のSassマップを新しいマップにすばやくマージ。
3. この新しい結合マップをマージして、{color}-{level} クラス名でユーティリティを拡張する。

上記の手順を使用してテキストカラーユーティリティ（例：.text-purple-500）を生成する例を以下に表示。

Bootstrap5.3.0の設定例 緑背景が5.2.0以降の変更箇所

custom.scss@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} ユーティリティが生成される。他のユーティリティやプロパティについても同じことができる。