Bulma 提供 7 种主色
文本 | |
链接 | |
主色 | |
信息 | |
成功 | |
警告 | |
危险 |
Bulma 会自动 为每种颜色生成一组 CSS 变量。这些变量集充当 调色板，你可以使用它来使用同一颜色的不同 色调。
例如，通过使用 $primary: hsl(171, 100%, 41%) 设置主色，Bulma 将生成以下 CSS 变量
--bulma-primary--bulma-primary-rgb如果您想创建自己的 RGBA 色调：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-light这是明度为90%的主色调--bulma-primary-light-invert这是在-light版本上看起来不错的颜色--bulma-primary-dark这是明度为20%的主色调--bulma-primary-dark-invert这是在-dark版本上看起来不错的颜色--bulma-primary-soft这是在浅色模式下为light颜色，在深色模式下为dark颜色--bulma-primary-bold这是在浅色模式下为dark颜色，在深色模式下为light颜色--bulma-primary-soft-invert与bold版本相同--bulma-primary-bold-invert与soft版本相同--bulma-primary-on-scheme这是在scheme-main颜色上看起来不错的颜色（默认情况下为白色，用作页面的背景色）
它们看起来如下所示
--bulma-primary |
The quick brown fox jumps over the lazy dog | |
--bulma-primary-invert |
The quick brown fox jumps over the lazy dog | |
--bulma-primary-light |
The quick brown fox jumps over the lazy dog | |
--bulma-primary-light-invert |
The quick brown fox jumps over the lazy dog | |
--bulma-primary-dark |
The quick brown fox jumps over the lazy dog | |
--bulma-primary-dark-invert |
The quick brown fox jumps over the lazy dog | |
--bulma-primary-soft |
The quick brown fox jumps over the lazy dog | |
--bulma-primary-bold |
The quick brown fox jumps over the lazy dog | |
--bulma-primary-on-scheme |
The quick brown fox jumps over the lazy dog |
柔和色和加粗色
由于 Bulma 现在具有暗模式，因此它带来了一种新的颜色概念：柔和色和加粗色。
柔和色是一种与背景对比度很小的颜色色调。它是该颜色的柔和、浅淡色调。
在浅色模式中，这意味着柔和色也会很浅。它是背景的理想选择
--bulma-primary-soft 作为背景 |
The quick brown fox jumps over the lazy dog |
另一方面，加粗色与背景形成鲜明对比。它是该颜色的强烈、鲜明的色调。
在浅色模式中，这意味着加粗色将是深色。它是文本颜色的理想选择
--bulma-primary-bold 作为文本颜色 |
The quick brown fox jumps over the lazy dog |
这些颜色的最佳使用方法是将它们结合起来：柔和色作为背景，加粗色作为前景
--bulma-primary-soft 作为背景--bulma-primary-bold 作为前景
|
The quick brown fox jumps over the lazy dog |
进入暗模式时自动切换
如果您在浅色模式和暗色模式之间切换，您会注意到柔和色和加粗色将互换。这样，您无需更新 CSS 类即可保持良好的设计。
| 系统 | 浅色模式 | 深色模式 |
|---|---|---|
| The quick brown fox jumps over the lazy dog | The quick brown fox jumps over the lazy dog | The quick brown fox jumps over the lazy dog |
反转颜色
-invert 颜色的目的是将它们与它们的基本对应物结合起来。例如，如果您使用 primary-light 作为背景颜色，则可以使用 primary-light-invert 作为前景颜色
| 背景 |
--bulma-primary
|
bulma-primary-invert 在 bulma-primary 上 |
| 前景 |
--bulma-primary-invert
|
|
| 背景 |
--bulma-primary-light
|
bulma-primary-light-invert 在 bulma-primary-light 上 |
| 前景 |
--bulma-primary-light-invert
|
|
| 背景 |
--bulma-primary-dark
|
bulma-primary-dark-invert 在 bulma-primary-dark 上 |
| 前景 |
--bulma-primary-dark-invert
|
每种颜色有 21 种色调
Bulma 将自动生成每种颜色的 21 种色调，每种色调对应一种亮度，从大约 0% 开始，以 5% 为增量递增，直到达到 100%。
我所说的大约
0%是因为最后一位数字由基色决定。如果基色的亮度为42%，则--bulma-primary-00将为2%，而不是0%。
--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-invert on bulma-primary-00 |
| 前景 |
--bulma-primary-00-invert
|
|
| 背景 |
--bulma-primary-05
|
bulma-primary-05-invert on bulma-primary-05 |
| 前景 |
--bulma-primary-05-invert
|
|
| 背景 |
--bulma-primary-10
|
bulma-primary-10-invert on bulma-primary-10 |
| 前景 |
--bulma-primary-10-invert
|
|
| 背景 |
--bulma-primary-15
|
bulma-primary-15-invert on bulma-primary-15 |
| 前景 |
--bulma-primary-15-invert
|
|
| 背景 |
--bulma-primary-20
|
bulma-primary-20-invert on bulma-primary-20 |
| 前景 |
--bulma-primary-20-invert
|
|
| 背景 |
--bulma-primary-25
|
bulma-primary-25-invert on bulma-primary-25 |
| 前景 |
--bulma-primary-25-invert
|
|
| 背景 |
--bulma-primary-30
|
bulma-primary-30-invert on bulma-primary-30 |
| 前景 |
--bulma-primary-30-invert
|
|
| 背景 |
--bulma-primary-35
|
bulma-primary-35-invert on bulma-primary-35 |
| 前景 |
--bulma-primary-35-invert
|
|
| 背景 |
--bulma-primary-40
|
bulma-primary-40-invert on bulma-primary-40 |
| 前景 |
--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%，你可以使用 CSS 变量 var(--bulma-primary-75-l) 访问它的值。
CSS 辅助类
虽然你可以直接通过编写 color: var(--bulma-primary) 来访问所有颜色的 CSS 变量，但 Bulma 也为每种颜色提供 CSS 辅助类。
这些辅助类用于设置 color 或 background。
| # | 颜色 | color 类 |
background 类 |
||
|---|---|---|---|---|---|
--bulma-primary
|
has-text-primary
|
Hello World |
has-background-primary
|
Hello World | |
--bulma-primary-invert
|
has-text-primary-invert
|
Hello World |
has-background-primary-invert
|
Hello World | |
--bulma-primary-light
|
has-text-primary-light
|
Hello World |
has-background-primary-light
|
Hello World | |
--bulma-primary-light-invert
|
has-text-primary-light-invert
|
Hello World |
has-background-primary-light-invert
|
Hello World | |
--bulma-primary-dark
|
has-text-primary-dark
|
Hello World |
has-background-primary-dark
|
Hello World | |
--bulma-primary-dark-invert
|
has-text-primary-dark-invert
|
Hello World |
has-background-primary-dark-invert
|
Hello World | |
--bulma-primary-on-scheme
|
has-text-primary-on-scheme
|
Hello World |
has-background-primary-on-scheme
|
Hello World | |
--bulma-primary-00
|
has-text-primary-00
|
Hello World |
has-background-primary-00
|
Hello World | |
--bulma-primary-05
|
has-text-primary-05
|
Hello World |
has-background-primary-05
|
Hello World | |
--bulma-primary-10
|
has-text-primary-10
|
Hello World |
has-background-primary-10
|
Hello World | |
--bulma-primary-15
|
has-text-primary-15
|
Hello World |
has-background-primary-15
|
Hello World | |
--bulma-primary-20
|
has-text-primary-20
|
Hello World |
has-background-primary-20
|
Hello World | |
--bulma-primary-25
|
has-text-primary-25
|
Hello World |
has-background-primary-25
|
Hello World | |
--bulma-primary-30
|
has-text-primary-30
|
Hello World |
has-background-primary-30
|
Hello World | |
--bulma-primary-35
|
has-text-primary-35
|
Hello World |
has-background-primary-35
|
Hello World | |
--bulma-primary-40
|
has-text-primary-40
|
Hello World |
has-background-primary-40
|
Hello World | |
--bulma-primary-45
|
has-text-primary-45
|
Hello World |
has-background-primary-45
|
Hello World | |
--bulma-primary-50
|
has-text-primary-50
|
Hello World |
has-background-primary-50
|
Hello World | |
--bulma-primary-55
|
has-text-primary-55
|
Hello World |
has-background-primary-55
|
Hello World | |
--bulma-primary-60
|
has-text-primary-60
|
Hello World |
has-background-primary-60
|
Hello World | |
--bulma-primary-65
|
has-text-primary-65
|
Hello World |
has-background-primary-65
|
Hello World | |
--bulma-primary-70
|
has-text-primary-70
|
Hello World |
has-background-primary-70
|
Hello World | |
--bulma-primary-75
|
has-text-primary-75
|
Hello World |
has-background-primary-75
|
Hello World | |
--bulma-primary-80
|
has-text-primary-80
|
Hello World |
has-background-primary-80
|
Hello World | |
--bulma-primary-85
|
has-text-primary-85
|
Hello World |
has-background-primary-85
|
Hello World | |
--bulma-primary-90
|
has-text-primary-90
|
Hello World |
has-background-primary-90
|
Hello World | |
--bulma-primary-95
|
has-text-primary-95
|
Hello World |
has-background-primary-95
|
Hello World | |
--bulma-primary-100
|
has-text-primary-100
|
Hello World |
has-background-primary-100
|
Hello World | |