标签：几步 主题 Theme dark theme 切换 root css 页面
纯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储存用户的主题设置，就可以轻松完成主题切换按钮
标签：几步,主题,Theme,dark,theme,切换,root,css,页面 来源： https://www.cnblogs.com/shaddollxz/p/15354807.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。