css实现一键换肤

入门级前端开发2025-04-15 8:45

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

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

css 复制代码

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

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

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

javascript 复制代码

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

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

css

css 复制代码

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

javascript 复制代码

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

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