跳转至正文
ColliePWA

主题：选择一套外观，或导入自定义主题。

主题是一个很小的 JSON 文件，包含颜色、字体、形状、外观和终端调色板。ColliePWA 自带四套主题，你也可以从手机上的文件导入更多。

01/基本概念

主题是一个包含外观定义的文件。

主题为应用指定颜色，浅色部分和深色部分各一次。它还可以指定字体、标题字体、形状、外观以及终端镜像的颜色。形状和外观共有十个词，例如 radius、shadow 和 density。布局、轻按区域的大小以及状态的含义保持不变，因此在每套主题中，blocked 仍然表示 blocked。

文件中的每个值要么是限定的词，要么是经过检查的颜色。文件无法运行代码，也无法加载文件、字体或图片。

主题和外观是两项独立的设置。主题决定使用哪些颜色。外观决定显示哪一部分：跟随系统、浅色或深色。

02/选择主题

在设置中选择主题。

打开设置，进入外观，轻按一套主题。主题会立即生效，无需重新加载；下次打开 ColliePWA 时，首帧就会应用该主题。轻按 Collie 即可恢复默认设置。

指定了字体的主题会设置一次你的字体。之后你仍可在界面字体卡片中进行修改。

Collie

界面字体: Aldrich

熟悉的经典外观：中性灰，搭配 Aldrich 字体。

Nightwatch

界面字体: IBM Plex Sans

flat · bold · strong · band · heavy

为夜间值班时的手机而设计。真正的纯黑深色部分，扁平方正，线条粗重，搭配暗琥珀色强调色，页眉和工具栏后面有一条暗琥珀色的带。

终端调色板

Daylight

界面字体: Geist

标题: Atkinson Hyperlegible Next

round · lifted · roomy · gradient · cards · sentence

适用于强烈阳光和低视力。正文对比度达到 AAA，卡片圆润宽松，页面向底部渐变，状态颜色由蓝到橙，而不是由红到绿。

终端调色板

Harbour

界面字体: Atkinson Hyperlegible Next

标题: Space Grotesk

soft · lifted · grain · thin

为习惯使用终端的人设计。冷调蓝灰色，搭配一种青绿色强调色，圆角柔和，带细腻颗粒质感和纤细图标，终端调色板以 Solarized 为基础，底色是近乎黑色的蓝。

终端调色板

03/导入

从文件导入主题。

  1. 1将主题文件存放到手机上。文件后缀为 .json，且大小小于 64 KiB。
  2. 2在设置中，打开外观下的主题卡片，轻按导入，然后选择文件。
  3. 3查看预览。预览会显示浅色和深色两部分的颜色、形状、终端颜色以及对比度报告。对比度偏低时会显示警告，你仍然可以应用该主题。违反规则的文件会被拒绝，且不会有任何改变。

主题只改变应用的外观，不会改变其他任何东西。它无法运行代码、加载文件或连接服务器。

一台设备最多保留八个导入的主题。不支持通过链接导入，主题也不会在设备之间同步。

04/编写

编写你自己的主题。

最快的入手方式是从一套自带主题开始。导出它，修改 id 和 name，编辑颜色、形状词或终端调色板，然后再次导入。导入的主题不能使用自带主题的 id。

这是一个简化版的 harbour.json，一个 version 2 文件。其中的 ... 行代表省略的部分。

{
  "version": 2,
  "id": "harbour",
  "name": "Harbour",
  "author": "Collie",
  "light": {
    "background": "oklch(0.95 0.01 235)",
    "foreground": "oklch(0.26 0.025 250)",
    "card": "oklch(0.985 0.004 235)",
    "...": "..."
  },
  "dark": {
    "background": "oklch(0.21 0.018 250)",
    "foreground": "oklch(0.93 0.012 240)",
    "card": "oklch(0.255 0.02 252)",
    "...": "..."
  },
  "fonts": { "ui": "atkinson", "display": "grotesk" },
  "surface": {
    "radius": "soft",
    "shadow": "lifted",
    "density": "default",
    "weight": "default",
    "border": "default",
    "ground": "grain",
    "chrome": "page",
    "rows": "rules",
    "icons": "thin",
    "labels": "caps"
  },
  "ansi": {
    "0": "#073642",
    "1": "#f0504a",
    "2": "#859900",
    "...": "..."
  }
}

