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

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

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

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.youkuaiyun.com/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元/天 解锁文章
【VueUse库各模块函数使用方法系列---Browser模块中篇】
xiejunlan的博客
04-26 2096
vueUseBrowser函数useGamepad 函数简介使用方法useImage 函数简介使用方法useMediaControls 函数简介使用方法useMediaQuery 函数简介使用方法useMemory 函数简介使用方法useObjectUrl 函数简介使用方法usePermission 函数简介使用方法usePreferredColorScheme 函数简介使用方法usePreferredContrast 函数简介使用方法usePreferredDark 函数简介使用方法。
elementUI 亮暗色切换和主题色设置 scss
Liu_JiaqiPro的博客
10-22 3218
首先要创建两套颜色主题 第一步：在根目录下创建存放主题.scss文件的目录，在改目录下创建主题.scss 第二步：设置两套背景和文字颜色 颜色的设置：尽量少，背景和字体颜色要相反，否则看不清。但是还要看UI的安排。 $themes: ( light: ( background_color: #XXXXXX, //背景色 background_color_hei: #XXXXXX, ...
vue项目中实现换肤（包括颜色、样式、图片）
Sophiego的博客
02-07 1万+
使用vue-cli 搭建的项目，页面中很多模块都用组件实现的，当初每个组件的样式都写在了自己的style里面，本来想每个组件提取两个css文件，根据localstorage中存储的值来判断切换不同的css； if(localStorage.getItem("colorstatus")=='neon'||localStorage.getItem("colorstatus")==null){ lo
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 实现主题切换（明暗）
最新发布
qq_48701993的博客
02-16 362
vue实现主题切换
vue 自定义主题色
weixin_40466351的博客
07-16 1044
vue 自定义主题色
vue3 实现主题色以及修改主题色
鹤渺的星球
12-25 5222
通过切换 HTML 文档中 标签的类名来实现更改系统主题色。
Vue项目如何配置、切换主题颜色（mixin + scss方式，简单高效）
热门推荐
h395910638的博客
02-28 1万+
Vue项目主题切换，简单高效，一天搞定三个主题！
vue项目设置主题色
qq_58174484的博客
05-11 497
在vue开发过程中，很多页面为了保持主题颜色统一，且方便后期管理，通常会设有主题色，通过主题色可以使得页面上的按钮单选框等控件保持颜色统一。1.先建立一个js文件用于存放主题色，如style.mixin.js。2.导出计算属性，每个计算属性返回目标颜色。希望本文会对您有所帮助~ ^_^
element深色系资源
08-01
本资源集包含了配置和实现 Element 深色系主题的相关文件。 在 Element 官网上，你可以找到一个名为“主题定制”的功能。通过这个功能，你可以上传一个配置文件 `config.json`，该文件定义了颜色、字体等视觉元素的...
vue+leaflet使用leaflet.tilelayer.colorfilter将底图改成暗黑色
weixin_43815740的博客
07-16 842
【代码】vue+leaflet使用leaflet.tilelayer.colorfilter将底图改成暗黑色。
vue切换主题色
A_rui_的博客
04-15 3586
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
【vue3】：主题色解决方案
做技术，坚持才是最重要的，一时的热情只是暂时的进步
07-10 1498
修改主题色关键点是 色值不能写死。在该解决方案中，主要涉及的是 element-plus 以及 非 element-plus 的主题色修改。对于非 element-plus 解决方法如下：1、全局定义scss变量，页面绑定该变量，通过修改该变量值，从而使页面主题色进行修改。2、并且该变量要实现响应式，永久保存（避免页面刷新色值被覆盖）。因此需要结合本地缓存以及vuex将值保存好。3、初始时通过 getters 获取主题色的同时，使用 generateColors 函数生成新的色值表，与 scss色值表 进行
vue主题颜色切换
王兆镇的博客
06-08 2512
/ 蓝色 /***********************************************************************************************************************/ .Blue {// 左侧整体背景颜色} //左侧导航背景//左侧导航背景.el-menu {} //左侧导航背景鼠标焦点颜色 --el-color-primary-light-9 : #3656b5;} // logo颜色。
Electron DevTools Theme dark 设置暗黑主题
qq_42709514的博客
01-25 1734
Electron 中的DevTools设置暗黑主题 main.js 文件 // 模块来控制应用程序的生命周期并创建本地浏览器窗口 const { app, BrowserWindow, ipcMain, nativeTheme } = require('electron') const path = require('path') // 定义一个窗口对象 var mainWindow = null; app.on("ready", ()=>{ // 创建浏览器窗口 mainWindow =
vue中切换主题颜色
qq_39029949的博客
05-06 2251
vue中切换主题颜色
vue动态更改主题颜色的一些想法
domyself918的专栏
08-16 2272
vite+vue3动态更改全局scss变量
js关于颜色hex、rgb的转换和对调整颜色深浅的处理
weixin_42274805的博客
10-21 1678
//hex颜色转rgb颜色 export function HexToRgb(str) { var r = /^\#?[0-9A-F]{6}$/; //test方法检查在字符串中是否存在一个模式，如果存在则返回true，否则返回false if (!r.test(str)) return window.alert('输入错误的hex'); //replace替换查找的到的字符串 str = str.replace('#', ''); //match得到查询数组 var hxs .
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值