vue3-element-admin暗黑模式：自动切换与手动控制-优快云博客

vue3-element-admin暗黑模式：自动切换与手动控制

【免费下载链接】vue3-element-admin 基于 vue3 + vite4 + typescript + element-plus 构建的后台管理系统（配套接口文档和后端源码）。vue-element-admin 的 vue3 版本。项目地址: https://gitcode.com/GitHub_Trending/vue3/vue3-element-admin

你是否经常在白天和夜晚切换使用后台系统时感到眼部不适？vue3-element-admin提供了完善的暗黑模式解决方案，让你既能享受自动切换的智能便捷，也能根据个人喜好手动控制界面风格。本文将详细介绍如何使用和配置这一功能。

暗黑模式功能概览

vue3-element-admin的暗黑模式基于CSS变量和Vue3的响应式特性实现，主要通过以下几个核心模块协同工作：

主题状态管理：src/store/modules/settings-store.ts负责主题状态的存储与更新
主题切换组件：src/components/DarkModeSwitch/index.vue提供可视化切换界面
样式变量定义：src/styles/dark/css-vars.css定义暗黑模式下的CSS变量
布局控制逻辑：src/composables/layout/useLayout.ts处理布局与主题的关联

暗黑模式实现了两种切换方式：手动切换和自动切换（需配合浏览器或系统设置），满足不同用户的使用习惯。

手动切换暗黑模式

手动切换是最直接的方式，用户可以通过界面上的主题切换按钮随时切换亮色和暗色模式。

切换按钮组件解析

主题切换按钮位于系统顶部导航栏，由src/components/DarkModeSwitch/index.vue组件实现。核心代码如下：

<template>
  <el-dropdown trigger="click" @command="handleDarkChange">
    <el-icon :size="20">
      <component :is="settingsStore.theme === ThemeMode.DARK ? Moon : Sunny" />
    </el-icon>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item
          v-for="item in theneList"
          :key="item.value"
          :command="item.value"
          :disabled="settingsStore.theme === item.value"
        >
          <el-icon>
            <component :is="item.component" />
          </el-icon>
          {{ item.label }}
        </el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>

该组件通过:is动态渲染太阳或月亮图标，直观展示当前主题状态。点击后会显示下拉菜单，提供亮色和暗色两种选项供用户选择。

主题切换的实现原理

当用户点击切换按钮时，会触发handleDarkChange方法，该方法调用settingsStore.updateTheme更新主题状态：

const handleDarkChange = (theme: ThemeMode) => {
  settingsStore.updateTheme(theme);
};

在src/store/modules/settings-store.ts中，updateTheme方法会更新主题状态并应用相应的样式：

function updateTheme(newTheme: ThemeMode): void {
  theme.value = newTheme;
}

// 监听主题变化，自动应用样式
watch(
  [theme, themeColor],
  ([newTheme, newThemeColor]: [ThemeMode, string]) => {
    toggleDarkMode(newTheme === ThemeMode.DARK);
    const colors = generateThemeColors(newThemeColor, newTheme);
    applyTheme(colors);
  },
  { immediate: true }
);

这里使用Vue的watch API监听主题变化，当主题改变时，会调用toggleDarkMode函数切换暗黑模式，并重新生成和应用主题颜色。

暗黑模式样式定制

vue3-element-admin允许通过CSS变量自定义暗黑模式下的样式，以满足不同项目的视觉需求。

CSS变量定义

暗黑模式的CSS变量定义在src/styles/dark/css-vars.css中：

/* 暗黑模式通过 CSS 自定义变量，官方链接：https://element-plus.org/zh-CN/guide/dark-mode.html#%E9%80%9A%E8%BF%87-css */
html.dark {
  .el-table {
    /* 自定义表格选中高亮时当前行的背景颜色 */
    --el-table-current-row-bg-color: var(--el-fill-color-light);
  }
}

这段代码展示了如何自定义暗黑模式下表格选中行的背景颜色。你可以根据需要添加更多自定义样式，例如修改卡片背景、文本颜色等。

自定义主题颜色

除了内置的暗黑模式样式，vue3-element-admin还支持自定义主题颜色。在src/store/modules/settings-store.ts中，generateThemeColors函数会根据主题颜色和模式生成一系列颜色变量：

const colors = generateThemeColors(newThemeColor, newTheme);
applyTheme(colors);

这使得你可以轻松定制符合品牌风格的暗黑模式主题。

自动切换暗黑模式

虽然当前版本的vue3-element-admin默认只提供手动切换功能，但我们可以基于现有架构扩展实现自动切换功能，让系统根据时间或系统设置自动切换明暗主题。

基于时间的自动切换

你可以扩展src/composables/layout/useLayout.ts，添加基于时间的自动切换逻辑：

// 在useLayout函数中添加
import { useSettingsStore } from "@/store";
import { ThemeMode } from "@/enums/settings/theme-enum";

// 自动切换暗黑模式
const autoSwitchDarkMode = () => {
  const settingsStore = useSettingsStore();
  const hour = new Date().getHours();
  // 晚上7点到早上6点自动切换到暗黑模式
  const isNight = hour >= 19 || hour < 6;
  
  if (isNight && settingsStore.theme !== ThemeMode.DARK) {
    settingsStore.updateTheme(ThemeMode.DARK);
  } else if (!isNight && settingsStore.theme !== ThemeMode.LIGHT) {
    settingsStore.updateTheme(ThemeMode.LIGHT);
  }
};

// 每天检查一次
setInterval(autoSwitchDarkMode, 24 * 60 * 60 * 1000);
// 初始检查
autoSwitchDarkMode();

基于系统设置的自动切换

你还可以利用浏览器的prefers-color-scheme媒体查询，实现跟随系统设置自动切换主题：

// 在settings-store.ts中添加
import { useMediaQuery } from '@vueuse/core';

const isDarkModePreferred = useMediaQuery('(prefers-color-scheme: dark)');

watch(
  isDarkModePreferred,
  (isDark) => {
    if (settings.autoTheme) { // 添加一个自动主题的开关设置
      updateTheme(isDark ? ThemeMode.DARK : ThemeMode.LIGHT);
    }
  },
  { immediate: true }
);

这两种自动切换方式可以根据项目需求选择实现，或提供选项让用户自行选择切换方式。

总结与最佳实践

vue3-element-admin的暗黑模式实现了完善的手动切换功能，并提供了灵活的样式定制能力。在使用和扩展这一功能时，建议遵循以下最佳实践：

保持一致性：确保暗黑模式下所有界面元素都有良好的显示效果，避免出现对比度不足或难以辨认的内容。
提供明确反馈：使用src/components/DarkModeSwitch/index.vue中的图标变化，让用户清晰了解当前主题状态。
尊重用户选择：如果实现自动切换功能，应同时提供手动切换选项，尊重用户的个人偏好。
性能优化：主题切换可能会导致页面重绘，应避免过于频繁的主题切换，或通过CSS优化减少重绘范围。

通过合理配置和扩展暗黑模式功能，可以为用户提供更加舒适的使用体验，特别是在长时间使用系统的情况下，有效减轻眼部疲劳。

希望本文能帮助你更好地理解和使用vue3-element-admin的暗黑模式功能。如有任何问题或建议，欢迎在项目仓库中提出issue或PR。

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考