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的方式比较麻烦,而且第二种更方便存储到缓存中,以便后续直接应用

相关推荐
訾博ZiBo30 分钟前
【Vibe Coding】001-前端界面常用布局
前端
软件技术NINI30 分钟前
MATLAB疑难诊疗:从调试到优化的全攻略
javascript·css·python·html
IT_陈寒32 分钟前
《Redis性能翻倍的7个冷门技巧,90%开发者都不知道!》
前端·人工智能·后端
歪歪10042 分钟前
React Native开发Android&IOS流程完整指南
android·开发语言·前端·react native·ios·前端框架
知识分享小能手44 分钟前
uni-app 入门学习教程,从入门到精通,uni-app组件 —— 知识点详解与实战案例(4)
前端·javascript·学习·微信小程序·小程序·前端框架·uni-app
ZYMFZ1 小时前
python面向对象
前端·数据库·python
长空任鸟飞_阿康1 小时前
在 Vue 3.5 中优雅地集成 wangEditor,并定制“AI 工具”下拉菜单(总结/润色/翻译)
前端·vue.js·人工智能
lapiii3581 小时前
快速学完React计划(第一天)
前端·react.js·前端框架
苏打水com1 小时前
从 HTML/CSS/JS 到 React:前端进阶的平滑过渡指南
前端·javascript·html