通过媒体查询 prefers-color-scheme 让你的网站支持黑暗模式
然后你就可以编写你的样式了
css
@media (prefers-color-scheme: light) {
.prefers-color {
--bgColor: #f3f5f7;
--textColor: #282c34;
}
}
@media (prefers-color-scheme: dark) {
.prefers-color {
--bgColor: #282c34;
--textColor: #f3f5f7;
}
}
.prefers-color {
color: var(--textColor);
background: var(--bgColor);
}效果
当然目前这样的兼容性比较差，如果你需要更好的兼容性。你可以参考css-prefers-color-scheme