在 Bulma 中，主题是 集合的 CSS 变量。
Bulma 附带 2 个主题
light.scss（必需）dark.scss（可选）
默认主题
由于 Bulma 要求所有 CSS 变量都有一个默认值，因此它附带了一个位于 /sass/themes/light.scss 的默认浅色主题。
它还附带了一个位于 /sass/themes/dark.scss 的深色主题。
文件 /sass/themes/_index.scss 负责包含这两个主题，每种主题有两种方式
- 使用
@media (prefers-color-scheme: $name)媒体查询 - 使用 HTML 属性
[data-theme=$name]和 CSS 类.theme-$name选择器
唯一的区别是浅色主题也在顶级定义：:root（等同于 html 元素，网页上所有 HTML 元素的祖先）。这确保为所有 CSS 变量设置一个默认值。
该主题的 CSS 输出类似于以下内容
:root {
/* CSS Variables */
}
@media (prefers-color-scheme: light) {
:root {
/* CSS Variables */
}
}
@media (prefers-color-scheme: dark) {
:root {
/* CSS Variables */
}
}
[data-theme=light],
.theme-light {
/* CSS Variables */
}
[data-theme=dark],
.theme-dark {
/* CSS Variables */
}
创建自定义主题
创建主题本质上是设置你自己的 CSS 变量。自定义主题需要
- 一个名称，如
sunrise - 一个作用域，如
:root、[data-theme=sunrise]、.theme-sunrise或全部三个 - 一组 CSS 变量及其新值
在浏览器中自定义
如果你在 :root 作用域下设置 CSS 变量，你就是在覆盖 Bulma 的默认主题。这可以通过 Sass 或 CSS 来完成。
要测试 CSS 方法，只需按照以下步骤操作
打开你的浏览器检查器
选择 html 元素
为 --bulma-link-h 变量（链接颜色的色调）插入一个新值
注意侧边栏中的 CSS 帮助程序部分是如何变色的
