外观与主题 — 24 套预设与自定义 CSS

亮色 / 暗色模式

Ophel 支持三种模式：

可通过浮动按钮组中的主题切换按钮、快捷键，或 设置 → 外观 切换。

开启跟随站点主题后，当 AI 平台（如 Gemini、ChatGPT）切换亮/暗模式时，Ophel 面板也会随之切换。可在 设置 → 外观 → 跟随站点主题 中控制，主题模式按站点独立保存。

开启后，Ophel 会在切换亮/暗模式时，同步调整 AI 平台页面上部分原生元素（如输入框、滚动条）的颜色，使整体视觉更一致。此功能仅对部分站点生效。 设置路径：设置 → 外观 → 同步原生页面颜色（默认开启）

当前站点的亮/暗模式始终跟随 Ophel 的设置。此选项仅控制是否额外同步页面原生元素颜色——如果某个站点出现视觉冲突，可关闭此项。

每种模式各提供 12 套预设主题。

打开设置

按，或点击面板标题栏的设置图标。

进入外观页面

在设置页面中点击外观。

选择并应用

切换顶部的”浅色”或”深色”标签，点击任意预设卡片即可预览并应用。

切换时会播放从点击位置向外辐射的圆形扩散动画（View Transitions API）。

在 设置 → 外观 → 自定义 CSS 中输入自己的 CSS 规则，实现全面定制。面板运行在 Shadow DOM 中，样式与页面其他部分完全隔离。面板的样式使用 --gh- 前缀的 CSS 变量。你可以在自定义 CSS 中覆盖任意变量：

:host {
  --gh-bg: #1a1a2e;
  --gh-primary: #e94560;
  --gh-text: #eaeaea;
}

常用变量：

更改即时生效，无需刷新页面。

自定义样式可以保存为自定义主题预设，在不同主题之间快速切换而不影响全局设置。保存后，该样式会出现在主题预设列表中，与内置预设并列。