现代浏览器可以通过使用 prefers-color-scheme 关键字来检测用户是否已将其主题偏好设置为 light 或 dark。
此值可用于媒体查询以相应地更改网站的样式
@media (prefers-color-scheme: dark) {
:root {
/* Update CSS variables */
}
}
但是，网站无法更改此偏好。 这就是为什么最好 同时 添加 data-theme HTML 属性或 theme-dark CSS 类。
这是 Bulma 定义其深色主题的方式
@media (prefers-color-scheme: dark) {
:root {
/* Update CSS variables */
}
}
[data-theme=dark],
.theme-dark {
/* Update CSS variables */
}
使用以下规则
- 如果没有设置用户偏好，网站将默认为 浅色
- 如果用户已将其偏好设置为
light，它也将为 浅色 - 如果用户已将其偏好设置为
dark，则网站将为 深色
在页面中强制深色模式 #
您可以通过简单地使用 HTML 属性或 CSS 类在 HTML 的一部分中 启用 深色模式
<div>
This is in Light Mode if the user hasn't set a preference, or if their preference is set to <code>light</code>.
</div>
<div data-theme="dark">
This is in Dark Mode
</div>
<div class="theme-dark">
This is also in Dark Mode
</div>
为整个网页强制深色模式 #
如果要为整个网页启用深色模式，只需在 <html> 元素上设置属性或类
<html data-theme="dark">
<!-- Or -->
<html class="theme-dark">
深色主题的创建方式 #
这是 sass/themes/dark.scss 文件的内容
@use "sass/utilities/initial-variables" as iv;
@use "sass/utilities/css-variables" as cv;
@use "sass/utilities/derived-variables" as dv;
@use "sass/themes/setup";
// The main lightness of this theme
$scheme-main-l: 11%;
$background-l: 14%;
$text-l: 71%;
// The main scheme color, used to make calculations
$scheme-main: hsl(iv.$scheme-h, iv.$scheme-s, $scheme-main-l);
$background: hsl(iv.$scheme-h, iv.$scheme-s, $background-l);
$text: hsl(iv.$scheme-h, iv.$scheme-s, $text-l);
@mixin dark-theme {
// Required: update the lightness colors and hover/active states
@include cv.register-vars(
(
"scheme-brightness": "dark",
"scheme-main-l": $scheme-main-l,
"scheme-main-bis-l": $scheme-main-l + 2%,
"scheme-main-ter-l": $scheme-main-l + 4%,
"background-l": $background-l,
"border-weak-l": 21%,
"border-l": 24%,
"text-weak-l": 53%,
"text-l": $text-l,
"text-strong-l": 93%,
"text-title-l": 100%,
"hover-background-l-delta": 5%,
"active-background-l-delta": 10%,
"hover-border-l-delta": 10%,
"active-border-l-delta": 20%,
"hover-color-l-delta": 5%,
"active-color-l-delta": 10%,
)
);
// Required: update the "on scheme" colors since the main scheme color is changed
// from white (100% lightness)
// to black (11% lightness in this case)
@each $name, $color in dv.$colors {
@include cv.generate-on-scheme-colors($name, $color, $scheme-main);
}
// Optional: update the shadow color
@include cv.register-hsl("shadow", white);
}
此 mixin 输出 CSS 变量及其新值的列表。
要将此主题与 prefer-color-scheme 媒体查询一起使用，请编写以下内容
@use "sass/utilities/css-variables" as cv;
@use "sass/themes/dark";
@include cv.system-theme($name: "dark") {
@include dark.dark-theme;
}
要将此主题与 [data-theme=dark] 和 .theme-dark 选择器一起使用，请编写以下内容
@use "sass/utilities/css-variables" as cv;
@use "sass/themes/dark";
@use "sass/themes/setup";
@include cv.bulma-theme($name: "dark") {
@include dark.dark-theme;
@include setup.setup-theme;
}
bulma-theme() mixin
此 mixin 将允许您生成一个 CSS 规则集，其中包含适当的 HTML 属性选择器和 CSS 类选择器，其名称由 $name 参数定义。
@use "sass/utilities/css-variables" as cv;
@include cv.bulma-theme($name: "my-theme") {
// Your code
}
这将输出以下内容
[data-theme=my-theme],
.theme-my-theme {
/* Your code */
}
system-theme() mixin
此 mixin 将生成一个 @media (prefers-color-scheme: $name) 媒体查询。
@use "sass/utilities/css-variables" as cv;
@include cv.system-theme($name: "dark") {
// Your code
}
这将输出以下内容
@media (prefers-color-scheme: dark) {
:root {
/* Your code */
}
}
register-vars() 函数
所有 Bulma CSS 变量都以 bulma- 为前缀。 此前缀由 $cssvars-prefix: "bulma-"; Sass 变量定义。
因为使用此前缀编写所有 CSS 变量可能很麻烦，所以 Bulma 提供了一个 Sass 函数来注册新变量：register-vars()。
此函数接受 name: value 对的 Sass 映射。
@use "sass/utilities/css-variables" as cv;
$scheme-main-l: 11%;
$background-l: 14%;
$text-l: 71%;
@include cv.bulma-theme($name: "my-theme") {
@include cv.register-vars(
(
"scheme-brightness": "dark",
"scheme-main-l": $scheme-main-l,
"scheme-main-bis-l": $scheme-main-l + 2%,
"scheme-main-ter-l": $scheme-main-l + 4%,
"background-l": $background-l,
"border-weak-l": 21%,
"border-l": 24%,
"text-weak-l": 53%,
"text-l": $text-l,
"text-strong-l": 93%,
"text-title-l": 100%,
"hover-background-l-delta": 5%,
"active-background-l-delta": 10%,
"hover-border-l-delta": 10%,
"active-border-l-delta": 20%,
"hover-color-l-delta": 5%,
"active-color-l-delta": 10%,
)
);
}
更新亮度
对于深色模式，Bulma 将保持主配色方案颜色的色调和饱和度不变。 但是，它会 反转 背景、边框、文本颜色以及悬停/活动状态的亮度。
| 亮度名称 | 浅色模式（默认） | 深色模式（默认） | ||
|---|---|---|---|---|
--bulma-scheme-main-l |
100% |
11% |
||
--bulma-scheme-main-bis-l |
98% |
13% |
||
--bulma-scheme-main-ter-l |
98% |
15% |
||
--bulma-background-l |
96% |
14% |
||
--bulma-border-weak-l |
93% |
21% |
||
--bulma-border-l |
86% |
24% |
||
--bulma-text-weak-l |
48% |
53% |
||
--bulma-text-l |
29% |
71% |
||
--bulma-text-strong-l |
21% |
93% |
||
--bulma-text-title-l |
14% |
100% |
||
--bulma-hover-background-l-delta |
5% |
5% |
||
--bulma-active-background-l-delta |
10% |
10% |
||
--bulma-hover-border-l-delta |
10% |
10% |
||
--bulma-active-border-l-delta |
20% |
20% |
||
--bulma-hover-color-l-delta |
5% |
5% |
||
--bulma-active-color-l-delta |
10% |
10% |
||
generate-on-scheme-colors() 函数
配色方案颜色用于
- 背景
- 边框
- 文本阴影
- 粗体文本
- 弱化文本
- 标题文本
- 和普通文本
对于 7 种主要颜色中的每一种 ，默认的 Bulma 主题会生成 在配色方案上 的阴影，这意味着每种颜色的阴影在主配色方案颜色上看起来都不错。
在浅色模式下，它们看起来像这样
link |
var(--bulma-link-on-scheme) |
|---|---|
primary |
var(--bulma-primary-on-scheme) |
info |
var(--bulma-info-on-scheme) |
success |
var(--bulma-success-on-scheme) |
warning |
var(--bulma-warning-on-scheme) |
danger |
var(--bulma-danger-on-scheme) |
因为在深色模式下，我们要反转这些颜色的亮度，所以页面背景将从白色 变为黑色 。 因此，我们需要更新所有 7 种主要颜色的 -on-scheme 颜色。
在深色模式下，它们看起来像这样
link |
var(--bulma-link-on-scheme) |
|---|---|
primary |
var(--bulma-primary-on-scheme) |
info |
var(--bulma-info-on-scheme) |
success |
var(--bulma-success-on-scheme) |
warning |
var(--bulma-warning-on-scheme) |
danger |
var(--bulma-danger-on-scheme) |
如果您要创建自己的主题，则可以使用 generate-on-scheme-colors() 为 每种 颜色自动生成新的 -on-scheme 颜色。 它有 3 个参数
$name，它是一个字符串。 例如"primary"$color，它是颜色值。 例如$scheme-main，它是主题的主要配色方案颜色（用作页面背景）。 例如#fff
完整的代码如下所示
@use "sass/utilities/css-variables" as cv;
@use "sass/utilities/derived-variables" as dv;
$scheme-main-l: 11%;
$scheme-main: hsl(iv.$scheme-h, iv.$scheme-s, $scheme-main-l);
@include cv.bulma-theme($name: "my-theme") {
@each $name, $color in dv.$colors {
@include cv.generate-on-scheme-colors($name, $color, $scheme-main);
}
}
setup-theme() 函数
在 Bulma 中，一些 CSS 变量引用了其他 CSS 变量。 例如，--bulma-scheme-main 的定义如下
:root {
--bulma-scheme-main: hsl(
var(--bulma-scheme-h)
var(--bulma-scheme-s)
var(--bulma-scheme-main-l)
);
}
由于 CSS 变量的工作方式，如果您更新了 --bulma-scheme-main-l 的值，您需要重新定义 --bulma-scheme-main。 这就是 setup-theme() 所做的事情。
[data-theme=my-theme],
.theme-my-theme {
--bulma-scheme-main-l: 7%;
--bulma-scheme-main: hsl(
var(--bulma-scheme-h)
var(--bulma-scheme-s)
var(--bulma-scheme-main-l)
);
}
如果您创建了自己的主题，只需在设置完自己的 CSS 变量之后调用此函数
@use "sass/themes/setup";
@include cv.bulma-theme($name: "my-theme") {
// Set your own CSS variables,
// either manually:
--bulma-scheme-main-l: 7%;
// or using Bulma's register-vars() function:
@include register-vars((
"bulma-scheme-main-l": 7%,
));
// Then, setup the new theme.
@include setup.setup-theme();
}
