主题
深色、浅色、跟随系统主题以及强调色定制。
这个全功能桌面启动模板提供两项独立且持久化的外观设置：浅色/深色/跟随系统模式， 以及强调色。两者都通过根元素的 class 或 data 属性在 WebView 内应用，不经过自定义 Rust 命令边界。
已集成的结构
| 界面或层 | 文件 | 作用 |
|---|---|---|
| 外观设置 | src/routes/settings/sections/AppearanceSection.tsx | 主题模式按钮与强调色选项 |
| 主题工具 | src/utils/theme-settings.ts | 保存偏好，并应用 dark / data-accent |
| 设置 schema | src/lib/settings/schema.ts | 合法主题模式与 ACCENT_COLORS |
| 设计令牌 | src/styles/globals.css | Tailwind v4 映射、shadcn/ui 变量、深色令牌和强调色覆盖 |
| 原生启动底色 | src-tauri/tauri.conf.json 与 tauri.macos.conf.json | WebView 启动前后可见的固定窗口底色 |
src/lib/settings/store.ts 的默认值是 dark 和 default，版本化设置存储会在启动时恢复两者。
主题模式
type ThemePreference = 'light' | 'dark' | 'system'applyThemePreference() 使用
window.matchMedia('(prefers-color-scheme: dark)') 解析 system，
然后切换根元素的 dark class。Tailwind 的自定义 dark variant 会响应这个 class：
@import 'tailwindcss';
@variant dark (&:where(.dark, .dark *));
@import 'tw-animate-css';当前工具只在应用偏好时读取系统配色，并未注册媒体查询变化监听器。因此应用保持打开、
偏好为 system 时，操作系统主题切换不会立即刷新 WebView；需要重新应用偏好或重启。
如果产品要求实时跟随系统，请补充该监听器。
强调色
ACCENT_COLORS 包含 default、blue、violet、green、rose 和
amber。default 会移除根元素属性，保留品牌主色；其他选项则设置
document.documentElement.dataset.accent。
:root[data-accent='violet'] {
--primary: hsl(262 83% 58%);
--primary-foreground: hsl(0 0% 100%);
--ring: hsl(262 83% 58%);
}强调色规则只覆盖主色、主色前景和焦点环。背景、卡片、弱化色、边框和危险色等语义令牌， 仍由浅色或深色调色板提供。
定制产品配色时：
- 修改
:root和.dark中默认的--primary、--primary-foreground与--ring。 - 保证
AppearanceSection.tsx中的ACCENT_SWATCHES与 CSS 选择器显示一致。 - 增删选项时，同步修改
ACCENT_COLORS、accentColorSchema、CSS 选择器、设置翻译和测试。 - 如果被删除的值可能已保存在用户设备上，为设置存储添加迁移。
Tailwind v4 与 shadcn/ui
globals.css 通过 @theme 将语义 CSS 变量映射到 Tailwind v4。shadcn/ui
组件通过 bg-background、text-foreground、border-border、bg-primary
等类使用同一组令牌；tw-animate-css 提供生成组件所需的动画工具。
components.json 当前配置为 new-york 风格、非 RSC React、TypeScript、
CSS 变量、neutral 基础色、Lucide 图标和 @/components/ui 别名。在模板根目录添加组件：
pnpm dlx shadcn@latest add dialog dropdown-menu提交前检查生成文件；它们应位于 src/components/ui/，并使用现有别名和变量。
原生窗口外观
Windows 与 Linux 使用 decorations: false，可见标题栏和窗口按钮都是 React
组件，因此会自然跟随 WebView 令牌。macOS 使用 titleBarStyle: "Overlay"，
原生“红绿灯”按钮由系统管理。
当前没有通过代码同步原生窗口装饰主题。Conveyor 兼容方法
windowSetTitlebarDark() 是空实现，而两份 Tauri 配置中的 backgroundColor
都固定为 #0e0e10。它是深色的启动/兜底背景；如果产品首帧默认浅色，请相应调整。
托盘图标也不跟随应用主题：macOS 使用由系统着色的模板图标；Windows/Linux 根据操作系统配色选择明暗托盘素材，并监听系统配色变化。
验证
- 在 设置 → 外观 中切换浅色、深色和跟随系统。
- 尝试每种强调色，检查按钮、链接、焦点环和对比度。
- 重启应用，确认两项偏好都已保留。
- 在每个目标系统上检查启动帧与标题栏按钮。
- 确认托盘图标在系统明暗主题下都清晰可见。
pnpm lint:check && pnpm typecheck && pnpm test