Bulmaには7つの基本色があります
text | |
link | |
primary | |
info | |
success | |
warning | |
danger |
Bulmaは、これらの各色に対してCSS変数のコレクションを自動的に生成します。これらの変数のセットは、同じ色の異なる色合いを試すために使用できるカラーパレットとして機能します。
たとえば、$primary: hsl(171, 100%, 41%)でプライマリカラーを設定すると、Bulmaは次のCSS変数を生成します
--bulma-primary--bulma-primary-rgbRGBA色合いを作成する場合：rgba(var(--bulma-primary-rgb), 0.5)--bulma-primary-hプライマリの色相に等しい--bulma-primary-sプライマリの彩度に等しい--bulma-primary-lプライマリの明度に等しい--bulma-primary-base（--bulma-primaryに等しい）--bulma-primary-invertプライマリカラーで見栄えがよくなる色（前景/背景の組み合わせ）--bulma-primary-light90%の明度のプライマリカラー--bulma-primary-light-invert-lightバージョンで見栄えの良い色--bulma-primary-dark20%の明度のプライマリカラー--bulma-primary-dark-invert-darkバージョンで見栄えの良い色--bulma-primary-softライトモードではlight色、ダークモードではdark色--bulma-primary-boldライトモードではdark色、ダークモードではlight色--bulma-primary-soft-invertboldバージョンと同じ--bulma-primary-bold-invertsoftバージョンと同じ--bulma-primary-on-schemescheme-mainカラー（デフォルトでは白で、ページの背景色として使用されます）で見栄えの良い色
これらがどのように見えるかを示します
--bulma-primary |
すばやい茶色のキツネは、のろまな犬を飛び越えます | |
--bulma-primary-invert |
すばやい茶色のキツネは、のろまな犬を飛び越えます | |
--bulma-primary-light |
すばやい茶色のキツネは、のろまな犬を飛び越えます | |
--bulma-primary-light-invert |
すばやい茶色のキツネは、のろまな犬を飛び越えます | |
--bulma-primary-dark |
すばやい茶色のキツネは、のろまな犬を飛び越えます | |
--bulma-primary-dark-invert |
すばやい茶色のキツネは、のろまな犬を飛び越えます | |
--bulma-primary-soft |
すばやい茶色のキツネは、のろまな犬を飛び越えます | |
--bulma-primary-bold |
すばやい茶色のキツネは、のろまな犬を飛び越えます | |
--bulma-primary-on-scheme |
すばやい茶色のキツネは、のろまな犬を飛び越えます |
ソフトカラーとボールドカラー
Bulmaにダークモードが追加されたため、新しいカラーコンセプトであるソフトカラーとボールドカラーが導入されました。
ソフトカラーは、背景とのコントラストが少ない色の色合いです。ミュートされた、かすかな色合いです。
ライトモードでは、これはソフトカラーも明るいことを意味します。これは背景に最適です
背景としての--bulma-primary-soft |
すばやい茶色のキツネは、のろまな犬を飛び越えます |
一方、ボールドカラーは、背景とのコントラストが強いです。それは、その色の強く、明確な色合いです。
ライトモードでは、これはボールドカラーが暗くなることを意味します。これはテキストの色に最適です
テキストの色としての--bulma-primary-bold |
すばやい茶色のキツネは、のろまな犬を飛び越えます |
これらの色の最適な使用法は、それらを組み合わせることです。ソフトカラーを背景として、ボールドカラーを前景として使用します
背景としての--bulma-primary-soft前景としての --bulma-primary-bold |
すばやい茶色のキツネは、のろまな犬を飛び越えます |
ダークモードに移行する際の自動切り替え
ライトモードとダークモードを切り替えると、ソフトカラーとボールドカラーが入れ替わることに気づくでしょう。これにより、見栄えの良いデザインを維持するためにCSSクラスを更新する必要はありません。
| システム | ライトモード | ダークモード |
|---|---|---|
| すばやい茶色のキツネは、のろまな犬を飛び越えます | すばやい茶色のキツネは、のろまな犬を飛び越えます | すばやい茶色のキツネは、のろまな犬を飛び越えます |
色の反転
-invertカラーの目的は、それらをベースカラーと組み合わせることです。たとえば、背景色としてprimary-lightを使用する場合は、前景の色としてprimary-light-invertを使用できます
| 背景 |
--bulma-primary
|
bulma-primary上のbulma-primary-invert |
| 前景 |
--bulma-primary-invert
|
|
| 背景 |
--bulma-primary-light
|
bulma-primary-light上のbulma-primary-light-invert |
| 前景 |
--bulma-primary-light-invert
|
|
| 背景 |
--bulma-primary-dark
|
bulma-primary-dark上のbulma-primary-dark-invert |
| 前景 |
--bulma-primary-dark-invert
|
各色に21の色合い
Bulmaは、各色の21の色合いを自動的に生成します。これは、明度ごとに1つずつ、約0%から始まり、5%ずつ増加し、100%に達するまでです。
最後の桁はベースカラーによって決定されるため、約
0%と言っています。ベースカラーの明度が42%の場合、--bulma-primary-00は0%ではなく2%になります。
--bulma-primary-00 |
--bulma-primary-00-invert |
||
--bulma-primary-05 |
--bulma-primary-05-invert |
||
--bulma-primary-10 |
--bulma-primary-10-invert |
||
--bulma-primary-15 |
--bulma-primary-15-invert |
||
--bulma-primary-20 |
--bulma-primary-20-invert |
||
--bulma-primary-25 |
--bulma-primary-25-invert |
||
--bulma-primary-30 |
--bulma-primary-30-invert |
||
--bulma-primary-35 |
--bulma-primary-35-invert |
||
--bulma-primary-40 |
--bulma-primary-40-invert |
||
--bulma-primary-45 |
--bulma-primary-45-invert |
||
--bulma-primary-50 |
--bulma-primary-50-invert |
||
--bulma-primary-55 |
--bulma-primary-55-invert |
||
--bulma-primary-60 |
--bulma-primary-60-invert |
||
--bulma-primary-65 |
--bulma-primary-65-invert |
||
--bulma-primary-70 |
--bulma-primary-70-invert |
||
--bulma-primary-75 |
--bulma-primary-75-invert |
||
--bulma-primary-80 |
--bulma-primary-80-invert |
||
--bulma-primary-85 |
--bulma-primary-85-invert |
||
--bulma-primary-90 |
--bulma-primary-90-invert |
||
--bulma-primary-95 |
--bulma-primary-95-invert |
||
--bulma-primary-100 |
--bulma-primary-100-invert |
これらの各色合いには、前景の色として使用できる-invert対応の色があります
| 背景 |
--bulma-primary-00
|
bulma-primary-00上のbulma-primary-00-invert |
| 前景 |
--bulma-primary-00-invert
|
|
| 背景 |
--bulma-primary-05
|
bulma-primary-05上のbulma-primary-05-invert |
| 前景 |
--bulma-primary-05-invert
|
|
| 背景 |
--bulma-primary-10
|
bulma-primary-10上のbulma-primary-10-invert |
| 前景 |
--bulma-primary-10-invert
|
|
| 背景 |
--bulma-primary-15
|
bulma-primary-15上のbulma-primary-15-invert |
| 前景 |
--bulma-primary-15-invert
|
|
| 背景 |
--bulma-primary-20
|
bulma-primary-20上のbulma-primary-20-invert |
| 前景 |
--bulma-primary-20-invert
|
|
| 背景 |
--bulma-primary-25
|
bulma-primary-25上のbulma-primary-25-invert |
| 前景 |
--bulma-primary-25-invert
|
|
| 背景 |
--bulma-primary-30
|
bulma-primary-30上のbulma-primary-30-invert |
| 前景 |
--bulma-primary-30-invert
|
|
| 背景 |
--bulma-primary-35
|
bulma-primary-35上のbulma-primary-35-invert |
| 前景 |
--bulma-primary-35-invert
|
|
| 背景 |
--bulma-primary-40
|
bulma-primary-40上のbulma-primary-40-invert |
| 前景 |
--bulma-primary-40-invert
|
|
| 背景 |
--bulma-primary-45
|
bulma-primary-45-invert on bulma-primary-45 |
| 前景 |
--bulma-primary-45-invert
|
|
| 背景 |
--bulma-primary-50
|
bulma-primary-50-invert on bulma-primary-50 |
| 前景 |
--bulma-primary-50-invert
|
|
| 背景 |
--bulma-primary-55
|
bulma-primary-55-invert on bulma-primary-55 |
| 前景 |
--bulma-primary-55-invert
|
|
| 背景 |
--bulma-primary-60
|
bulma-primary-60-invert on bulma-primary-60 |
| 前景 |
--bulma-primary-60-invert
|
|
| 背景 |
--bulma-primary-65
|
bulma-primary-65-invert on bulma-primary-65 |
| 前景 |
--bulma-primary-65-invert
|
|
| 背景 |
--bulma-primary-70
|
bulma-primary-70-invert on bulma-primary-70 |
| 前景 |
--bulma-primary-70-invert
|
|
| 背景 |
--bulma-primary-75
|
bulma-primary-75-invert on bulma-primary-75 |
| 前景 |
--bulma-primary-75-invert
|
|
| 背景 |
--bulma-primary-80
|
bulma-primary-80-invert on bulma-primary-80 |
| 前景 |
--bulma-primary-80-invert
|
|
| 背景 |
--bulma-primary-85
|
bulma-primary-85-invert on bulma-primary-85 |
| 前景 |
--bulma-primary-85-invert
|
|
| 背景 |
--bulma-primary-90
|
bulma-primary-90-invert on bulma-primary-90 |
| 前景 |
--bulma-primary-90-invert
|
|
| 背景 |
--bulma-primary-95
|
bulma-primary-95-invert on bulma-primary-95 |
| 前景 |
--bulma-primary-95-invert
|
|
| 背景 |
--bulma-primary-100
|
bulma-primary-100-invert on bulma-primary-100 |
| 前景 |
--bulma-primary-100-invert
|
明度に関するCSS変数
独自のCSSを記述し、これらの色合いのいずれかを使用したい場合は、専用のCSS変数（-lサフィックスが付いています）を介して明度の値にアクセスできます。
たとえば、bulma-primary-75の色は次のように定義されています。
:root {
--bulma-primary-75: hsla(
var(--bulma-primary-h),
var(--bulma-primary-s),
var(--bulma-primary-75-l),
1
);
}
この場合、--bulma-primary-75-lは76%に等しく、var(--bulma-primary-75-l) CSS変数でその値にアクセスできます。
CSSヘルパークラス
例えばcolor: var(--bulma-primary)のように記述して、色のすべてのCSS変数に直接アクセスできますが、Bulmaでは各色のCSSヘルパークラスも提供しています。
これらのヘルパークラスは、colorまたはbackgroundのいずれかを設定するために存在します。
| # | 色 | colorクラス |
backgroundクラス |
||
|---|---|---|---|---|---|
--bulma-primary
|
has-text-primary
|
ハローワールド |
has-background-primary
|
ハローワールド | |
--bulma-primary-invert
|
has-text-primary-invert
|
ハローワールド |
has-background-primary-invert
|
ハローワールド | |
--bulma-primary-light
|
has-text-primary-light
|
ハローワールド |
has-background-primary-light
|
ハローワールド | |
--bulma-primary-light-invert
|
has-text-primary-light-invert
|
ハローワールド |
has-background-primary-light-invert
|
ハローワールド | |
--bulma-primary-dark
|
has-text-primary-dark
|
ハローワールド |
has-background-primary-dark
|
ハローワールド | |
--bulma-primary-dark-invert
|
has-text-primary-dark-invert
|
ハローワールド |
has-background-primary-dark-invert
|
ハローワールド | |
--bulma-primary-on-scheme
|
has-text-primary-on-scheme
|
ハローワールド |
has-background-primary-on-scheme
|
ハローワールド | |
--bulma-primary-00
|
has-text-primary-00
|
ハローワールド |
has-background-primary-00
|
ハローワールド | |
--bulma-primary-05
|
has-text-primary-05
|
ハローワールド |
has-background-primary-05
|
ハローワールド | |
--bulma-primary-10
|
has-text-primary-10
|
ハローワールド |
has-background-primary-10
|
ハローワールド | |
--bulma-primary-15
|
has-text-primary-15
|
ハローワールド |
has-background-primary-15
|
ハローワールド | |
--bulma-primary-20
|
has-text-primary-20
|
ハローワールド |
has-background-primary-20
|
ハローワールド | |
--bulma-primary-25
|
has-text-primary-25
|
ハローワールド |
has-background-primary-25
|
ハローワールド | |
--bulma-primary-30
|
has-text-primary-30
|
ハローワールド |
has-background-primary-30
|
ハローワールド | |
--bulma-primary-35
|
has-text-primary-35
|
ハローワールド |
has-background-primary-35
|
ハローワールド | |
--bulma-primary-40
|
has-text-primary-40
|
ハローワールド |
has-background-primary-40
|
ハローワールド | |
--bulma-primary-45
|
has-text-primary-45
|
ハローワールド |
has-background-primary-45
|
ハローワールド | |
--bulma-primary-50
|
has-text-primary-50
|
ハローワールド |
has-background-primary-50
|
ハローワールド | |
--bulma-primary-55
|
has-text-primary-55
|
ハローワールド |
has-background-primary-55
|
ハローワールド | |
--bulma-primary-60
|
has-text-primary-60
|
ハローワールド |
has-background-primary-60
|
ハローワールド | |
--bulma-primary-65
|
has-text-primary-65
|
ハローワールド |
has-background-primary-65
|
ハローワールド | |
--bulma-primary-70
|
has-text-primary-70
|
ハローワールド |
has-background-primary-70
|
ハローワールド | |
--bulma-primary-75
|
has-text-primary-75
|
ハローワールド |
has-background-primary-75
|
ハローワールド | |
--bulma-primary-80
|
has-text-primary-80
|
ハローワールド |
has-background-primary-80
|
ハローワールド | |
--bulma-primary-85
|
has-text-primary-85
|
ハローワールド |
has-background-primary-85
|
ハローワールド | |
--bulma-primary-90
|
has-text-primary-90
|
ハローワールド |
has-background-primary-90
|
ハローワールド | |
--bulma-primary-95
|
has-text-primary-95
|
ハローワールド |
has-background-primary-95
|
ハローワールド | |
--bulma-primary-100
|
has-text-primary-100
|
ハローワールド |
has-background-primary-100
|
ハローワールド | |