> For the complete documentation index, see [llms.txt](https://tinyhumans.gitbook.io/openhuman/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://tinyhumans.gitbook.io/openhuman/zh/gong-neng/theming.md). # 主题与主题工作室 OpenHuman 可在运行时完全更换皮肤。可从内置主题中选择，切换明/暗/自动，或打开 **主题工作室** 来设计你自己的主题。每次更改都会立即生效并本地保存，无需重启。 *** ## 内置主题 开箱即用共有五个主题系列，每个都带有明亮和暗黑变体： | 家族 | 感受 | | ------------ | -------------------- | | **经典** | OpenHuman 的默认外观。 | | **海洋** | 围绕 `#4A83DD` 主色的冷蓝色。 | | **褐色调** | 温暖、像纸张一样，护眼舒适。 | | **矩阵** | 黑底绿字的高对比风格。 | | **HAL 9000** | 深黑配红色点缀。 | 每个都可应用为 **明亮**, **暗黑**，也不是 **自动**。自动会遵循你操作系统的 `prefers-color-scheme` 设置，并在你把系统切换到明亮或暗黑模式时立即实时重新应用，无需重新加载。 *** ## 主题工作室 **设置 → 主题工作室** 是一个完整的可视化编辑器。你可以在其中： * **选择一个系列** 从主题卡片画廊中选择（内置主题以及你自己的自定义主题）。 * **调整每个颜色 token** 使用颜色选择器调整：表面、文本、边框和强调色阶。实时 **对比度警告** 会在文字相对背景的亮度低于可读阈值时提示。 * **按角色替换字体**：标题、主标题、正文、等宽和衬线都可分别使用不同字族。 * **配置背景**：可选动画 WebGL 网格、纯色或自定义图片，并可加可选的点状叠层。 * **管理自定义主题**：创建、编辑、重置、删除，以及 **导出 / 导入为 JSON** ，以便与他人共享主题。 ### 编辑预设会自动分叉 对内置预设更改任何 token 都会自动创建一个 **新的自定义主题**。原始预设保持原样。因此你可以从 Ocean 开始，微调它，并同时保留两者。 *** ## 存储位置 主题状态（当前主题、明/暗/自动变体，以及你所有的自定义主题）存放在 Redux 中，并持久化到 `localStorage` 中通过 `redux-persist`，因此它会在应用重启后保留，并且仅对你的用户可见。共享主题只需导出 JSON，然后让别人导入即可。 *** ## 底层实现 主题由 CSS 自定义属性 **令牌** 驱动（以空格分隔的 RGB 通道三元组，因此像 `bg-surface/50` 这样的 Tailwind 不透明度修饰符仍可正常工作）。该 `ThemeProvider` 会将当前主题的覆盖写入到 `` 根节点；未指定的令牌会回退到明/暗默认值。 有关完整的 token 分类体系、Tailwind 接线以及组件编写最佳实践，请参见贡献者参考： [主题设置（开发中）](/openhuman/zh/kai-fa-zhong/theming.md). *** ## 另请参阅 * [主题设置（贡献者参考）](/openhuman/zh/kai-fa-zhong/theming.md)：令牌系统、Tailwind 接线、迁移 codemod。 * [实时吉祥物](/openhuman/zh/gong-neng/mascot.md)：OpenHuman 个性的另一大组成部分。