カラーシステム(Color)
Bootstrapは、スタイルとコンポーネントにテーマを設定する広範なカラーシステムをサポート。これによりプロジェクトのより包括的なカスタマイズと拡張ができる。
テーマカラー(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
);
【デフォルトでの設定】
- Primary(
$primary
)=$blue
- Secondary(
$secondary
)=$gray-600
- Success(
$success
)=$green
- Info(
$info
)=$cyan
- Warning(
$warning
)=$yellow
- Danger(
$danger
)=$red
- Light(
$light
)=$gray-100
- Dark(
$dark
)=$gray-900
【変更履歴】
- 【v5.0.0-alpha3】
- Dark(
$dark
):$gray-800
⇒$gray-900
- 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
と同色
【変更履歴】
- 【v5.0.0-alpha1】
- $blue: #007bff ⇒ #0d6efd(コントラスト比を4.5以上にするために変更)
- $pink: #e83e8c ⇒ #d63384(コントラスト比を4.5以上にするために変更)
- 各色の陰影に応じたSassマップと変数を提供
- 【v5.0.0-alpha2】
- $green: #28a745 ⇒ #198754(コントラスト比を4.5以上にするために変更)
- $cyan: #17a2b8 ⇒ #0dcaf0(より鮮明にするために変更)
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マップを使用する。
【変更履歴】
- 【v5.2.0】
- black($black)を追加
実例(Example)
Sassでこれらを使用する方法は以下のとおり:
設定例
Sass.alpha { color: $purple; }
.beta {
color: $yellow-300;
background-color: $indigo-900;
}
カラーユーティリティクラスと背景色ユーティリティクラスも 500
カラー値を使用して、color
と background-color
の設定に利用できる。
ユーティリティの生成(Generating utilities)v5.1.0追加、v5.2.0設定変更
Bootstrapには、すべての色変数の color
と background-color
ユーティリティが組み込まれているわけではないが、v5.1.0で追加されたユーティリティAPIと拡張Sassマップを使用すれば、これらを自分で生成できる。
- まず、関数、変数、mixin、ユーティリティをインポートしたことを確認。
map-merge-multiple()
関数を使用して、複数のSassマップを新しいマップにすばやくマージ。- この新しい結合マップをマージして、
{color}-{level}
クラス名でユーティリティを拡張する。
上記の手順を使用してテキストカラーユーティリティ(例:.text-purple-500
)を生成する例を以下に表示。
設定例 緑背景が5.2.0での変更箇所
custom.scss@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@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}
ユーティリティが生成される。他のユーティリティやプロパティについても同じことができる。
【変更履歴】
- 【v5.2.0】
scss/_maps.scss
を新設したので、インポートするSassファイルにbootstrap/scss/maps
を追加