用色彩工具加速GitHub主题的创建

Dark mode is no longer a nice-to-have feature. It’s an expectation. Yet, for many teams, implementing dark mode is still a daunting task.

黑暗模式不再是一个很好用的功能。它是一种期望。然而,对于许多团队来说,实施黑暗模式仍然是一项艰巨的任务。

Creating a palette for dark interfaces is not as simple as inverting colors and complexity increases if your team is planning multiple themes. Many people find themselves using a combination of disjointed color tools, which can be a painful experience.

为黑暗界面创建调色板并不像倒置颜色那么简单,如果你的团队正在计划多个主题,复杂性就会增加。许多人发现自己在使用各种不相干的色彩工具,这可能是一种痛苦的经历。

GitHub dark mode (unveiled at GitHub Universe in December 2020) was the result of trial and error, copy and paste, as well as back and forth in a Figma file (with more than 370,000 layers!).

GitHub黑暗模式于2020年12月在GitHub Universe揭幕)是试验和错误、复制和粘贴以及在Figma文件(有超过37万个图层!)中来回操作的结果。

A screenshot of the Figma file we made while designing GitHub dark mode
A screenshot of the Figma file we made while designing GitHub dark mode

A screenshot of the Figma file we made while designing GitHub dark mode
我们在设计GitHub黑暗模式时制作的Figma文件的截图

A few months after shipping dark mode, we began working on a dark high contrast theme to provide an option that maximizes legibility. While we were designing this new theme, we set out to improve our workflow by building an experimental tool to solve some of the challenges we encountered while designing the original dark color palette.

在推出黑暗模式的几个月后,我们开始研究一个黑暗的高对比度主题,以提供一个最大限度的可读性的选项。在设计这个新主题的同时,我们着手改进我们的工作流程,建立一个实验性的工具来解决我们在设计最初的深色调色板时遇到的一些挑战。

We’re calling our experimental color tool Primer Prism.

我们把我们的实验性色彩工具称为Primer Prism

A sneak peek of Primer Prism
A sneak peek of Primer Prism

A sneak peek of Primer Prism
窥探 "棱镜"(Primer Prism)。

Part of GitHub’s Primer ecosystem, Primer Prism is a tool for creating and maintaining cohesive, consistent, and accessible color palettes. It allows us to:

作为GitHub的Primer生态系统的一部分,Primer Prism是一个用于创建和维护有凝聚力的、一致的和可访问的调色板的工具。它使我们能够

  • Create or import color scales.
  • 创建或导入色标。
  • Adjust colors in a perceptually uniform color space (HSLuv).
  • 感知上统一的颜色空间(HSLuv)中调整颜色。
  • Check contrast of color pairs.
  • 检查颜色对的对比度。
  • Edit lightness curves across multiple color scales at once.
  • 一次性编辑多个色阶的明度曲线。
  • Export color palettes to production-ready code (JSON).
  • 将调色板导出为可用于生产的代码(JSON)。

Our workflow

我们的...

开通本站会员,查看完整译文。

Home - Wiki
Copyright © 2011-2024 iteam. Current version is 2.129.0. UTC+08:00, 2024-07-04 15:17
浙ICP备14020137号-1 $Map of visitor$