43 个 token

主题文件只能指定这四组 token。包含任何其他键的文件都会被拒绝。

分组绘制内容Token
表面与前景21页面、卡片、页眉和工具栏、文本、按钮、边框和焦点环。
  • background
  • foreground
  • card
  • card-foreground
  • chrome
  • primary
  • primary-foreground
  • secondary
  • secondary-foreground
  • muted
  • muted-foreground
  • accent
  • accent-foreground
  • control-on
  • control-on-foreground
  • destructive
  • destructive-foreground
  • border
  • input
  • rule
  • ring
状态6Agent 状态和信息颜色。
  • status-blocked
  • status-working
  • status-done
  • status-idle
  • status-unknown
  • status-info
语法6diff 和代码中的前景颜色。
  • syntax-keyword
  • syntax-string
  • syntax-constant
  • syntax-property
  • syntax-entity
  • syntax-comment
主机标识10用于区分机器的颜色。
  • host-0
  • host-1
  • host-2
  • host-3
  • host-4
  • host-5
  • host-6
  • host-7
  • host-8
  • host-9

形状和外观

surface 块包含十个词。每个词都来自一个限定的列表，省略的 token 保持默认值，即其列表中的第一个词。系统绝不接受任意数字，因此主题不会破坏轻按区域的大小。

radius
卡片、行、输入框和按钮的圆角。
  • sharp
  • soft
  • round
shadow
凸起面板下方的阴影。
  • default
  • flat
  • lifted
density
控件内部和控件之间留出多少空间。
  • default
  • roomy
weight
medium 和 semibold 文本渲染的粗细程度。
  • default
  • bold
border
细线的宽度。
  • default
  • strong
ground
位于所有内容之后的页面：纯色、柔和渐变或细腻颗粒。
  • flat
  • gradient
  • grain
chrome
页眉和工具栏：放在页面颜色上，或放在各自独立的带上。
  • page
  • band
rows
列表呈现为带分隔线的一个整体框组，或每行一张卡片。
  • rules
  • cards
icons
每个图标的描边粗细。
  • default
  • thin
  • heavy
labels
小号的分区标签，用大写或句首大写。
  • caps
  • sentence

终端调色板

ansi 块包含 18 种颜色或完全不包含：16 种终端颜色、ink 和 ground。每种颜色均为 #rrggbb 或 oklch(L C H) 格式，且都通过了校验关口。

值
值为颜色：#rrggbb、#rrggbbaa 或 oklch(L C H)，包含表示不透明度的 / A。L 取值范围为 0 到 1，C 取值范围为 0 到 0.5，H 取值范围为 0 到 360，全部为普通数字。
浅色与深色部分
提供 light、dark 或两者皆提供。省略的部分将逐 token 从 Collie 填充。
字体
可选的 fonts.ui 指定 ColliePWA 内置的字体之一。可选的 fonts.display 指定用于标题的字体。不接受任何其他字体。
拒绝的内容
列表之外的键，除 1 或 2 之外的 version，既不是颜色也不是形状词的值，var()、url() 或任何其他函数，自带主题的 id，以及超过 64 KiB 的文件。提示消息会指明原因，且不会应用任何内容。
版本
version 为 1 或 2。包含 surface 块、fonts.display 字形或 ansi 块的文件应指定为 2。version 为 2 的文件需要 ColliePWA 1.22.0 或更新版本。

05/分享

导出并分享。

导出将当前活动主题写入为 .collie-theme.json 文件。将其发送给他人，或保存在仓库中，他人可以按你导入的相同方式导入。

详见 主题