Ui
主题与外观
WinCode 明暗主题切换与自定义方式
主题与外观
WinCode 支持明暗主题切换。所有颜色均引用 CSS 变量，界面中不硬编码任何颜色值。
主题切换方式
主题切换有两种入口：
- 标题栏按钮 -- 点击太阳/月亮图标即可切换
- 设置面板 -- 通用设置中的主题选项
切换时会自动保存主题选择，下次启动应用时恢复上次的主题设置。
颜色体系
背景色系
| 变量 | 亮色 | 暗色 | 用途 |
|---|---|---|---|
--bg-primary | #ffffff | #0d0d14 | 页面主背景 |
--bg-secondary | #f5f5f7 | #111122 | 次要背景（输入框、面板） |
--bg-card | #ffffff | #1a1a2e | 卡片背景 |
--bg-sidebar | #f0f0f2 | #08080e | 侧边栏背景 |
--bg-input | #ffffff | #111122 | 输入框背景 |
--bg-hover | #e8e8ec | #1e1e32 | 悬停态 |
--bg-active | #dddde3 | #252540 | 激活态 |
文本色系
| 变量 | 亮色 | 暗色 | 用途 |
|---|---|---|---|
--text-primary | #1a1a2e | #e0e0e0 | 主要文字 |
--text-secondary | #555570 | #a0a0c0 | 次要文字 |
--text-muted | #8888a0 | #5a5a8a | 辅助/禁用文字 |
其他变量
| 变量 | 说明 |
|---|---|
--accent | 强调色（亮色 #5b6abf，暗色 #89b4fa） |
--accent-hover | 强调色悬停态 |
--accent-light | 强调色浅背景 |
--border | 边框色 |
--success / --warning / --danger | 状态色 |
--radius / --radius-sm / --radius-lg | 圆角尺寸 |
--shadow / --shadow-lg | 阴影 |
--font-sans / --font-mono | 字体族 |
字体设置
默认设置中 fontSize 为 14px。用户可以在设置面板中调整字号。
字体族定义：
- 无衬线字体：
-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif - 等宽字体：
"SF Mono", "Fira Code", "Cascadia Code", monospace
Markdown 渲染主题
Markdown 渲染时会自动适配当前主题，确保代码块、表格、公式等内容在各种主题下都有良好的可读性。