🎨 外观主题

外观页对应 AppearancePage.tsx，用于管理主题预置和自定义样式。这里不涉及字体大小、布局位置等其他菜单项。

功能结构

标签页	作用
主题预置	选择浅色/深色主题预置
自定义样式	创建、编辑、删除自定义 CSS 样式

主题预置

双模式预置

浅色预置：12 套（lightPresets）
深色预置：12 套（darkPresets）
总计 24 套内置主题

生效方式

当前站点分别维护 lightStyleId 与 darkStyleId
当模式为 system 时，随系统明暗切换自动应用对应样式
当模式固定为浅色或深色时，只切换对应模式的样式 ID

主题模式切换（浅色/深色/系统）位于设置侧边栏底部，不在外观页主体卡片内。

自定义样式

创建与编辑字段

样式名称（必填）
适用模式（浅色 / 深色）
CSS 代码

编辑器能力

CSS 语法高亮
代码实时编辑
创建后会自动加入主题选择网格

管理动作

新建样式
编辑既有样式
删除样式（带确认）

可覆盖变量（示例）

项目主题系统使用 --gh-* 变量。常见可覆盖项示例：

css

:host {
  --gh-primary: #4285f4;
  --gh-bg: #ffffff;
  --gh-text: #1f2937;
  --gh-border: #e5e7eb;
}

使用建议

先选接近需求的预置主题，再用自定义样式微调。
浅色与深色建议分别维护，避免同一套 CSS 在双模式下对比不足。
样式异常时可先切回内置预置定位问题。

相关页面