主题与样式
主题运行时工具在 admin/src/utils/theme.ts；偏好状态在 useSettingStore；静态层包括 Element Plus 暗色 CSS 变量、theme/tokens.scss、theme/overrides/element-plus.scss、styles/index.scss 与 UnoCSS（virtual:uno.css）。
运行时 API（utils/theme.ts）
| 函数 | 作用 |
|---|---|
applyDarkClass(isDark) | 切换 html.dark |
applyDarkTheme(theme) | 设置 / 清除 html 的 data-dark-theme |
generateVars(color, type, isDark) | 生成 Element Plus 色阶 CSS 变量（primary / success / warning / danger / error / info） |
setCssVar(key, value, dom?) | 写单个 CSS 变量，默认写在 documentElement |
setTheme(options, isDark?) | 把色板写入 #theme-vars 的 <style>；若有 primary 同步 --color-brand |
亮色用 tint/shade 配方生成 light-* / dark-* 派生色；暗色配方相反。颜色计算依赖 css-color-function。
与 Setting Store 的配合
useSettingStore.applyThemeMode()：
themeMode === 'dark' | 'light'：直接应用themeMode === 'system'：跟随prefers-color-scheme，并监听变化
应用时调用 applyDarkClass、applyDarkTheme，再 setTheme(...) 注入当前 theme / successTheme 等字段。resetTheme() 恢复 defaultSetting 并清缓存键。
样式分层建议
- 设计 token：品牌色、间距等放在
theme/tokens.scss，组件用 CSS 变量 - Element Plus：全局覆盖写在
theme/overrides/，避免在业务页大面积::v-deep改库样式 - UnoCSS：布局与间距的原子类；复杂组件仍用 scoped SCSS
- 主题色：用户可改的品牌色走
setTheme，不要写死#409EFF到业务组件
改主题色后侧栏等使用 --color-brand 的区域会一起更新；新增布局组件时优先消费这些变量，而不是再复制一份色值。