devbox
你好赵伟
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

Vue3 + Element Plus 项目实现自定义主题切换_vue3改变element主题变量

作者：你好赵伟 | 2024-02-14 22:09:38

赞

踩

vue3改变element主题变量

一、创建vue 3 项目

选择自己放置项目的文件夹（我自己的是E：\...\element_plus_theme）；

输入命令【vue create 项目名】（项目名称自己起一个就行，比如switch_theme），回车；

选择vue3，再回车，等待项目创建完成；

输入 【cd switch_theme】命令，切换到新建的项目目录下；

再输入【yarn serve 】命令，启动项目；

确保项目能够正常启动成功；

二、引入 Element Plus

1、安装element-plus 依赖

在终端输入命令【 npm i element-plus --save】，安装element plus；

 npm i element-plus --save

2、main.js引入element-plus

这里我们先不考虑大小问题，采用完整引入，在项目的入口文件【main.js】中，代码如下：

  1. import { createApp } from 'vue'
  2. import App from './App.vue'
  3.  
  4. import ElementPlus from 'element-plus';
  5. import 'element-plus/dist/index.css';
  6.  
  7. const app = createApp(App);
  8.  
  9. app.use(ElementPlus)
  10.  
  11. app.mount('#app');

3、测试

为了确保Element Plus成功引入，我们在项目的【src/HelloWorld.vue】文件中进行测试；

这里是用【el-button】组件进行测试

<el-button type="primary">测试按钮</el-button>

可以看到我们添加的按钮组件已经成功加载；

三、切换暗黑模式

 1、引入样式文件

在项目的入口文件【main.js】文件中，引入样式文件

import 'element-plus/theme-chalk/dark/css-vars.css'

【mian.js】完整代码

  1. import { createApp } from 'vue'
  2. import App from './App.vue'
  3.  
  4. import ElementPlus from 'element-plus';
  5. import 'element-plus/dist/index.css';
  6.  
  7. import 'element-plus/theme-chalk/dark/css-vars.css'
  8.  
  9. const app = createApp(App);
  10.  
  11. app.use(ElementPlus)
  12.  
  13. app.mount('#app');

 2、绑定class

找到项目中的【index.html】文件 

给html标签绑定class

<html lang="" class="dark">

不出问题的话，现在整个项目已经是处于暗黑模式了

可是我们怎么能够切换回去呢？能不能实现动态控制？

答案肯定是可以的，接着往下看！

四、动态切换

1、【HelloWorld.vue】组件代码 

添加一个el-switch开关组件，实现两种模式的自由切换； 

  1. <template>
  2.   <div class="hello">
  3.     <h1>{{ msg }}</h1>
  4.     <div>
  5.       <el-switch
  6.         v-model="isDark"
  7.         :active-icon="Moon"
  8.         :inactive-icon="Sunny"
  9.         inline-prompt
  10.         @change="toggleDark"
  11.       />
  12.     </div>
  13.   </div>
  14. </template>
  15.  
  16. <script setup>
  17. import { Sunny, Moon } from "@element-plus/icons-vue";
  18. import { useDark, useToggle } from "@vueuse/core";
  19. const props = defineProps({
  20.   msg: String,
  21. });
  22. const isDark = useDark();
  23.  
  24. const toggleDark = useToggle(isDark);
  25. </script>
  26.  
  27. <style scoped>
  28. </style>

2、实现效果

（1）常规模式

（2）暗黑模式

 （3）注意

如果你跟我一样使用的是刚初始化的项目，记得调整【App.vue】中的全局样式，否则会影响呈现效果（在这里调整了对文字颜色的样式设置）；

五、自定义样式

有时候难免会遇到需要改变暗黑模式下的样式的问题；

例如：【要求背景颜色可以自定义】；

这里介绍两种简单的实现方式：css样式覆盖、css变量覆盖；

1、css样式覆盖

采用css样式覆盖的方式比较简单，只需要重写我们需要的样式即可；

（1）新建css样式文件

在项目的【src】文件夹下创建一个样式文件夹【styles】，在样式文件夹中新建【dark.css】样式文件；

（2）引入样式文件

在【main.js】中引入【dark.css】文件；

import '@/styles/dark.css'  // 引入自定义样式文件

这里一定要注意引入的顺序，必须在之前引入的暗黑模式样式文件之后，才能对其中的样式进行自定义覆盖；

（3）编写样式文件

在【dark.css】中编写自己的目标样式即可； 

  1. /* 自定义暗黑模式样式 */
  2. html.dark {
  3.   background: #3f8173;
  4. }

（4）实现效果

 可以看到在暗黑模式下，背景变成了我们所设置的颜色；

2、css变量覆盖

（1）新建css变量文件 

在项目的【src/styles】文件夹中新建【dark-var.css】样式文件； 

 

（2）引入css变量文件

在【main.js】中引入【dark-var.css】文件； 

import '@/styles/dark-var.css'; // 引入css变量文件

（3）定义变量

使用【--】开头自定义需要的样式变量，例如定义一个背景色；（ 这样做的好处是，一次定义可多次使用）

  • 变量名：--zyl-bg-color
  • 变量值：rgb(78, 119, 143)

用【var()函数】使用变量；

  • var(--zyl-bg-color)
  1. :root {
  2.     --zyl-bg-color: rgb(78, 119, 143);
  3. }
  4.  
  5. html.dark {
  6.     background: var(--zyl-bg-color);
  7. }

