主题系统

本项目使用 CSS 自定义属性 + useTheme composable 实现明暗主题切换。

useTheme 用法

import { useTheme } from '@/composables/useTheme'

const { preference, setPreference, effectiveTheme, isDark, toggle } = useTheme()

属性/方法	类型	说明
`preference`	`Ref<'auto' \| 'light' \| 'dark'>`	用户偏好设置
`effectiveTheme`	`ComputedRef<'light' \| 'dark'>`	实际生效的主题
`isDark`	`Ref<boolean>`	当前是否为暗色模式
`setPreference(pref)`	`(pref) => void`	设置主题偏好
`toggle()`	`() => void`	快速切换明/暗

主题切换流程

用户调用 setPreference('dark')
useTheme 更新 userPreference ref
计算 isDark 并触发 watch
applyTheme() 设置 document.documentElement.dataset.theme
CSS 变量根据 [data-theme='dark'] 选择器切换

CSS 变量

主题相关的 CSS 变量定义在 src/assets/styles/global.scss：

scss

:root {
  --color-bg: #f7f9fc;
  --color-surface: #ffffff;
  --color-primary: #1e6fe5;
  /* ... */
}

:root[data-theme='dark'] {
  --color-bg: #0a0e1a;
  --color-surface: #111827;
  --color-primary: #60a5fa;
  /* ... */
}

所有组件通过 var(--color-xxx) 引用颜色，自动适配当前主题。

深色主题定制

深色主题采用现代编辑器风格配色：

背景：#0a0e1a（深邃蓝黑色）
表面：#111827（卡片等容器）
强调色：#60a5fa（蓝色系）
边框：rgba(59, 130, 246, 0.15)（微弱蓝色调）

偏好持久化

主题偏好保存在 localStorage('theme')，auto 模式不保存值（跟随系统）。兼容旧版 theme-mode key。

主题系统 ​

useTheme 用法 ​

主题切换流程 ​

CSS 变量 ​