主题定制

系统支持丰富的主题定制功能，包括暗黑模式和主题色切换。

功能概览

• 暗黑/明亮模式切换
• 6 种预设主题色
• 侧边栏折叠
• 主题偏好持久化

主题切换

暗黑模式

点击顶部导航栏的暗黑模式图标即可切换。

系统使用 CSS 变量实现主题切换，所有组件自动适配：

:root {
  --bg-color: #ffffff;
  --text-color: #333333;
}

html.dark {
  --bg-color: #1a1a1a;
  --text-color: #e0e0e0;
}

主题色

点击顶部的主题色选择器，可在 6 种预设颜色中切换：

• 默认蓝
• 绿色
• 橙色
• 红色
• 紫色
• 青色

切换后所有 Element Plus 组件和自定义样式会自动更新。

侧边栏

• 点击顶部的折叠按钮可以收起/展开侧边栏
• 侧边栏状态会持久化保存

实现原理

主题系统基于 Pinia Store 管理：

// stores/modules/theme.ts
export const useThemeStore = defineStore('theme', () => {
  const isDark = ref(false)
  const themeColor = ref('#409EFF')
  const isCollapse = ref(false)

  // 切换暗黑模式
  function toggleDark() {
    isDark.value = !isDark.value
    document.documentElement.classList.toggle('dark')
  }

  // 设置主题色
  function setThemeColor(color: string) {
    themeColor.value = color
    // 更新 CSS 变量
    document.documentElement.style.setProperty('--el-color-primary', color)
  }

  return { isDark, themeColor, isCollapse, toggleDark, setThemeColor }
})