每个人在选择代码编辑器时都有特殊且可能独特的品味。市面上有数千种主题，这并非没有道理：对于一个人来说，美观和提高生产力的东西，对于另一个人来说可能是障碍。
创建自己的主题一直是我愿望清单上的一个项目。有一天晚上，我编码到很晚，一直到凌晨。我家里所有人都睡着了，所以像往常一样，唯一的灯光是我的屏幕发出的光芒。我知道这样编码不一定健康，但它确实是我效率最高的时间：干扰最小，我不用处理工作、家庭、朋友或小狗的事情。我可以专注。
我为我一直在使用的主题设置了一些首选项，尽管它们在白天或飞机旅行时都运行良好，但我总觉得在深夜编码时缺少了一些东西。我决定是时候打造自己的主题了。
我们首先讨论创建主题的一般流程，以防您想自己创建一个主题，然后我们将深入探讨我个人主题的一些研究和测试，以窥探整个过程。
开始
在您开始任何操作之前，您将安装 vsce（Visual Studio Code 扩展的缩写）并建立您作为发布者的身份。所有 操作说明都在这里。我知道看起来很多，但它大约需要 5-10 分钟，然后您就永远不必再为任何您创建的扩展程序执行此操作了。
现在您已经掌握了这些内容，以下是您开始工作所需的步骤。
首先，您需要运行
npm install -g yo generator-code这使得生成器在您的机器上全局可用（这意味着您现在可以在任何目录中创建主题）。然后，您可以执行此命令来启动您的主题
yo code您将看到一个如下所示的屏幕
请注意，我在这里使用箭头导航到“新建颜色主题”选项。另请注意，这是您创建任何其他扩展程序的方式。
选择此选项后，它会询问这是新主题还是我们想要从现有主题导入。我们想要创建一个新的。
接下来，您需要回答一些其他问题，包括
- 扩展程序的名称是什么？
- 标识符是什么？（我只是使用了名称，这可能是典型的。）
- 描述是什么？（我最初只是输入了一些愚蠢的内容。别担心，您可以在将来更新
package.json中的内容。） - 发布者的名称是什么？（请参阅前面的说明。）
- 应向用户显示什么名称？（我使用了与扩展程序名称相同的名称。）
- 此主题是深色、浅色还是高对比度？
它将为您设置一个基本主题，以便开始调整您的颜色首选项。完整的介绍和 所有详细信息都在这里。有关 主题的一般信息 更多详细信息。
试驾
我们有了一个基本主题，也有一些调色板的概念。那么，我们如何测试它呢？当您打开包含主题的目录时，您可以在 Mac 上按 fn + f5（或在 Windows 上仅按 f5），一个新窗口会立即弹出，您可以在其中测试您的主题！您将在原始主题窗口中看到，您现在有一个小的控制面板，您可以在其中重新加载、暂停和停止。在执行此操作之前，请不要忘记保存！
好的，现在您打开了另一个窗口，按 Command + Shift + P 以获取命令资源管理器。在其中键入“Developer: Inspect TM Scopes”，您将看到一个提示出现，允许您查看所有标签和属性：它会告诉您它们的颜色、字体样式以及您需要如何定位它。
不过，存在一个问题。编辑器中有许多内容您无法定位，因为 VS Code 会将其解释为您尝试驱动编辑器的其余部分（即文件查看器、终端和搜索框）。以下是我发现的两种方法来找出其余的范围
- 此页面非常有帮助，可以帮助您了解需要配置的一些基本内容。实际上，您可能希望从其中一些开始。
- 有 DevTools！您可以像使用 Chrome 一样打开它们：
Command + Option + I。我所做的是在计算样式中查找颜色，并在文本编辑器中查找它们以定位它们。您会注意到 DevTools 中的默认值为 RGBA，因此您必须Shift + 单击颜色以更改其格式，直到您获得等效的十六进制值。然后，我可以浏览主题 json 中匹配的颜色，直到找到匹配的值并更改它。
另一个小贴士！
当我第一次开始开发主题时，我以为我会尝试分叉其他人的主题作为起点。我尝试了 Wes Bos 的 Cobalt Two。虽然我最终没有使用它，但它有一个我认为很有价值的东西，那就是一个包含各种不同语言示例的 demos 目录。我从迁移他的目录开始，但很快意识到这些文件对于我的测试需求来说不够长。所以我创建了自己的。在纠正人们提交的问题的过程中，我还创建了一个 React 无状态函数组件示例、一个 Ruby 示例，当然我还创建了一个 .vue 单文件组件😀 这在维护方面也很有帮助，因为如果人们在以前未测试过的文件类型上遇到问题，他们可以将文件 PR 到 demos 目录中，我就可以针对他们看到的内容。它使复制和测试变得非常简单。
研究
代码主题的研究？这是否有点过头了？可能吧！但我确实很好奇：什么最适合大多数人的可读性，同时仍然是我喜欢的？
颜色和对比度
第一步是考虑辅助功能。我一直很喜欢 solarized 主题 如何将可读性作为其调色板的核心主题。我阅读了有关颜色保留和辅助功能的信息，事实证明，男性患色盲的几率非常高（男性约 8%，女性约 1%）。大多数程序员是男性，因此即使我不是色盲，至少部分围绕包含色盲人士来设计主题也是理所当然的。最常见的是红绿色盲，所以我找到了一些很好的测试方法，我最喜欢的方法很有趣，有点手动。
我最初是通过测试随机图像来开始的，看看我是否可以辨别出我可以匹配的模式。在测试过程中，我注意到互补色在所有测试中似乎表现最佳。但是，如果需要一次测试三种颜色，三色组合也会产生良好的效果。
如果您不熟悉颜色关系，Adobe Color CC（以前称为 Kuler）使可视化变得更容易，您甚至可以在编辑器中直接创建调色板。
非常重要的是要知道，一种颜色仅在参考另一种颜色时才是一种颜色。这是使颜色主题设计如此困难的部分原因。颜色不是静态的，它完全是关于关系的。您可能在辅助功能方面对此有所了解。黑色上的浅绿色可能是可访问的，但是当您将其更改为白色背景时，它就不再可访问了。
颜色辅助功能可以通过多种工具进行测量。以下是我的一些最爱
从一开始就为辅助功能设置调色板也很不错。Color Safe 是一个非常棒的工具，可以帮助您做到这一点。
我在这篇博文中详细介绍了颜色和感知：网络颜色指南。
颜色和阅读理解
另一个方面是了解哪些颜色（如果有的话）会影响阅读理解。一些研究表明，某些浅色主题中使用的白色背景上的黑色文本可能难以理解。理论上，使用叠加层来改变文本颜色提高了许多人的认知意识，尤其是那些患有阅读障碍和自闭症的人。然而，这些研究存在争议，并且叠加层是否能有效提高理解力或仅仅是一种偏好尚无定论。
有一种称为艾尔伦综合征或暗适应敏感综合征 (SSS) 的疾病，已知会干扰辨别字母和单词的能力。这是一种视觉感知障碍，发生在大细胞层级——可以帮助扫描和理解的视觉通路。人们认为这与在某些类型的灯光下阅读时会出现障碍有关，有些人认为这可能会影响多达 50% 的人（同样，这个数字存在争议且尚无定论）。
我们仍在了解 SSS，但有一些研究表明，彩色叠加层可以帮助集中注意力到文本上并减少眼睛疲劳。到目前为止，发现可以提高 SSS 患者可读性和对比度的颜色有**米色、金黄、绿色、粉色和蓝色**。到目前为止，蓝色与阅读障碍和注意力缺陷/多动障碍患者之间具有最强的关联。
尽管据我所知，这些研究尚未达到统计显著性，但我找不到遵循这些研究有任何危害的证据，并且在开发主题时牢记这些研究似乎是最安全的。我选择了一个以蓝色为主色的深色主题，并在整个主题中使用其他测试效果良好的颜色作为辅助和对比色。
其他主题灵感
我参考了一些调色板来获取灵感。例如，我进行了一项探索性研究，了解我想要什么样的色调。
- Palenight Material：我主题中的红色和紫色最初就是从这里开始的，然后我调整了紫色的值。
- Dracula：这个主题的底色稍微暗一些，并与我想要在主题中使用的柔和色形成对比。
- Panda：我借用了青绿色，并对其进行了一些调整。
我还参考了Maggie Appleton 的作品。我特别喜欢她在Egghead.io上的作品，从各个方面来看都非常棒。
我的调色板就是从这些绿色和橙色开始的。在处理可访问性问题时，我对它们进行了调整。图像右下角最黑的蓝黑色成为了我的主要背景的底色。
抉择，抉择
此时需要做出很多决定。谢天谢地，我的研究已经完成了。请记住，我想要柔和的色调，例如 Material Palenight、Panda 和 Dracula Dark 主题中使用的那些。具体来说，根据我在研究阶段阅读的内容，我想使用米色、金黄、绿色、粉色和蓝色。但对我来说，最重要的部分是跨颜色频谱的对比度。即使其他主题的颜色很完美，我觉得它们都缺乏这一点。
我开始着手创建**蓝色**和**金色**作为跨颜色频谱工作的基础标准。
我使用**紫色**来表示信息性关键字，但我不想将其突出显示——如果你试图创建对比度，你还需要考虑哪些颜色应该显得微妙，以便突出显示最重要的内容。如果所有内容都很重要，那么就没有什么内容是重要的了。我还想抵消紫色对比度较浅的事实，方法是使其在其他方面有所不同。我通过使用斜体来做到这一点。有些人喜欢这样，有些人讨厌这样。我决定购买一种名为Dank Mono的字体，类似于Operator Mono或Fira Code（后者是免费的开源版本），部分原因是我喜欢斜体字形的呈现方式。它们还有字体连字，这可能非常时尚。你可以通过"editor.fontLigatures": true在用户首选项中设置它们。不过，有些人不太喜欢斜体，所以我创建了一个非斜体版本，如果他们不喜欢斜体，可以切换到该版本。
我想要突出显示状态/数据，因为在扫描代码时，这对我来说往往很重要。我最初使用的是**红色**，因为我在许多其他主题中都见过它，但我无法摆脱我的眼睛只会注意到那里，以及红色通常与错误状态相关联的事实。因此，我改用了与我选择的背景形成最强对比的颜色**白色**，并将其斜体化以进一步突出显示。它也有助于成为蓝色和金色之间的中间色。我将红色/橙色区别保留用于 React 组件，这些组件需要与标准 HTML 元素有所区分。
对比度是零和游戏：如果所有内容都很重要，那么就没有什么内容是重要的。我尽力确保从概念上类似或可以回退的内容能够做到这一点，这样强对比度就是有意的，并且不会变成彩虹色，因为这会损害你扫描文档的能力。
其中一个决定是保持侧边栏的对比度较低，以便将焦点保持在编辑器上。我发现，如果我尝试提高编辑器其他部分的对比度，我的眼睛实际上开始感到疼痛。这可能是某些可访问性方面的挑战——因为并非所有人类都是一样的，颜色和字体等内容可能会成为一个频谱，而不是一个硬性规则。
在进行大量测试后，我决定采取的折衷方案是将主题保持在我自己可以使用且没有压力的范围内，并在自述文件中更新我推荐给与我不同且需要更高对比度级别的人的首选项。如果在 VS Code 中进入用户设置（代码 > 首选项 > 设置），在右侧窗格中，你可以添加自己的自定义项。在社区中的一些人提交了问题，因为他们想要此功能，在他们的帮助下，我们得出了以下这些针对需要对比度的人的可能的颜色首选项更新
"workbench.colorCustomizations": {
"activityBar.background": "#000C1D",
"activityBar.border": "#102a44",
"sideBar.background": "#001122",
"sideBar.border": "#102a44",
"sideBar.foreground": "#8BADC1"
},你实际上可以在这里放置任何颜色，这只是基于现有主题颜色提供的起点建议。这些工作区颜色自定义项非常方便，它们允许人们使用主题，然后根据需要进行微调。如果你正在使用一个主题，并且它几乎完美，但并不完全完美，你可以始终通过这种方式进行小的更改。
在创建主题的过程中（以及现在我维护它时），我还做出了数百个其他小决定，但在进行大量调整后，我会根据色盲模拟器检查我的工作。让它在每种语言的每个设置中都能正常工作并非易事，但我已经尽力而为。这就是演示文件夹派上用场的地方。现在它已经发布，如果有人需要特定的语言支持，我可以鼓励他们为该文件夹提交 PR，以便我能够提供支持。
这是一个 Angular 文件示例
…以下是我运行的一些测试，以确定对比度是否足够。请记住，我正在寻找的是跨颜色频谱的对比度，以实现有意义的区分，以及对不太需要关注的事物进行轻微的对比
需要进行大量测试才能获得不会变成单色调的东西，尤其是在跨语言的情况下。可能的颜色组合数量非常多，并且制作适用于每种情况的东西非常困难。因此，我花了大量时间制作演示文件夹并进行小的调整，以尽量覆盖尽可能多的范围。
错误修复
我发布了它！大家一起庆祝吧！🎉
对我来说最有帮助的是使用该主题的人的贡献，他们通过在GitHub 存储库中记录问题来让我知道他们的痛点。很难在整个主题中看到每个故障场景，到目前为止，我已经发布了 16 个后续版本来修复 50 多个错误，其中一些是在社区的帮助下修复的。人们让我知道他们看到的内容越多，主题就越好。当然，并非所有内容都会被纳入——有时人们想要与其他请求冲突的内容，因此在某些情况下我必须做出判断。尽管如此，这种情况很少见，到目前为止，大多数反馈都非常清晰且可操作。
就是这样！如果你想查看该主题，它可以在这里免费获取。我希望你发现这篇文章很有用，无论是了解主题和做出的决定的背景，还是了解创建自己主题的过程。
感谢 Sarah 记录你的过程，非常有帮助。