Skip to content

主题与自定义配色

写小说要长时间盯屏幕,配色不是装饰问题。

设置页的界面分区可以切换主题,也可以自己做一套。

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 与自定义主题编辑器已实施,浏览器端完整验收仍在进行中。

继续阅读