纯css
用户是否开启夜间模式可以使用媒体查询@media (prefers-color-scheme: light | dark)
来查看,这样只需要配合:root
的css变量就可以进行设置整个网站的主题颜色
配合js设置主题
上面的只是简单介绍,实际问题是我在我的浏览器上找不到改变主题咋办啊?当然是用js来改了,通过MDN能找到对于:root
的介绍:
:root
这个 CSS 伪类匹配文档树的根元素。对于 HTML 来说,:root
表示 <html>
元素,除了优先级更高之外,与 html
选择器相同。
这说明通过document.documentElement
的结果和:root
是一样的,然后根据上面提到的MDN文档,我们可以通过element.style.setProperty
来修改css变量,那整个替换主题的思路就能出来了
这是我写的一个修改主题的函数,只要设置Theme
的值,就能修改页面的主题
export default function setTheme(theme = "dark") {
// 检测是否支持css变量
if (!window?.CSS?.supports("--a", 0)) return false;
// 设置主题
const Theme = {
dark: [["--text", "#ffffff"]],
light: [["--text", "#000000"]],
};
for (const theme of Theme[theme]) {
document.documentElement.style.setProperty(...theme);
}
}
最后只要用localStorage
储存用户的主题设置,就可以轻松完成主题切换按钮