css实现一键换肤

实现一键换肤的时候,我们除了动态替换引用的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;
}

js

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

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

相关推荐
i小杨8 分钟前
前端埋点(打点)方案
前端·状态模式
前端加油站20 分钟前
时间转换那些事
前端·javascript
风清云淡_A39 分钟前
【VUECLI】node.js打造自己的前端cli脚手架工具
前端·node.js
YuspTLstar1 小时前
一文掌握Redux-toolkit核心原理
前端·react.js
云枫晖1 小时前
手写Promise-静态方法all和allSettled
前端·javascript
weixin_456904271 小时前
前端开发时npm install报错解决方案
前端·npm·node.js
东华帝君1 小时前
Object.create继承
前端
王嘉俊9251 小时前
Flask 入门:轻量级 Python Web 框架的快速上手
开发语言·前端·后端·python·flask·入门
风继续吹..1 小时前
Express.js 入门指南:从零开始构建 Web 应用
前端·javascript·express
一只小风华~1 小时前
命名视图学习笔记
前端·javascript·vue.js·笔记·学习