There are many themes, but this one is yours
本文为原文前 6,000 字符的节选翻译,完整内容请查看原文。
There are many themes, but this one is yours. Date: Fri, 09 Oct 2026. From: Maximilian Blazek max@earendil.com. To: You. Subject: There are many themes, but this one is yours. At Earendil, we want to build products that respect the choices of the people using them. So when we were refreshing Pi’s themes, we wanted a theme that adapts to the terminal it runs in. Most people who spend their day in a terminal have picked their own themes for it. Why not make Pi reflect their choices? The result is the new system theme, which is now Pi’s default. It asks your terminal for its colors and builds Pi’s theme from them. In this post we share how it works.
有很多主题,但这一款是属于你的。日期:2026年10月9日,星期五。发件人:Maximilian Blazek max@earendil.com。收件人:你。主题:有很多主题,但这一款是属于你的。在 Earendil,我们希望构建尊重用户选择的产品。因此,当我们在更新 Pi 的主题时,我们想要一个能适应其运行终端的主题。大多数整天在终端工作的人都为自己挑选了主题。为什么不让 Pi 反映他们的选择呢?结果就是新的系统主题,它现在是 Pi 的默认主题。它会向你的终端询问其颜色,并据此构建 Pi 的主题。在这篇文章中,我们将分享它是如何工作的。
A Pi session in the terminal. With JavaScript enabled, it plays here and can be shown in 24 terminal themes. Before you read the rest of the post, we want to spoil something: it’s all about contrast. Picking the colors in the terminal UI is a question of taste that the user has already answered. From there, all other decisions come down to one question: how much does a color stand out from the background it’s on? If we get it wrong, we create a bad experience for the user. But the catch is that contrast is a matter of perception and not something we can trivially measure. Two people can look at the same pair of colors and disagree about whether it’s readable. We built a small interactive survey you can take to show you how you perceive that contrast, and how it compares against other people. You’ll find details about that survey at the end of the post.
终端中的 Pi 会话。如果启用了 JavaScript,它可以在此处播放,并以 24 种终端主题显示。在阅读文章其余部分之前,我们想先剧透一点:一切都与对比度有关。在终端界面中选择颜色是一个用户已经回答过的品味问题。在此基础上,所有其他决定都归结为一个问题:颜色与其背景的对比度如何?如果我们处理不好,就会给用户带来糟糕的体验。但问题在于,对比度是一个感知问题,而不是我们可以轻易测量出来的东西。两个人看着同一对颜色,可能会对它是否易读产生分歧。我们制作了一个小型互动调查,你可以参与其中,看看你是如何感知对比度的,以及你与其他人相比如何。你可以在文章末尾找到关于该调查的详细信息。
Can you trust the ANSI palette? Every terminal theme defines 16 ANSI colors, and the simplest way to match your terminal would be to use them directly. But there aren’t really any rules to the ANSI palette. The original standard, ECMA-48, was adopted in 1976. Its nearly identical American counterpart from 1979, ANSI X3.64, is where the name comes from. The standard names eight colors (black, red, green, yellow, blue, magenta, cyan and white), but doesn’t say what they should look like or how they should relate to the background. The eight bright variants aren’t part of the standard. Quite a few terminals rendered bold text in a brighter color, which effectively gave them eight more colors. The codes to select bright colors directly were added later by IBM’s aixterm and adopted by other terminals like xterm.
你能信任 ANSI 调色板吗?每个终端主题都定义了 16 种 ANSI 颜色,匹配终端最简单的方法就是直接使用它们。但 ANSI 调色板并没有真正的规则。最初的标准 ECMA-48 于 1976 年通过。其 1979 年几乎完全相同的美国对应标准 ANSI X3.64 就是该名称的由来。该标准命名了八种颜色(黑色、红色、绿色、黄色、蓝色、洋红色、青色和白色),但并未说明它们应该是什么样子,或者它们应该如何与背景相关联。八种明亮变体并不属于该标准。相当多的终端以更亮的颜色呈现粗体文本,这实际上为它们增加了八种颜色。直接选择明亮颜色的代码是后来由 IBM 的 aixterm 添加的,并被 xterm 等其他终端所采用。
Since the bright colors started out as bold text, we would assume that “bright” was meant to stand out more. And since early terminals mostly showed light text on a dark screen, brighter also meant more contrast. We looked at the more than 460 themes that come with Ghostty, and today this only sort of holds. In dark themes, the bright variant has more contrast in about 60% of cases. In light themes, it’s only about a quarter, since bright usually still means lighter, which on a light background means less contrast. Individual themes don’t agree either: in Gruvbox Dark, bright blue has more contrast than blue, in Catppuccin Mocha it has less, and in Tokyo Night they are the same color.
由于明亮颜色最初是作为粗体文本出现的,我们推测“明亮”的本意是更加突出。而且由于早期终端大多在深色屏幕上显示浅色文本,更亮也意味着对比度更高。我们查看了 Ghostty 自带的 460 多种主题,发现如今这只在某种程度上成立。在深色主题中,约 60% 的情况下明亮变体具有更高的对比度。在浅色主题中,这一比例仅为四分之一左右,因为明亮通常仍意味着更浅,而在浅色背景下,这意味着对比度更低。各个主题之间也不统一:在 Gruvbox Dark 中,亮蓝色比蓝色对比度更高;在 Catppuccin Mocha 中,它对比度更低;而在 Tokyo Night 中,它们是相同的颜色。
The contrast against the background also varies a lot. We measured it with the WCAG 2 contrast ratio, which compares the luminance of two colors and ranges from 1:1 (no contrast) to 21:1 (black on white). Normal text should reach at least 4.5:1, and large text and UI elements 3:1. Bright black, which a lot of software uses for secondary text, doesn’t even reach 3:1 in most dark themes. This isn’t a flaw of the themes. The palette was made to color the output of simple applications, like a red error or a green success message, and many themes are designed to look good rather than to meet contrast minimums. But it makes it hard to build an accessible, more complex TUI on top of it. Pi has around 60 color roles, from body text and dim text to panels behind tool calls and red text on a red error panel. We wanted to use your colors and still guarantee that all of them stay readable.
与背景的对比度差异也很大。我们使用 WCAG 2 对比度标准进行了测量,该标准比较两种颜色的亮度,范围从 1:1(无对比度)到 21:1(白底黑字)。普通文本应至少达到 4.5:1,大文本和 UI 元素应达到 3:1。许多软件用于次要文本的亮黑色,在大多数深色主题中甚至达不到 3:1。这不是主题的缺陷。该调色板旨在为简单应用程序的输出着色,例如红色错误消息或绿色成功消息,许多主题的设计初衷是美观,而不是满足对比度最低要求。但这使得在其之上构建一个易于访问且更复杂的 TUI 变得困难。Pi 有大约 60 种颜色角色,从正文和暗淡文本,到工具调用后的面板,以及红色错误面板上的红色文本。我们希望使用你的颜色,同时保证它们都能保持可读性。
Contrast is all you need. Contrast is one of the most important aspects of color in user interfaces. If it is too low, people will have a hard time using your product. Contrast is mainly driven by lightness. Saturation affects it a little, but by far the most important factor is how light or dark a color is compared to the color behind it. RGB, the way we usually write colors, doesn’t have a lightness axis. It was made for machines to display colors on a monitor, not for humans to understand them. As a 3D shape, it is a neat cube with one axis per channel. But colors that are close to each other in this cube aren’t necessarily colors humans would describe as similar. #0000ff and #00ff00, for example, both have one channel at full strength, but on white, the blue has a WCAG contrast ratio of 8.6:1 and the green only 1.4:1.
你只需要对比度。对比度是用户界面中色彩最重要的方面之一。如果对比度太低,人们在使用你的产品时会感到困难。对比度主要由亮度驱动。饱和度有一定影响,但迄今为止最重要的因素是颜色与其背景颜色相比有多亮或多暗。RGB(我们通常书写颜色的方式)没有亮度轴。它是为机器在显示器上显示颜色而设计的,而不是为了让人类理解它们。作为一个 3D 形状,它是一个整洁的立方体,每个通道有一个轴。但在这个立方体中彼此接近的颜色,并不一定是人类会描述为相似的颜色。例如,#0000ff 和 #00ff00 的一个通道都处于全强度,但在白色背景下,蓝色的 WCAG 对比度为 8.6:1,而绿色仅为 1.4:1。
The RGB color space as a cube with one axis per channel: black and white at opposite corners, with red, green, blue and their mixes on the corners in between. The RGB color space. Drag to rotate, and pick a color to cut it open there. Perceptual color spaces like OKLCH are built around human perception instead. Colors that are close to each other in OKLCH are also colors humans would describe as similar, and its axes are the ones humans use to describe color: lightness, chroma (how colorful a color is) and hue. Because it follows human perception rather than a monitor’s hardware, its shape is a lot weirder than a cube.
RGB 色彩空间是一个立方体,每个通道有一个轴:黑色和白色位于相对的角上,红色、绿色、蓝色及其混合色位于中间的角上。RGB 色彩空间。拖动以旋转,并选择一种颜色将其切开。像 OKLCH 这样的感知色彩空间则是围绕人类感知构建的。在 OKLCH 中彼此接近的颜色也是人类会描述为相似的颜色,其轴是人类用来描述颜色的维度:亮度、色度(颜色的鲜艳程度)和色相。因为它遵循人类感知而不是显示器硬件,所以它的形状比立方体要奇怪得多。
The same colors in OKLCH as a landscape: lightness runs from black to white, hue runs front to back, and the height is how much chroma a color of that lightness and hue can have. Every hue peaks at a different lightness: blue close to black, yellow close to white. The same colors in OKLCH: lightness from left to right, hue from front to back, and chroma as height. Drag to rotate, and pick a color to cut it open there. With a lightness axis, the idea behind the system theme is simple: Pi decides the lightness of every color based on contrast requirements, and takes the hue and chroma from your terminal’s palette. Lig
以景观形式呈现的 OKLCH 中的相同颜色:亮度从黑到白,色相从前到后,高度表示该亮度和色相的颜色所能拥有的色度。每种色相在不同的亮度下达到峰值:蓝色接近黑色,黄色接近白色。OKLCH 中的相同颜色:从左到右为亮度,从前到后为色相,高度为色度。拖动以旋转,并选择一种颜色将其切开。有了亮度轴,系统主题背后的理念就很简单了:Pi 根据对比度要求决定每种颜色的亮度,并从你的终端调色板中获取色相和色度。Lig