简单几步实现页面主题切换

2021/9/29 23:11:48

本文主要是介绍简单几步实现页面主题切换,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

纯css

用户是否开启夜间模式可以使用媒体查询@media (prefers-color-scheme: light | dark)来查看,这样只需要配合:root的css变量就可以进行设置整个网站的主题颜色

  • 关于夜间模式的媒体查询具体,可以见这篇文章
  • 关于css变量,可以见MDN的介绍

配合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储存用户的主题设置,就可以轻松完成主题切换按钮



这篇关于简单几步实现页面主题切换的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!


扫一扫关注最新编程教程