カラー

カラー

Bootstrapのカラーパレットは、v5.3.0でも拡張を続け、よりニュアンス豊かになっています。新しい変数として、secondaryとtertiaryのテキストと背景色、そしてテーマカラーとして{color}-bg-subtle、{color}-border-subtle、{color}-textを追加しました。これらの新しい色はSassとCSS変数（カラーマップやユーティリティクラスではありません）を通して利用可能で、lightやdarkのような複数のカラーモードでのカスタマイズを容易にするという明確な目標があります。これらの新しい変数は:rootにグローバルに設定され、新しいダークカラーモードに適用されます。

-rgbで終わる色はrgb()とrgba()カラーモードで使用するred, green, blueの値を提供します。例えば、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マップとして利用できます。ファイルサイズの増大を防ぐために、これらのカラーにはそれぞれテキストカラーや背景カラーとしてのクラスを設けていません。代わりに選出したカラーをテーマパレットとして用意しています。

カラーをカスタマイズする際には、コントラスト比に注目してください。以下に示すように、それぞれのメインカラーに3つのコントラスト比を用意しています。それぞれ、スウォッチの現在のカラーに対して、白色に対して、そして黒色に対してです。

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マップ

BootstrapのソースSassファイルには、色のリストとそのhex値を簡単にループできる3つのマップがあります。

• $colorsは全てのベース (500) カラーを持っています。
• $theme-colorsは意味のある名前を持ったテーマカラーを持っています。
• $graysはグレーの全ての明るさ違いの色を持っています。

scss/_variables.scss内には、Bootstrapの色変数とSassマップがあります。以下が$colorsSassマップの例です:

$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マップを利用しているわけではありません。今後のアップデートでは改良が行われる予定です。それまでは、このSassマップに${color}変数を追加することを検討してください。

実例

以下がSassでこれらを使う例です:

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

カラーと背景を用いることでも、500カラー値を使ったcolorとbackground-colorの設定を行うことができます。

ユーティリティの作成

Bootstrapには、すべての色変数に対するcolorとbackground-colorユーティリティは含まれていませんが、BootstrapのユーティリティAPIとv5.1.0で追加された拡張Sassマップを使って、これらを自分で生成することができます。

1. まず、関数、変数、mixin、ユーティリティをインポートしたことを確認してください。
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}ユーティリティが生成されます。他のユーティリティやプロパティについても同様に行うことができます。