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

最新推荐文章于 2024-07-30 11:21:55 发布
最新推荐文章于 2024-07-30 11:21:55 发布
阅读量4.6k 收藏 13
点赞数 2
分类专栏： #vue切换主题色 vue +element 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fly_vip/article/details/114368802
版权
本文介绍了在Vue项目中如何实现深色和浅色主题的切换，主要涉及echart、Element-UI的颜色调整，以及使用CSS自定义变量来管理主题色。通过引用scss文件、动态添加或移除主题，以及针对echart和Element分别处理切换机制，实现了主题色的平滑过渡。用户切换的主题色将被保存在localstorage中，以保持登录后的设置。
摘要由CSDN通过智能技术生成

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=distribu

最低0.47元/天 解锁文章
fly_vip
关注
专栏目录
vue中切换主题颜色
qq_39029949的博客
05-06 2072
vue中切换主题颜色
vue项目中实现换肤（包括颜色、样式、图片）
热门推荐
Sophiego的博客
02-07 1万+
使用vue-cli 搭建的项目，页面中很多模块都用组件实现的，当初每个组件的样式都写在了自己的style里面，本来想每个组件提取两个css文件，根据localstorage中存储的值来判断切换不同的css； if(localStorage.getItem("colorstatus")=='neon'||localStorage.getItem("colorstatus")==null){ lo
在Vue3中创建动态主题切换功能
最新发布
有我更精彩的博客
07-30 1153
通过以上步骤，我们在Vue 3中成功实现了一个动态主题切换功能。这个功能不仅提升了用户体验，也为后续功能的扩展奠定了基础。你可以根据自己的需求，进一步优化和扩展这一功能，比如使用本地存储保存用户选择的主题，或者为不同的页面提供不同的主题配置等。最后问候亲爱的朋友们，并邀请你们阅读我的全新著作。
vue在线动态切换主题色方案
11-21
主要原理是利用webpack插件webpack-theme-color-replacer提取相关颜色css然后根据配置动态生成替换的css 具体实现步骤如下： 1.添加webpack插件，新建文件webpack/themePlugin.js const ThemeColorReplacer = require('webpack-theme-color-replacer') const forElementUI = require('webpack-theme-color-replacer/forElementUI') const config = require('../src/conf
vue 自定义主题色
weixin_40466351的博客
07-16 1000
vue 自定义主题色
vue3 实现主题色以及修改主题色
鹤渺的星球
12-25 4159
通过切换 HTML 文档中 标签的类名来实现更改系统主题色。
Vue项目如何配置、切换主题颜色（mixin + scss方式，简单高效）
h395910638的博客
02-28 9904
Vue项目主题切换，简单高效，一天搞定三个主题！
vue切换主题色
A_rui_的博客
04-15 3534
vue+scss切换主题色 1.创建global.scss样式文件，在app.vue 引入 @import '@/assets/style/global.scss'; 2.dark.scss和light.scss为两个主题色样式配置变量文件，在global.scss中引入。两个文件定义样式变量，分别引用theme.scss,用于定义类名使用样式 //globals.scss @import "./theme/light.scss"; @import "./theme/dark.scss"; //dar
element深色系资源
08-01
本资源集包含了配置和实现 Element 深色系主题的相关文件。 在 Element 官网上，你可以找到一个名为“主题定制”的功能。通过这个功能，你可以上传一个配置文件 `config.json`，该文件定义了颜色、字体等视觉元素的...
vue项目中使用Echarts
m0_46364033的博客
01-13 384
首先看一下我页面所需展示的样子，如下： 最开始的时候呢，我先去官网(http://echarts.apache.org/zh/index.html)稍作了解，然后转战到看其他大佬的做法，后面选了一个代码齐全的（(https://www.cnblogs.com/ldlx-mars/p/7815328.html)），直接复制了下来，但是呢和我自己需要的echarts类型、所需数据以及主题颜色都不对口，这个代码呢就是把官网上的给一样搞下来了，但是其中一些东西就要自己去动动手指改改了。 正式步骤来了： 做一个自
【VueUse库各模块函数使用方法系列---Browser模块中篇】
xiejunlan的博客
04-26 1825
vueUseBrowser函数useGamepad 函数简介使用方法useImage 函数简介使用方法useMediaControls 函数简介使用方法useMediaQuery 函数简介使用方法useMemory 函数简介使用方法useObjectUrl 函数简介使用方法usePermission 函数简介使用方法usePreferredColorScheme 函数简介使用方法usePreferredContrast 函数简介使用方法usePreferredDark 函数简介使用方法。
elementUI 亮暗色切换和主题色设置 scss
Liu_JiaqiPro的博客
10-22 3059
首先要创建两套颜色主题 第一步：在根目录下创建存放主题.scss文件的目录，在改目录下创建主题.scss 第二步：设置两套背景和文字颜色 颜色的设置：尽量少，背景和字体颜色要相反，否则看不清。但是还要看UI的安排。 $themes: ( light: ( background_color: #XXXXXX, //背景色 background_color_hei: #XXXXXX, ...
【vue3】：主题色解决方案
做技术，坚持才是最重要的，一时的热情只是暂时的进步
07-10 1396
修改主题色关键点是 色值不能写死。在该解决方案中，主要涉及的是 element-plus 以及 非 element-plus 的主题色修改。对于非 element-plus 解决方法如下：1、全局定义scss变量，页面绑定该变量，通过修改该变量值，从而使页面主题色进行修改。2、并且该变量要实现响应式，永久保存（避免页面刷新色值被覆盖）。因此需要结合本地缓存以及vuex将值保存好。3、初始时通过 getters 获取主题色的同时，使用 generateColors 函数生成新的色值表，与 scss色值表 进行
vue主题颜色切换
王兆镇的博客
06-08 2149
/ 蓝色 /***********************************************************************************************************************/ .Blue {// 左侧整体背景颜色} //左侧导航背景//左侧导航背景.el-menu {} //左侧导航背景鼠标焦点颜色 --el-color-primary-light-9 : #3656b5;} // logo颜色。
Electron DevTools Theme dark 设置暗黑主题
qq_42709514的博客
01-25 1620
Electron 中的DevTools设置暗黑主题 main.js 文件 // 模块来控制应用程序的生命周期并创建本地浏览器窗口 const { app, BrowserWindow, ipcMain, nativeTheme } = require('electron') const path = require('path') // 定义一个窗口对象 var mainWindow = null; app.on("ready", ()=>{ // 创建浏览器窗口 mainWindow =
vue动态更改主题颜色的一些想法
domyself918的专栏
08-16 2146
vite+vue3动态更改全局scss变量
vue项目设置多套主题色
weixin_42998230的博客
06-30 2394
    公司移动端项目需要设置多套主题色，后端配置使用哪套移动端显示对应主题色，实现思路为：写对应套数的样式文件，根据接口返回的设置值选用对应样式主题。 1、App文件中进行判断引入主题文件，App.vue： <script> export default { data() { return {} }, onLaunch: function() { console.log('App Launch') }, onShow: function() { //接口
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值