> 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 在运行时可完全重新换肤。可从内置主题中选择，切换明亮/暗色/自动，或者打开 **主题工作室** 来设计你自己的主题。每次更改都会立即生效并本地持久保存，无需重启。 *** ## 内置主题 默认提供五大主题系列，每个都有明亮和暗色变体： | 类别 | Feel | | ------------ | -------------------- | | **Classic** | OpenHuman 的默认外观。 | | **Ocean** | 围绕 `#4A83DD` 主色的冷蓝调。 | | **Sepia** | 温暖、纸张般的色调，对眼睛很友好。 | | **Matrix** | 高对比度的绿底黑字。 | | **HAL 9000** | 深黑色搭配红色点缀。 | 每个都可以应用为 **明亮**, **暗色**，或 **自动**。自动模式会跟随你操作系统的 `prefers-color-scheme` 设置，并在你将系统在明亮和暗色之间切换的瞬间实时重新应用，无需重新加载。 *** ## 主题工作室 **设置 → 主题工作室** 是一个完整的可视化编辑器。通过它你可以： * **选择一个系列** ，从主题卡片库中挑选（包含内置主题以及你自己的自定义主题）。 * **调整每一个颜色标记** ，使用取色器：表面、文本、边框和强调色渐变。实时 **对比度警告** 会在文字与背景的亮度低于可读阈值时提示。 * **按角色替换字体**：标题、Heading、正文、等宽和衬线字体都可以使用不同的字族。 * **配置背景**：动画 WebGL 网格、纯色，或自定义图片，并可选点状覆盖层。 * **管理自定义主题**：创建、编辑、重置、删除，以及 **以 JSON 导出 / 导入** ，以便与你人分享主题。 ### 编辑预设会自动分叉 对内置预设的任何标记进行更改，都会透明地创建一个 **新的自定义主题**。原始预设保持不变。因此你可以从 Ocean 开始，进行调整，并同时保留两者。 *** ## 存储位置 主题状态（当前主题、明亮/暗色/自动变体，以及所有自定义主题）保存在 Redux 中，并持久化到 `localStorage` 中通过 `redux-persist`，因此它会在应用重启后保留，并且仅作用于你的用户。分享主题只需导出 JSON 并让对方导入即可。 *** ## 底层实现 主题由 CSS 自定义属性 **标记** 驱动（以空格分隔的 RGB 通道三元组，因此像 `bg-surface/50` 这样的 Tailwind 不透明度修饰符仍然可用）。 `ThemeProvider` 会把当前主题的覆盖值写入 `` 根元素；未指定的标记会继承明亮/暗色默认值。 有关完整的标记分类、Tailwind 连接方式和组件编写最佳实践，请参阅贡献者参考： [主题化（开发中）](/openhuman/zh/kai-fa/theming.md). *** ## 另见 * [主题化（贡献者参考）](/openhuman/zh/kai-fa/theming.md)：标记系统、Tailwind 连接、迁移 codemod。 * [实时吉祥物](/openhuman/zh/gong-neng/mascot.md)：OpenHuman 个性的另一大组成部分。