html 切换主题,html切换主题实现方案
方案一
使用css的var属性,当然此时不考虑低版本浏览器。
1,在default.css主题根元素定义颜色变量
:root {
--main_color: #03a9f4; // 主题色
--main_light: #33baf7; // 二级主题色 常用背景为主题色下的hover
--main_lighter: #65caf5; // 三级主题色 常用border
--main_extra_light: #e6f7ff; // 四级主题色 常用background
}
2,使用时,参考css var属性。
.test{
color: var(--main_color);
}
3,在dark.css主题根元素定义替换变量
:root[theme=dark] {
--main_color: #2F4554; // 主题色
--main_light: #686a6b; // 二级主题色
--main_lighter: #9a9b9c; // 三级主题色
--main_extra_light: #d7d8d8; // 四级主题色
}
4,点击切换成dark主题时,引入dark.css,控制根节点html加them="dark"属性
省去js的实现代码,此时页面应有
...
切换成dark主题
document.getElementById('btn').οnclick=(e)=>{
document.documentElement.setAttribute('theme', 'dark')
}
可以看出dark的主题颜色变量覆盖了default的主题颜色变量
颜色变量覆盖
5,扩展,用js控制css 的变量可动态的改变颜色,实现不需要在配置一份主题颜色引入。
let btn = document.getElementById('btn')
let html = document.documentElement
btn.οnclick=(e)=>{
html.style.setProperty('--main_color', 'red')
}
方案二
引入scss,配置webpack生成多份的主题css,使用时引入对应的主题。
1,新建主题目录
image.png
2, 配置webpack.config.js打包成多份的css
const globby = require('globby');
const getCssEntry = (() => {
const paths = globby.sync('*.scss', {
cwd: path.join(__dirname, './style/themes')
});
const rs = {}
paths.forEach(h => {
if (!h.includes('_')) { // 过滤打包_的命名文件
let name = path.basename(h, '.scss')
let p = path.join('./style/themes', h);
if (!p.startsWith('.')) { // 转成相对地址
p = './' + p;
}
rs[name] = p;
}
})
return rs
});
const options = [{
mode: mode,
entry: {
app: './src/index.js',
...getCssEntry() // 引入多主题
},
......
}]
module.exports = options;
启动后可以看到生成的主题
image.png
3,默认主题app.css定义变量和引入样式
$main_color: #03a9f4; // 主题色
$main_light: #33baf7; // 二级主题色 常用背景为主题色下的hover
$main_lighter: #72cef7; // 三级主题色 常用border
$main_extra_light: #e6f7ff; // 四级主题色 常用background
@import './_common.scss';
4,深色主题dark.css定义变量和引入样式
$main_color: #2F4554; // 主题色
$main_light: #686a6b; // 二级主题色
$main_lighter: #9a9b9c; // 三级主题色
$main_extra_light: #d7d8d8; // 四级主题色
@import './_common.scss';
_common.scss下可以是
.test{
font-size: $main_color;
}
5,使用js控制link标签的引入href = "app.css" 和href="dark.css"的切换就可以了,省去js代码...。
html 切换主题,html切换主题实现方案相关推荐
- vue css变量实现多主题皮肤切换
实现方式 多主题皮肤切换有很多种实现方式,可以用css预处理器实现.可以用js实现,其实最简单的一种方式是用css变量(CSS Variable)来实现 在单页应用中,我们通过设置body的css变量 ...
- react实现线上主题动态切换功能
demo 框架选择: create-react-app + mobx + webpack5 + antdesign 说明 由于最近公司有多个主题的共存性,所以需要实现线上主题切换的功能,所以本文主要描 ...
- ant-design实现主题暗黑主题 和 亮色主题的 切换(实现网站黑白皮肤)
最近在使用vite+react + ant-design 来搭建个人站点,看到网上好多网站都实现了黑白皮肤的切换,并且ant-design帮我们实现了三套主题色,一个默认亮白色,暗黑主题和紧凑主题.于 ...
- iOS 主题色切换(附上源码)
前言 前段时间有项目要求切换主题色,简单做了个Demo试了下还行,需要手动改下颜色配置,图片设置两份,代码在设置颜色的时候使用自定义的颜色宏定义,即可实现主题色切换,有兴趣的可以看下 1.ThemeM ...
- android 黑白切换,Android实现黑白主题切换
1:创建两种主题模式 @color/colorPrimary @color/colorPrimaryDark @color/colorAccent @color/color_bg_main_light ...
- android下apkplug通用主题(皮肤)切换解决方案之主题包开发-02
该文章是基于apkplug V1.6.8 进行说明的 我们提供了一个demo做为参考,项目下载地址为:http://git.oschina.net/plug/IMThemeDemo 该 IMTheme ...
- vue-cli3主题风格切换
vue下的主题风格切换 参考https://github.com/Airubby/vu...
- vue2自定义切换主题 dark暗黑主题(暗黑模式)
前言 业务要求要做一个主题色切换,类似于暗黑模式,以前没有做过于是在网络上搜罗现成的解决方案,由于是vue2的项目,找了很久都没有找到一个好的方便的解决方案,最后在github找到一个使用css3的解 ...
- vue3+elementPlus主题动态切换2022,亲测可用!
环境 系统: win10 64 node版本 v16.13.2 vue: ^3.2.33 element-plus: ^2.2.0 开始 在线 预览效果 || git仓库地址 本文换肤的实现思路是手动 ...
- 关于项目主题换肤的一些方案
前言 前端换肤技术实施的核心是替换项目中定义的各种颜色值,一般来讲,需要将这些所有的颜色值整理在一个文件中,以便于统一管理.统一配色.所以在实际开发过程中,为页面各个模块设置对应的颜色值时,都需要在这 ...
最新文章
- 二本学医还是学计算机,二本医学院毕业的医学生,最后都去了哪里?看完莫名心酸!...
- mysql 5.7 主主配置文件_MySQL 5.7主主备份配置
- word2013自动生成目录的时候,如何调整目录格式?
- 写代码的时候图片显示不出来怎么办?
- 教你六步拆解 DDD领域驱动设计落地实践
- 解决戴尔电脑耳机插入后无效,外放正常的问题
- 最大面额钞票10的21次方
- 克鲁斯卡尔(kruskal)算法代码释义
- 解决wordcloud导出图片不清楚
- allegro中design size无法修改
- android 设置字体为幼圆_怎么设置电脑字体为幼圆 电脑字体幼圆怎么设置
- David Cutler NT之父
- matlab工具箱分析关节力矩,在matlab工具箱中,以下选项中哪个方法是用来计算动力学力矩?...
- python 中list(列表),tupe(元组),str(字符串),dict(字典)之间的相互转换
- centos7 使用 docker 部署 gitlab + gitlab-runner
- 基于FPGA的以太网UDP协议实现过程记录
- 半对数坐标matlab实现
- matlab 不允许函数定义,求解决: 错误: 此上下文中不允许函数定义。
- 陆金所突然“金盆洗手”,投的钱怎么办?
- python爬虫入门教程(非常详细),超级简单的Python爬虫教程
热门文章
- 在 IntelliJ IDEA 中部署应用到服务器(Eclipse)
- CVE漏洞—PHPCMS2008 /type.php代码注入高危漏洞预警
- 阿里云应用高可用服务公测发布
- 读懂这篇文章,你的阿里技术面就可以过关了 | Apache RocketMQ 101
- 新功能:阿里云负载均衡SLB支持HTTP访问强制跳转HTTPS
- 中国电子云发布专属云CECSTACK 以全栈信创赋能千行百业
- 立即生效!帕特·基辛格卸任 VMware 所有职务
- 超详细 | 21张图带你领略集合的线程不安全
- 【建议收藏】数据中心服务器基础知识大全
- 只了解View的事件分发是不够的,来看下输入系统对事件的处理