TDS 每个季度的 OKR 里都有一个 Objective 是提高开发效率。在公司已经提供顶配 Mac、Aeron 座椅、4K 专业显示器之后，还有什么能进一步提高开发效率呢？
近年来，有人机交互学的研究 [1] 表明，颜色组合对于代码输入效率、正确率、可读性和主观美感造成的差异具有统计学意义。其中，多组试验表明当使用波长相近的颜色组合时，输入的效率可以提高 10% 以上。也就是说，如果你已经是令人羡慕的 10x programmer，使用优化的配色主题后，就可以成为 11x programmer。然而实验数据同时也说明审美的感受和效率并没有强关联性，所以如何在两者间取得平衡是一件很有挑战的事。
所谓磨刀不误砍柴工，TDS 的工程师和设计师决定中断其它工作，优先解决效率问题。经过一个季度的调研和尝试，推出了 TapTap 代码编辑器主题。
如何使用
如果你是 VSCode 用户，点击下方链接，安装 TapTap Theme for VSCode，即可开启 11x programmer 专属开发体验。
https://marketplace.visualstudio.com/items?itemName=TDS.taptap-vscode-theme
Emacs、JetBrains、TextMate、Vim、Xcode 用户，我们也没有忘记你们：https://github.com/TapTap/base16-taptap-scheme/releases
使用其他工具的同学可以结合自己的使用需求，从目前提供的 9 个色阶中来 DIY 我们的品牌皮肤哦～
基本色盘：
结构化的配色数据可以在这个文件中找到：https://github.com/TapTap/base16-taptap-scheme/blob/main/taptap.yaml
设计过程
为了保障配色的可读性与可访问性，我们在调研过程中做了充分的验证，接下来就让我们一起来看下 TapTap Theme 是如何创作的：
暗黑模式
暗黑模式是近年的热门话题，越来越多的企业逐渐开始关注，Apple 和 Google 都为用户提供了这一功能。
为什么要做暗黑模式？
专注内容
我们发现，大多数开发人员使用黑屏下的彩色编码语法来减少视觉疲劳。正如 Toptal 的开发人员 Kevin Bloch [2] 所说：“黑色背景减少了眼部疲劳，使彩色编码更容易阅读，也加快了代码的理解速度。” 研究人员在实验 [3] 中发现，与浅色模式相比，暗黑模式可以促进用户长时间地保持清醒，更加专注自己的操作与任务。因为色彩具有层级关系，深色会在视觉感官上自动后退，浅色部分则会向前延展，这样对比强烈的层次关系可以让用户更注重被凸显出来的内容信息。
眼部舒适
有文章 [4] 提到，暗黑模式下的用户界面可以减少用户的视觉疲劳，特别是在光线不足的情况下。另外， 暗黑模式产生的蓝光比浅色模式要少得多；如果在晚上使用显示器，更少的蓝光可能意味着对身体睡眠周期的干扰更小 [5]。
节能减排
在一些显示器上（如OLED、AMOLED），暗黑模式可以延长电池寿命 [6]。谷歌证实，在 OLED屏幕上使用暗黑模式对电池寿命有很大帮助。例如，在 50% 的亮度下，YouTube 应用程序中的深色背景比白色节省约 15% 的屏幕能量。在屏幕亮度 100% 的情况下，深色背景节省了屏幕高达 60% 的能量。
9 大色板
TapTap Theme 色板以 TapTap 品牌蓝为起始主色，橙色为辅色，根据不同的代码类型与使用场景，从 TapTap 设计系统中 7 种配色的基础上增加了紫色和粉色，最终扩展出 9 种配色。
众所周知，暗黑模式与浅色模式最大的不同就在色彩的处理上，在暗黑模式中，我们并不想打破浅色模式下基础色板的配置规律及色值。当一个设计系统的深浅模式并存时，配色应该有一定的延续和关联，而不是毫不相关的两套色板，这样一是避免开发及后续的维护成本，二是实际切换和使用时，可以保证一致性，这意味着需要借助一定规则。
举个例子，浅色模式下颜色越深，与界面背景色的对比度就越大，也就越容易引起用户的注意，视觉层级就越高；在暗黑模式下我们同样需要遵循这一规律，所以对应所使用的颜色也就越浅。
颜色有三个视觉通道，分别是色调（H）、饱和度（S）、明度（B），我们大体的设计思路是基于浅色的基础色板，保持色调（H）不变，通过调整饱和度（S）和明度（B），去得到一套暗黑模式下的色彩。这样的好处是，深浅模式下的色彩来源是同一个，调整后得到的结果也会相对和谐。
另外，通过观察市场上成熟的配色主题如 GitHub 等我们发现，色板的高对比度使用户读取信息更加容易。因此，我们通过补充透明度的梯度，将原有的 8 个色阶拓展到了 10 个，为后面代码与色板的调用提供了更多的选择空间。
颜色可访问性验证
为了保证配色主题的通用性，我们对颜色可访问性（Accessibility）做了一些调研。研究表明男性色盲的病发率非常高（男性约 8%、女性约 1%），其中最典型的是红绿色盲 [7]。
TapTap Theme 经过 Colorblindly 插件的反复验证，将 9 种视觉障碍下的颜色差异做到了最大。
结语
欢迎大家安装使用这个主题来提高开发的舒适度和效率。虽然 TapTap 专属主题谁都可以用，但是在 TapTap 工作的其他好处就不是每家公司都有的了。公司除了提供顶级的硬件设备外，还提供免费三餐、无限带薪休假、补充商业保险。更重要的是 TapTap 致力于提供开放、透明的工作环境，不签竞业禁止协议，公平地对待每位员工。如果你对在 TapTap 工作感兴趣，请访问 https://blog.taptap.dev/career 了解目前开放的职位并提交你的简历。希望不久之后在 TapTap 见到你。
参考资料
- Kirlidog, Melih. (2014). Effect of Colours in Manual Data Typing. Computer Science & Information Technology. 4. 65-76.
- Miklos Philips, Dark UIs. The Good and the Bad. Dos and Don’ts.
- Luka Koning, Marianne Junger, Dark user interface, dark behavior? The effect of ‘dark mode’ on honesty, Computers in Human Behavior Reports, Volume 4, 2021
- Reeno Koemets, The Benefits of Dark Mode: Why should you turn off the lights?
- Silas S. Brown, Advantages of dark backgrounds on computer displays.
- Brooke Crothers, The Facts About Dark Mode And Battery Life: LCD Vs OLED, iOS 13 On iPhone, Android Q, Forbes, 2019
- Gretchyn Bailey, Color Blindness: Types, Causes, Symptoms, Treatment