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

mirahs 的个人博客 / 11 / 0 / 创建于 2周前

设置

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

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

编辑src/views/Main.vue，template段header-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 协议》，转载必须注明作者和本文链接

274 声望

暂无个人描述~

推荐文章：

更多推荐...

vite2-electron-vadmin 一款清爽UI中后台权限管理系统|Electron-Vue3后台 12 / 3 |

基于 Vue2.0 开发的 Lumen IM 在线聊天应用 33 / 15 |

electron+vue 仿微信客户端聊天|electron 仿微信界面|electron 聊天实例 10 / 5 |

在 vue-cli 3.0 + 里面对 axios 封装 18 / 3 |

讨论数量: 0

(=￣ω￣=)··· 暂无内容！

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

帮助

未填写

私信

文章归档

14 篇 2025 年 3 月 8 篇 2025 年 2 月 18 篇 2024 年 7 月 14 篇 2024 年 6 月 43 篇 2024 年 5 月 2 篇 2024 年 4 月 9 篇 2023 年 11 月

1周前 vite+vue+ts+element-plus从零开发管理后台框架(21)-多页签点击切换 1周前 vite+vue+ts+element-plus从零开发管理后台框架(20)-多页签移除和跳转 1周前 vite+vue+ts+element-plus从零开发管理后台框架(19)-多页签 1周前 vite+vue+ts+element-plus从零开发管理后台框架(18)-主颜色优化 2周前 vite+vue+ts+element-plus从零开发管理后台框架(17)-主颜色动态设置

5 现在写从零组装一个简单的web框架系列文档会有人看吗？ 4 使用Composer从零开发一个简单的web框架(01)-项目初始化 2 使用Composer从零开发一个简单的restful框架(01)-项目初始化 2 vite+vue+ts+element-plus从零开发管理后台框架(01)-初始化 2 vite+vue+ts+element-plus从零开发管理后台框架(00)-说明

成为赞助商