（5）查看效果

3、JS动态切换样式

自己定义的css变量，可以在项目中通过js动态的改变变量值，实现样式的动态切换；

【HelloWorld.vue】

  1. <template>
  2.   <div class="hello">
  3.     <h1>{{ msg }}</h1>
  4.     <div>
  5.       <el-switch
  6.         v-model="isDark"
  7.         :active-icon="Moon"
  8.         :inactive-icon="Sunny"
  9.         inline-prompt
  10.         @change="toggleDark"
  11.       />
  12.     </div>
  13.     <el-button @click="changeBgc('rgb(78, 119, 143)')">蓝色</el-button>
  14.     <el-button @click="changeBgc('#ccc')">深灰色</el-button>
  15.     <el-button @click="changeBgc('pink')">粉色</el-button>
  16.     <div>测试文字测试文字测试文字</div>
  17.   </div>
  18. </template>
  19.  
  20. <script setup>
  21. import { Sunny, Moon } from "@element-plus/icons-vue";
  22. import { useDark, useToggle } from "@vueuse/core";
  23. const props = defineProps({
  24.   msg: String,
  25. });
  26. const isDark = useDark();
  27.  
  28. const toggleDark = useToggle(isDark);
  29.  
  30. function changeBgc(bgc) {
  31.   let domStyle = document.documentElement.style;
  32.   domStyle.setProperty("--zyl-bg-color", bgc);
  33. }
  34. </script>
  35.  
  36. <style scoped>
  37. </style>

主要是使用【CSSStyleDeclaration setProperty() 方法】设置css属性；

实现效果

不难发现我们在非暗黑模式下是切换不了的，这是因为我们的样式设置在【html.dark】选择器中；

也就是说只是在暗黑模式下才能切换，所以我们可以在常规模式下将按钮禁用，更符合需求；

  1. <el-button @click="changeBgc('rgb(78, 119, 143)')" :disabled="!isDark">蓝色</el-button>
  2. <el-button @click="changeBgc('#ccc')" :disabled="!isDark">深灰色</el-button>
  3. <el-button @click="changeBgc('pink')" :disabled="!isDark">粉色</el-button>

六、完整代码

【main.js】

  1. import { createApp } from 'vue';
  2. import App from './App.vue';
  3.  
  4. import ElementPlus from 'element-plus';
  5. import 'element-plus/dist/index.css';
  6.  
  7. import 'element-plus/theme-chalk/dark/css-vars.css';
  8. // import '@/styles/dark.css';  // 引入自定义样式文件
  9.  
  10. import '@/styles/dark-var.css'; // 引入css变量文件
  11.  
  12. const app = createApp(App);
  13. app.use(ElementPlus);
  14. app.mount('#app');

【HelloWorld.vue】 

  1. <template>
  2.   <div class="hello">
  3.     <h1>{{ msg }}</h1>
  4.     <div>
  5.       <el-switch
  6.         v-model="isDark"
  7.         :active-icon="Moon"
  8.         :inactive-icon="Sunny"
  9.         inline-prompt
  10.         @change="toggleDark"
  11.       />
  12.     </div>
  13.     <el-button @click="changeBgc('rgb(78, 119, 143)')" :disabled="!isDark">蓝色</el-button>
  14.     <el-button @click="changeBgc('#ccc')" :disabled="!isDark">深灰色</el-button>
  15.     <el-button @click="changeBgc('pink')" :disabled="!isDark">粉色</el-button>
  16.     <div>测试文字测试文字测试文字</div>
  17.   </div>
  18. </template>
  19.  
  20. <script setup>
  21. import { Sunny, Moon } from "@element-plus/icons-vue";
  22. import { useDark, useToggle } from "@vueuse/core";
  23. const props = defineProps({
  24.   msg: String,
  25. });
  26. const isDark = useDark();
  27.  
  28. const toggleDark = useToggle(isDark);
  29.  
  30. function changeBgc(bgc) {
  31.   let domStyle = document.documentElement.style;
  32.   domStyle.setProperty("--zyl-bg-color", bgc);
  33. }
  34. </script>
  35.  
  36. <style scoped>
  37. </style>

【App.vue】

  1. <template>
  2.   <img alt="Vue logo" src="./assets/logo.png">
  3.   <HelloWorld msg="Welcome to Your Vue.js App"/>
  4. </template>
  5.  
  6. <script>
  7. import HelloWorld from './components/HelloWorld.vue'
  8.  
  9. export default {
  10.   name: 'App',
  11.   components: {
  12.     HelloWorld
  13.   }
  14. }
  15. </script>
  16.  
  17. <style>
  18. #app {
  19.   font-family: Avenir, Helvetica, Arial, sans-serif;
  20.   -webkit-font-smoothing: antialiased;
  21.   -moz-osx-font-smoothing: grayscale;
  22.   text-align: center;
  23.   /* color: #2c3e50; */
  24.   margin-top: 60px;
  25. }
  26. </style>

【dark-var.css】

  1. :root {
  2.     --zyl-bg-color: #3f8173;
  3. }
  4.  
  5. html.dark {
  6.     background: var(--zyl-bg-color);
  7. }

【dark.css】

  1. html.dark {
  2.     /* 自定义深色背景颜色 */
  3.     background: #3f8173;
  4. }

【目录结构】

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/你好赵伟/article/detail/82045
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号