vite+vue+ts+element-plus从零开发管理后台框架(15)-暗黑模式

设置

编辑src/main.ts,引入暗黑模式样式文件。

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

编辑src/views/Main.vuetemplateheader-right下最前面添加如下代码。

<el-switch v-model="isDark" style="margin-right: 15px;" active-action-icon="moon-night" inactive-action-icon="sunny" />

script段引入并实例化useDark

import { useFullscreen, useDark } from '@vueuse/core'
const { isFullscreen, toggle } = useFullscreen()
const isDark = useDark()

测试

点击切换模式开关已经可以切换模式了

切换模式

暗黑模式

暗黑模式

亮色模式

亮色模式

问题

先设置成暗黑模式,浏览器访问 localhost:5173/#/login 后再刷新,发现网页变成了亮色模式。这是因为模式是在主页视图初始化的,我们应该在根视图初始化。

编辑src/App.vue,增加script段,初始化亮色和暗黑模式。

<script setup lang="ts">
import { useDark } from '@vueuse/core'


useDark()
</script>

再重复上面的步骤,发现问题已经解决了。

本作品采用《CC 协议》,转载必须注明作者和本文链接
讨论数量: 0
(= ̄ω ̄=)··· 暂无内容!

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!