需求
需求:主题随系统切换+手动切换
步骤
1、引入css
Vue3项目中main.js引入 Element的暗黑css
src/main.js
// src/main.js
// ....
// 暗黑模式css
import 'element-plus/theme-chalk/dark/css-vars.css'
// ....
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 >
效果图
暗黑模式
明亮模式
其它
更改vueuse-color-scheme达到主题切换
不用useDark进行主题切换,可更改vueuse-color-scheme的值来达到主题切换。
注 : localStorage不用引入,vue3自带
例:
<script setup>
// localStorage不用引入,vue3自带
// dark | light | auto
localStorage.setItem('vueuse-color-scheme', 'dark')
</script>
判断系统主题 | usePreferredDark
动态判断系统主题
- 亮色主题返回 false
- 暗黑主题返回 true
链接参考
- usePreferredDark
- 备用地址:https://vueuse.org/core/usePreferredDark/
例:
<script setup>
import { usePreferredDark } from '@vueuse/core'
// 亮色主题返回 false
// 暗黑主题返回 true
const isDark = usePreferredDark()
</script>
总结
- 使用useDark达到主题切换主由 vueuse-color-scheme控制。
- useDark参考
- 备用地址 : https://vueuse.org/core/useDark/
- 除了useDark,可使用usePreferredDark判断系统主题。
- usePreferredDark参考
- 备用地址:https://vueuse.org/core/usePreferredDark/
End
2023/1/6 19:08 辑