css实现一键换肤

        实现一键换肤的时候，我们除了动态替换引用的css文件，还可以通过使用css变量的方式，达到所需效果。

        首先我们来了解css变量，css变量以--开头，引用时va(--变量名)，例

:root{
    --default-color: #fff;
}
.box{
    background-color: var(--default-color);
}

        :root指向文档根元素，可用来配置全局变量，而我们可以通过修改变量的值，来实现修改样式。

        一种方式是直接修改变量值，这种方式需要在setProperty时将所有变量都设置一遍。

document.documentElement.style.setProperty('--default-color', '#f00');

        另一种方式是在css中将每一套变量的值罗列出来，在:root上添加自定义属性，js通过修改自定义属性的值修改css的引用值

        css

:root{
    --default-color: #fff;
}
:root[theme="black"]{
    --default-color: #000;
}

        js

document.documentElement.setAttribute('theme', "black");
localStorage.setItem('theme', "black"); // 在缓存中存入theme的值，方便下次进入页面的时候主题与上一次一致

        第二种方式较第一种的优势是，不需要在js中修改那么多的变量，如果主题样式也特别多的话，js的方式比较麻烦，而且第二种更方便存储到缓存中，以便后续直接应用