vue 主题切换深色系和浅色系

vue项目进行主题色切换，主要是echart、element-ui、主题色等三个位置的颜色调整

echart 和element 调用第三方框架进行切换，提前准备好其主题色

本系统主题色需要自己进行代码提取，经过网上查询，本次采用css自定义变量进行颜色主题切换，可参考下面链接

https://wanshi.netlify.app/2019/11/21/2019-11-22-vue%E9%A1%B9%E7%9B%AE%E4%BD%BF%E7%94%A8css%E5%8F%98%E9%87%8F%E5%AE%9E%E7%8E%B0%E4%B8%BB%E9%A2%98%E5%8C%96

https://juejin.cn/post/6844904122643120141
https://www.jianshu.com/p/ec9b20b55143
https://www.jianshu.com/p/35e0581629d2
https://www.jianshu.com/p/fe807f5ef394
https://juejin.cn/post/6844903981517373454
https://blog.csdn.net/chuanjiejue8361/article/details/101012978?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-2.control&dist_request_id=&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-2.control

先实现大体布局颜色的切换

1、当前项目之前用的scss，后面开发也继续用，也可以用less,看个人看好，创建variable.scss,:root是默认浅色主题，theme='dark'是深色系主题

在app.vue中进行引用scss文件，并调用其颜色变量

2、添加主题或移除主题；网上参考

if (!document.documentElement.hasAttribute('theme')) {document.documentElement.setAttribute('theme', 'dark');
}else{document.documentElement.removeAttribute('theme')
}

3、添加echart、element框架，但两者切换机制不一样，需要分别处理

echart 在调用init方法后直接增加主题参数名称就可以，具体看官网，所以直接保留其主题名称就可以

element 需要切换不同的css文件，目前我没有找到其他比较好的办法，只能走笨办法了，注意，index.css文件存放在static中，否则路径会找不到

主要思路：点击切换，调用vuex中action进行颜色切换并保存在localstorage中，方便下次用户登录保留其主题色

vue 主题切换深色系和浅色系相关推荐

VUE动态切换皮肤 VUE动态切换背景图片操作 / VUE 主题切换
上正文使用:root ,var()函数实现 1. 创建皮肤或主题 css目录一个公共主题文件 theme.css,一个main.js引入文件theme-all.css,一个单独的主题样式文件 ...
Android 判断颜色为深颜色还是浅颜色来动态调整app文字和图标颜色
Android 判断颜色为深颜色还是浅颜色来动态调整app文字和图标颜色前言解决方案1 方案2 完事前言现在,项目中有个需求就是 app 的顶部 title bar 的颜色能根据背景图片动态 ...
vue动态切换css文件_vue在线动态切换主题色方案
主要原理是利用webpack插件webpack-theme-color-replacer提取相关颜色css然后根据配置动态生成替换的css 具体实现步骤如下: 1.添加webpack插件,新建文件we ...
Vue 实现切换主题操作
Vue 实现切换主题操作参考地址:https://blog.csdn.net/youlinaixu/article/details/83447527 安装vue-cli npm install -g ...
Ant design vue动态主题切换的坑与一般性方法
本文原创,并且以吐槽为主,下面开始: Ant design vue是很优秀的框架,不过对于一般小白用户(比如我),文档方面不够友好.官方给出了主题自定义色彩的方案,但是太过于简陋,网上很多技术解决方案 ...
vue动态切换主题色
1,style文件中新建一个theme.json用来进行主题样式存储 {"blue": {"--themeColor": "#1eafc5" ...
【Web技术】1431- 总结前端主题切换的思考和现代前端样式的解决方案落地
关于本文来自:codercao https://juejin.cn/post/7106702604024938503 demo在线体验地址:https://hongqingcao.github.io ...
【Web技术】1374- 纯 JS 实现灵活的前端主题切换功能
demo在线体验地址:https://hongqingcao.github.io/v-theme-colors/ 源码地址:https://github.com/HongqingCao/v-theme ...
vue3实现主题切换功能
本文使用的技术主要包括 vue3+vite+scss 1.配置全局scss变量首先在src目录下创建styles文件夹,并新建common.scss文件,内容如下: // 文字颜色 $fontCol ...

vue 主题切换深色系和浅色系

vue 主题切换深色系和浅色系相关推荐

最新文章

热门文章