黑暗模式不再是一个很好用的功能。它是一种期望。然而，对于许多团队来说，实施黑暗模式仍然是一项艰巨的任务。
为黑暗界面创建一个调色板并不像倒置颜色那么简单，如果你的团队正在计划多个主题，复杂性就会增加。许多人发现自己在使用各种不相干的颜色工具，这可能是一种痛苦的经历。
GitHub暗色模式（在2020年12月的GitHub Universe上亮相）是试验和错误、复制和粘贴以及在Figma文件（有37万多个图层！）中来回折腾的结果。
我们在设计GitHub黑暗模式时制作的Figma文件的截图
在推出黑暗模式的几个月后，我们开始着手设计一个黑暗的高对比度主题，以提供一个能最大限度地提高可读性的选项。在设计这个新主题的同时，我们着手改进我们的工作流程，建立了一个实验性的工具来解决我们在设计最初的暗色调色板时遇到的一些挑战。
我们把我们的实验性色彩工具称为Primer Prism。
Primer Prism的偷窥者
作为GitHub的Primer生态系统的一部分，Primer Prism是一个用于创建和维护有凝聚力的、一致的和可访问的调色板的工具。它允许我们
- 创建或导入色阶。
- 在感知上统一的颜色空间（HSLuv）中调整颜色。
- 检查颜色对的对比度。
- 一次性编辑多个色阶的明度曲线。
- 将调色板导出为可用于生产的代码（JSON）。
我们的工作流程
我们用Primer Prism创建调色板的改进工作流程是一个由三个步骤组成的迭代循环。
- 定义色调
- 选择颜色
- 测试颜色
定义色调
我们首先要确定调色板的色调特征和对比度需求。
- 背景应该有多亮或多暗？
- 前景和背景之间的对比度应该是多少？
虽然每个调色板都会有独特的色调特征，但我们要注意所有调色板都要符合对比度可及性准则。
在Primer Prism中，我们通过创建一个新的色阶和调整明度曲线来开始一个新的调色板。在这个阶段，我们只关注明度和对比度。我们稍后会重新审视色相和饱和度。
当我们改变每种颜色的明度时，Primer Prism使用WCAG 2标准检查色阶中潜在颜色配对的对比度。
上下拖动明度滑块来调整刻度的明度曲线
Primer Prism还允许我们在多个色阶之间共享曲线。因此，当我们有更多的色阶时，我们可以通过调整一条明度曲线快速改变整个调色板的色调特征。
一次性调整所有色阶的明度曲线
Primer Prism使用HSLuv色彩空间来确保整个调色板的明度值在感觉上是统一的。在HSLuv色彩空间中，两个具有相同明度值的颜色看起来会同样明亮。
选择颜色
接下来，我们要定义我们调色板的整体色彩特征。
- 我们需要什么色调（例如：红色、蓝色、绿色等）？
- 我们希望颜色有多鲜艳？
我们使用之前制作的相同的明度曲线，为每个色相创建一个色标。然后，我们在所有的色阶中比较和调整基色（色阶中的第五步），直到调色板感觉有凝聚力和一致性。
每个色阶的并排比较
在决定了每个色阶的基色之后，我们对色调（较浅的颜色）和阴影（较深的颜色）进行微调。例如，蓝色在色调中转向绿色调，在阴影中转向紫色调。
蓝色色阶的色相、饱和度和明度曲线
微调色阶与其说是一门科学，不如说是一门艺术，通常需要在颜色 "感觉正确 "之前进行许多微调。请看《UI设计中的色彩。A (Practical) FrameworkbyEric D. Kennedy来了解更多关于设计色阶的基本原理。
测试颜色
为了在真实世界的场景中测试我们的颜色，我们将调色板从Primer Prism导出为JSON对象，并将其添加到Primer Primitives，即我们的设计代币库。我们使用Primer Primitives包的预发布版来测试GitHub.com上的新调色板。
应用于GitHub.com的深色调色板
下一步是什么
我们使用Primer Prism设计了几个新的调色板，加速了GitHub的深色高对比度、浅色高对比度和色盲主题的创建。接下来，我们计划改进我们的工具，以支持以下关键工作流程。
视觉测试工作流程
我们计划将视觉测试直接整合到Primer Prism中。目前，调色板的视觉测试发生在Primer Prism之外，通常是在Figma或生产应用中。然而，我们希望有一种更方便的方式来可视化颜色在映射到功能变量并用于实际用户界面时的效果。
GitHub的工作流程
我们计划将GitHub整合到Primer Prism中。现在，编辑现有的调色板很麻烦，因为Primer Prism没有连接到我们存储颜色变量（Primer Primitives）的GitHub仓库。与GitHub的整合将使我们能够直接从Primer Primitives库中提取并推送到该库。
Figma工作流程
我们的设计师使用Figma来探索和测试新的设计理念。我们计划创建一个Figma插件，将Primer Prism无缝集成到他们的工作流程中。
试试吧
Primer Prism是开源的，任何人都可以在primer.style/prism上使用。
我们很想听听你的想法。如果你有反馈，请在GitHub仓库创建一个问题或发起讨论。
**警告。**Primer Prism是实验性的。随着我们的不断迭代，可能会出现错误和破坏性的变化。
谢谢
非常感谢@Juliusschaeper、@auareyou、@edokoa和@broccolini在GitHub黑暗模式调色板上的出色工作。
Primer Prism的灵感来自于许多现有的色彩工具：
-ColorBox by Lyft
-Components AI
-Huetone by Alexey Ardov
-Leonardo by Adobe
-Palettte by Gabriel Adorf
-Palx by Brent Jackson
-Scale by Hayk An
