主题
深色、浅色与跟随系统主题，支持强调色与原生窗口同步。
模板有两组独立的外观控制：浅色/深色/跟随系统主题，以及强调色。两者都持久化在 主进程 settings store 中，并在渲染进程通过 CSS variables 应用，同时同步 Windows 标题栏 chrome。
出厂内容
| 界面 | 文件 | 作用 |
|---|---|---|
| 设置界面 | app/routes/settings/sections/AppearanceSection.tsx | 渲染 light/dark/system 按钮与强调色 swatches。 |
| 主题 helpers | app/utils/theme-settings.ts | 应用根节点 dark class、根节点 data-accent，并同步 titlebar IPC。 |
| CSS variables | app/styles/globals.css | 定义 Tailwind v4 tokens、shadcn/ui variables、dark mode 与 accent overrides。 |
| 窗口 CSS | app/styles/window.css | 定义标题栏、拖拽区域、窗口背景与滚动条颜色。 |
| 原生启动颜色 | lib/main/app.ts | 用浅/深背景色和 Windows titlebar colors 创建 BrowserWindow。 |
| Settings schema | lib/conveyor/schemas/app-schema.ts | 校验跨 IPC 的 theme 与 accentColor 值。 |
主题模式
theme 是以下值之一：
type ThemePreference = 'light' | 'dark' | 'system'applyThemePreference() 通过
window.matchMedia('(prefers-color-scheme: dark)') 解析 system，切换根节点
dark class，并调用 window.conveyor.window.windowSetTitlebarDark(isDark)。
在 Windows 上，window-set-titlebar-dark 会更新
BrowserWindow.setTitleBarOverlay，让标题栏背景与按钮颜色匹配渲染进程。
启动时，lib/main/app.ts 也会在渲染进程准备好之前通过 nativeTheme 解析已保存的
设置，避免首帧颜色不一致。
强调色
accentColor 是以下值之一：
type AccentPreference = 'default' | 'blue' | 'violet' | 'green' | 'rose' | 'amber'default 会移除 data-accent，保留品牌主色。其他值会设置
document.documentElement.dataset.accent，从而激活 app/styles/globals.css 中的
选择器：
:root[data-accent='violet'] {
--primary: hsl(262 83% 58%);
--primary-foreground: hsl(0 0% 100%);
--ring: hsl(262 83% 58%);
}强调色层只覆盖 --primary、--primary-foreground 与 --ring，因此
--background、--card、--muted、--destructive 等语义颜色在不同产品中保持
稳定。
Tailwind 与 shadcn/ui
项目使用 Tailwind v4 与 CSS variables：
@import 'tailwindcss';
@variant dark (&:where(.dark, .dark *));
@import 'tw-animate-css';@theme 把应用变量映射到 Tailwind color tokens；shadcn/ui 组件则通过
bg-background、text-foreground、border-border、bg-primary 等 class 读取同一
套变量。
components.json 配置为 shadcn/ui new-york 风格、tsx: true、启用 CSS
variables、neutral base color，并使用 lucide 图标库。按现有 aliases 添加组件：
pnpm dlx shadcn@latest add dialog dropdown-menu生成的组件应放在 app/components/ui，变量继续来自 app/styles/globals.css。
自定义调色板
品牌改造时：
- 修改
:root与.dark中的默认品牌主色。 - 将
--ring更新为同一色系，或一个有意选择的 focus color。 - 确保
--primary-foreground在新主色上可读。 - 如果保留强调色选项，同步更新
AppearanceSection.tsx中的ACCENT_SWATCHES。 - 如果添加或删除强调色，更新
app-schema.ts中的ACCENT_COLORS与accentColorSchema；若已有用户需要 fallback，再添加 settings-store migration。
验证
运行应用并检查：
- Settings → Appearance 中 light、dark、system 都能切换。
- 强调色 swatches 会更新主按钮与 focus rings。
- 重启后仍保留
theme与accentColor。 - Windows titlebar overlay colors 匹配当前模式。
- 托盘图标颜色仍会跟随操作系统主题。
然后运行：
pnpm lint:check && pnpm typecheck && pnpm test