主题与自定义配色
写小说要长时间盯屏幕,配色不是装饰问题。
设置页的界面分区可以切换主题,也可以自己做一套。
8 套内置主题
| 主题 | 特点 |
|---|---|
light | 标准浅色 |
dark | 标准深色 |
sepia | 米黄纸感,长时间阅读眼睛负担最小 |
catppuccin | 柔和低饱和 |
dracula | 高对比深色 |
monokai | 经典深色 |
one-dark-pro | 编辑器风深色 |
tokyo-night | 冷调深色 |
主题在页面启动时就会应用快照,不会出现先白屏再变色的闪烁。
自定义主题
设置页的主题编辑器可以完整做一套自己的配色。
整套主题由 36 个变量构成,但你不用一个个填:编辑器把其中一部分标为核心色,改完核心色可以一键重新派生其余变量。想精调的话,高级区能逐个改全部 36 个。
编辑时右侧有实时预览,改一个色立刻看到效果。
支持的操作:
- 从任意内置主题复制一份再改
- 导入 / 导出 JSON,方便分享或备份
- 编辑、删除自定义主题
取色器带调色盘,也支持系统吸管——可以直接从屏幕上任何地方吸一个颜色。
自定义主题存在全局配置里,跟着你的 State Root 走。
给设计者的说明
如果你要改代码或写组件,有两条硬规矩:
- 颜色一律消费主题变量,不要写 Tailwind 调色板类(
bg-gray-*之类)和dark:变体。明暗差异由当前主题变量承载,写死颜色会让 8 套主题里至少 7 套出问题。 - 状态语义有固定映射:草稿 / 待审 / 未保存用 warning,完成 / 已同步用 success,错误 / 删除 / 冲突用 danger,运行中 / 引用 / 说明用 info,选中 / 当前项 / 主操作用 accent。
有几处是刻意的例外,不迁移为状态色:剧情与引用 chip 的分类色板(那是类别识别色)、Profile 模板节点色、正文颜色选择器、代码编辑器语法高亮。
新增组件层变量前,必须先确认现有的背景 / 文本 / 边框 / 强调 / 状态 / 编辑器变量都表达不了,然后同步登记到主题规范和 8 套内置主题。
状态说明
主题系统 v2.1 与自定义主题编辑器已实施,浏览器端完整验收仍在进行中。