实现暗黑模式
手动控制
根本上就是更改样式：修改类名、类中使用 CSS 变量控制、加载不同的样式文件
prefers-color-scheme
定义
用于检测用户是否有将系统的主题色设置为亮色或者暗色
取值
- no-preference: 表示系统未得知用户在这方面的选项
- light: 表示用户已告知系统他们选择使用浅色主题的界面
- dark: 表示用户已告知系统他们选择使用暗色主题的界面
示例
.day {
background: #eee;
color: black;
}
.night {
background: #333;
color: white;
}
@media (prefers-color-scheme: dark) {
.day.dark-scheme {
background: #333;
color: white;
}
.night.dark-scheme {
background: black;
color: #ddd;
}
}
@media (prefers-color-scheme: light) {
.day.light-scheme {
background: white;
color: #555;
}
.night.light-scheme {
background: #eee;
color: black;
}
}
CSS - filter
html {
filter: invert(1) hue-rotate(180deg);
img {
filter: invert(1) hue-rotate(180deg);
}
}
关于上面的 1 和 180deg 的细致理解：implement-dark-mode，其中还讲到了实现过程中的一系列坑点，因此记录一下
