【Vue3】vue3&Element-plus 主题切换

需求

需求：主题随系统切换+手动切换

步骤

1、引入css

Vue3项目中main.js引入 Element的暗黑css

src/main.js

// src/main.js
// ....

// 暗黑模式css
import 'element-plus/theme-chalk/dark/css-vars.css'

// ....
1
2
3
4
5
6
7

---

2、switch按钮切换主题

配合Vue的 useDark 使用主题切换

• useDark链接参考
• 备用地址：https://vueuse.org/core/useDark/

注意： useDark 随系统主题变化而变化。

useDark 会自动生成一个本地存储值（vueuse-color-scheme），主题切换由该值控制，如下图

• 键: vueuse-color-scheme
• 值：auto | light | dark
  • auto 随系统主题切换
  • light 亮色主题
  • dark 暗色主题
    

---

例：

src/view/HomeView.vue

<template>
	<!-- HomeView.vue -->
	<div class="theme-list">
         <p>亮色<el-divider direction="vertical" />暗黑</p>
         <!--  v-model 绑定 themeConfig.isDark-->
         <el-switch
           v-model="themeConfig.isDark"
           inline-prompt
           active-icon="Sunny"
           inactive-icon="Moon"
         />
     </div>
</template>
<script setup>
// 1. 引入useDark 
import { useDark } from '@vueuse/core';

// 2. 使用useDark 
const isDark = useDark()

// 3. 主题配置
const themeConfig = reactive({
  isDark: isDark,
});
</script >
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

效果图

暗黑模式

---

明亮模式

---

其它

更改vueuse-color-scheme达到主题切换

不用useDark进行主题切换，可更改vueuse-color-scheme的值来达到主题切换。

注 : localStorage不用引入，vue3自带
例：

<script setup>

// localStorage不用引入，vue3自带 
// dark | light | auto
localStorage.setItem('vueuse-color-scheme', 'dark')

</script>
1
2
3
4
5
6
7

---

判断系统主题 | usePreferredDark

动态判断系统主题

• 亮色主题返回 false
• 暗黑主题返回 true

---

链接参考

• usePreferredDark
• 备用地址：https://vueuse.org/core/usePreferredDark/

例：

<script setup>

import { usePreferredDark } from '@vueuse/core'

// 亮色主题返回 false
// 暗黑主题返回 true
const isDark = usePreferredDark()
</script>
1
2
3
4
5
6
7
8

---

总结

1. 使用useDark达到主题切换主由 vueuse-color-scheme控制。
   • useDark参考
   • 备用地址 ： https://vueuse.org/core/useDark/
2. 除了useDark，可使用usePreferredDark判断系统主题。
   • usePreferredDark参考
   • 备用地址：https://vueuse.org/core/usePreferredDark/

---

End

2023/1/6 19:08 辑

---

推荐

1. 【vue3】vue3使用Echarts（组合式 | setup | provide | inject)
2. 【vue3】vue3路由跳转的方式
3. 【Vue3&tinymce】Vue3使用tinymce富文本编辑器