Vue3 Element-Plus 主题切换方案

原创 已于 2023-09-12 14:55:58 修改 · 937 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端 #javascript

于 2023-09-12 14:47:51 首次发布
本文介绍了如何在HTML文件中通过data-theme属性设置不同主题，创建独立的CSS或SCSS样式文件，定义并区分不同主题的样式变量，以及如何实现页面的动态主题切换。

1. .html 文件中，设置 <html> 标签的 “data-theme” 属性

2. 单独创建主题的样式文件 .css/.scss ，并导入

3. 样式文件中创建不同主题对象

4. 定义不同主题中的样式变量

注意：左右两个主题的变量名一样，值不同

5. 页面样式赋值

6. 通过切换功能触发，可实现不同主题切换

1H1R1M
关注
webpack-theme-color-replacer自定义element-ui主题
farme_guan的博客
01-13 3777
前言 因为项目采用UI组件element-ui，需要部署后（打包后）设置主题，在网上找了一遍，如下几种方法。 1/使用全局样式覆盖（工作量大） 2/自定义element-ui配色，element-ui提供了一个配置页面和配色工具，可以本地生成固定的几套主题色，以便来实现主题切换（编译后无法修改） 3/ 通过后端返回css文件，前端配合使用localStorage，储存主题对应的参数，后端返回对应的css主题文件（和方法2一样，需要先生成多个主题css文件） 4/通过改变element-ui的样..
5分钟搞定 Vue3+Element-Plus 项目主题色定制
chenyajundd的博客
08-11 7443
主题色是指一个网站或应用的主色调，是体现整体风格的一个重要标志。
webpack-theme-color-replacer+Element最佳实践
R_Here_Waiting的博客
08-27 541
近期项目有一个需求，需要全局更换ELement的主题色，查询了许多方案，觉得使用插件是个不错的选择，于是选用了webpack-theme-color-replacer。网上关于该插件的文章大同小异，参考了几篇文章后，终于实现了该功能，既可以实现主题色的在线选择切换，也可以批量替换所有主题色。
vue3---elementplus主题颜色设置教程
最新发布
2401_87325937的博客
11-14 382
/ element组件库主题自定义$colors: ("primary": (//主题色),"success": (//成功色),"warning": (//警告色),"danger": (//危险色),"error": (//错误色),"info": (//信息色),),
Vue-element自定义切换主题
03-10
Vue-element自定义切换主题，可以自己随意添加需要的颜色值
VUE项目实现主题切换的多种方法
01-21
需求是 做一个深色主题和浅色主题切换的效果 方法一 多套css 这个方法也是最简单，也是最无聊的。 <!-- 中心 --> 动态获取父级class名称，进行一个父级class的多次定义 {{ className == box ? 开灯 : 关灯 }} [removed] export default { name: Centre, data() { re
Vue3 + Element Plus 项目实现自定义主题切换
m0_65029152的博客
12-19 9261
vue3 + Element Plus 实现自定义主题切换
element-plus切换主题
04-23 1479
Element Plus 是一款基于 Vue 3 的组件库，它继承了 Element UI 的许多特性，并对其进行了更新和优化以适应 Vue 3。：首先，确保你已经安装了 Element Plus。：Element Plus 提供了多种预设主题，你可以通过 CDN 或者 npm 安装的方式来引入。：在应用的入口文件（如 main.js 或 main.ts）中配置主题。
vue-element-plus-admin：一套基于vue3、element-plus、ts、vite的后台集成方案
chenchuang0128的博客
03-11 7795
vue-element-plus-admin：一套基于vue3、element-plus、ts、vite的后台集成方案，中后台前端解决方案的探索与实践。摘要：本文主要介绍了 vue-element-plus-admin，一个基于 element-plus 的免费开源中后台前端模版。文章首先介绍了该模版的开发背景和技术栈，然后阐述了其定位和特点，最后讨论了如何基于该模版进行二次开发。一、引言随着前端技术的不断发展，中后台前端解决方案的需求越来越强烈。为了满足这一需求，许多开源模版和框架应运而生。
精选资源
vue3+element-plus+admin
04-12
Vue3 + Element-Plus + Admin 是一个现代的前端开发框架，用于构建高效、可复用且易维护的企业级管理后台应用。Vue3 是 Vue.js 的最新版本，它引入了大量新特性和优化，提升了开发效率和性能。Element-Plus 是 ...
精选资源
vue-element-admin 集成框架设置中文语言
11-10
在"vue-element-admin 集成框架设置中文语言"这个主题中，我们主要讨论如何在vue-element-admin项目中实现中文语言的集成。Element UI本身提供了多语言支持，包括中文，因此在vue-element-admin中设置中文语言并不...
基于vue3、typescript、element-plus、vite的后台管理系统.zip
12-01
vue3vitetypescriptvue-element-plus-admin 定位为后台集成方案，作为基础模板并不适合进行二次开发。因为它集成了很多你可能用不到的功能，会造成很多代码冗余。如果你的项目不注重这个问题，也可以直接基于它进行...
vue-element-admin 是基于 Vue2.0，配合使用 Element-UI 组件库的一个前端管理后台集成
11-07
"vue-element-admin" 是一个基于 Vue2.0 和 Element-UI 的前端管理后台集成项目，它提供了一个完整的后台管理系统的模板，包括登录/注册、权限管理、多语言切换、页面布局、图表展示等功能。开发者可以基于此项目...
Element-Plus主题切换
ExtremeExplorer的博客
09-25 1159
基于 Vue3 + TypeScript + Scss + Element-plus 实现 Element-plus 主题切换。Element-plus 主题切换涉及了的和，因此在一些个别的浏览器和老版本的浏览器上无法实现该动画效果。
Vue3+ElementPlus 实现动态主题切换
韶君的博客
09-25 3548
Vue3+ElementPlus 实现动态主题切换
vue3+elementplus动态主题切换
weixin_50854136的博客
11-30 1554
vue项目动态切换主题颜色
Vue3 + Element Plus 实现企业级多主题切换：从本地配置到远程动态加载
一名热衷于技术的全栈开发者，专注于前端与后端的全面技术探索。在这里，我将分享我在技术领域的学习与成长，助力更多开发者的进步。
04-16 1816
在中大型管理系统、SaaS 多租户系统中，不同客户对“品牌样式”有不同需求。为了提高用户体验和界面一致性，动态主题切换（比如暗黑模式、品牌色变化） 已成为项目中必不可少的功能。本文将从实现原理出发，带你构建一个 支持运行时切换、自动持久化、支持多主题预设 的 Vue3 多主题系统。✅ 推荐：CSS变量 + 切换方式（兼顾运行时性能与灵活性） 2. 创建主题切换逻辑 3. 在 main.ts 中初始化主题 4. 主题切换组件 五、组件内使用 CSS 变量 六、支持用户自定义主题色（进阶）
Vue3 + Element Plus 后台管理项目实现动态切换主题色
ooooooooooos的博客
12-11 1457
Vue3 + Element Plus 后台管理项目实现动态切换主题色
vue3 element-plus 暗黑模式（主题切换）简易版
热门推荐
Raywh的博客
06-08 1万+
节省电池寿命：在有机发光二极管（OLED）或柔性有机发光二极管（AMOLED）屏幕上，黑色像素是不发光的，因此在暗黑模式下使用这些屏幕可以节省电池寿命，延长续航时间。存储用户选择：为了记住用户的主题偏好，可以使用本地存储（如localStorage）来保存用户选择的主题。创建两套样式表，一套是亮色主题的样式表，另一套是暗黑主题的样式表。根据当前选择的主题，动态加载相应的样式表。总体来说，通过按钮的点击事件，动态切换主题，并根据主题切换来添加或移除HTML元素的类名，从而实现了暗黑模式的切换效果。
vue3 element-plus黑白切换原理
12-19
Vue3 Element Plus 中的黑白主题切换通常通过CSS变量（CSS Custom Properties）和响应式系统来实现。Element Plus 提供了一个全局的主题管理模块，它定义了一组基础的颜色变量，包括前景色、背景色等。当用户选择黑白模式时，会改变这些变量的值，如将前景色设为白色，背景色设为黑色。 具体步骤如下： 1. **创建主题变量**：在 `element-plus/packages/theme-chalk/src/index.js` 或类似文件中，定义了初始的主题颜色和其他样式属性，并设置默认值，比如 `$primary-color` 对应默认主题的颜色。 ```javascript // 示例 export const color = { primary: &#39;#142338&#39;, secondary: &#39;#495A64&#39;, success: &#39;#67C23A&#39;, warning: &#39;#E0A933&#39;, danger: &#39;#ED5565&#39;, info: &#39;#3F51B5&#39;, text: &#39;#485763&#39;, // 黑白模式下的颜色 darkText: &#39;#fff&#39;, darkBackground: &#39;#000&#39;, }; ``` 2. **监听状态变化**：Vue组件中，通过 Vue 的 `watch` 或者更推荐的 `setup` 函数中的 `useEffect` 来监听主题状态的变化。例如，当状态变为 "dark" 时，更新主题相关的CSS变量。 ```javascript import { useTheme } from &#39;element-plus&#39;; setup() { const { toggleDarkMode, isDarkMode } = useTheme(); useEffect(() => { toggleDarkMode(); // 当切换到黑暗模式时，更新CSS变量 document.documentElement.style.setProperty(&#39;--color-primary&#39;, color.darkText); document.documentElement.style.setProperty(&#39;--color-background&#39;, color.darkBackground); }, [toggleDarkMode, color]); } ``` 3. **UI组件响应**：元素 UI 组件会检测并应用这些CSS变量，使得文本、边框、背景等视觉效果相应地改变，达到黑白切换的效果。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值