Bulma 带有 7 种主要颜色
text | |
link | |
primary | |
info | |
success | |
warning | |
danger |
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等于 primary 的色调--bulma-primary-s等于 primary 的饱和度--bulma-primary-l等于 primary 的亮度--bulma-primary-base(等于--bulma-primary)--bulma-primary-invert这是一种在 primary 颜色上看起来不错的颜色（在前景/背景组合中）--bulma-primary-light这是亮度为90%的 primary 颜色--bulma-primary-light-invert这是一种在-light版本上看起来不错的颜色--bulma-primary-dark这是亮度为20%的 primary 颜色--bulma-primary-dark-invert这是一种在-dark版本上看起来不错的颜色--bulma-primary-soft这是一种在浅色模式下为浅色的颜色，在深色模式下为深色的颜色--bulma-primary-bold这是一种在浅色模式下为深色的颜色，在深色模式下为浅色的颜色--bulma-primary-soft-invert与bold版本相同--bulma-primary-bold-invert与soft版本相同--bulma-primary-on-scheme这是一种在scheme-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-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-反转 |
||
--bulma-primary-100 |
--bulma-primary-100-反转 |
这些色调中的每一个都有一个 -invert 对应项，可以用作前景色
| 背景 |
--bulma-primary-00
|
bulma-primary-00-反转 在 bulma-primary-00 上 |
| 前景 |
--bulma-primary-00-invert
|
|
| 背景 |
--bulma-primary-05
|
bulma-primary-05-反转 在 bulma-primary-05 上 |
| 前景 |
--bulma-primary-05-invert
|
|
| 背景 |
--bulma-primary-10
|
bulma-primary-10-反转 在 bulma-primary-10 上 |
| 前景 |
--bulma-primary-10-invert
|
|
| 背景 |
--bulma-primary-15
|
bulma-primary-15-反转 在 bulma-primary-15 上 |
| 前景 |
--bulma-primary-15-invert
|
|
| 背景 |
--bulma-primary-20
|
bulma-primary-20-反转 在 bulma-primary-20 上 |
| 前景 |
--bulma-primary-20-invert
|
|
| 背景 |
--bulma-primary-25
|
bulma-primary-25-反转 在 bulma-primary-25 上 |
| 前景 |
--bulma-primary-25-invert
|
|
| 背景 |
--bulma-primary-30
|
bulma-primary-30-反转 在 bulma-primary-30 上 |
| 前景 |
--bulma-primary-30-invert
|
|
| 背景 |
--bulma-primary-35
|
bulma-primary-35-反转 在 bulma-primary-35 上 |
| 前景 |
--bulma-primary-35-invert
|
|
| 背景 |
--bulma-primary-40
|
bulma-primary-40-反转 在 bulma-primary-40 上 |
| 前景 |
--bulma-primary-40-invert
|
|
| 背景 |
--bulma-primary-45
|
bulma-primary-45-反转 在 bulma-primary-45 上 |
| 前景 |
--bulma-primary-45-invert
|
|
| 背景 |
--bulma-primary-50
|
bulma-primary-50-反转 在 bulma-primary-50 上 |
| 前景 |
--bulma-primary-50-invert
|
|
| 背景 |
--bulma-primary-55
|
bulma-primary-55-反转 在 bulma-primary-55 上 |
| 前景 |
--bulma-primary-55-invert
|
|
| 背景 |
--bulma-primary-60
|
bulma-primary-60-反转 在 bulma-primary-60 上 |
| 前景 |
--bulma-primary-60-invert
|
|
| 背景 |
--bulma-primary-65
|
bulma-primary-65-反转 在 bulma-primary-65 上 |
| 前景 |
--bulma-primary-65-invert
|
|
| 背景 |
--bulma-primary-70
|
bulma-primary-70-反转 在 bulma-primary-70 上 |
| 前景 |
--bulma-primary-70-invert
|
|
| 背景 |
--bulma-primary-75
|
bulma-primary-75-反转 在 bulma-primary-75 上 |
| 前景 |
--bulma-primary-75-invert
|
|
| 背景 |
--bulma-primary-80
|
bulma-primary-80-反转 在 bulma-primary-80 上 |
| 前景 |
--bulma-primary-80-invert
|
|
| 背景 |
--bulma-primary-85
|
bulma-primary-85-反转 在 bulma-primary-85 上 |
| 前景 |
--bulma-primary-85-invert
|
|
| 背景 |
--bulma-primary-90
|
bulma-primary-90-反转 在 bulma-primary-90 上 |
| 前景 |
--bulma-primary-90-invert
|
|
| 背景 |
--bulma-primary-95
|
bulma-primary-95-反转 在 bulma-primary-95 上 |
| 前景 |
--bulma-primary-95-反转
|
|
| 背景 |
--bulma-primary-100
|
bulma-primary-100-反转 在 bulma-primary-100 上 |
| 前景 |
--bulma-primary-100-反转
|
亮度 CSS 变量
如果您编写自己的 CSS 并想自己使用这些色调之一，您可以通过其具有 -l 后缀的专用 CSS 变量访问亮度值。
例如，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
|
你好世界 | |
