这是一个创建于 1223 天前的主题，其中的信息可能已经有所发展或是发生改变。
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 致力于提供开放、透明的工作环境，不签竞业禁止协议，公平地对待每位员工。对于已经通过试用期，因为对自己的工作状态不满意或者其他原因而选择主动离职的同事，我们还会授予相当于 6 个月工资的致意金，用以鼓励每个人寻找最适合自己的位置，也让选择在 TapTap 工作的人没有后顾之忧。如果你对在 TapTap 工作感兴趣，请访问 https://career.taptap.dev/ 了解目前开放的职位并提交你的简历。希望不久之后在 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
 |
1
zhengfan2016 2021-07-20 15:10:13 +08:00  1
你们 leancloud 没有自己的代码编辑器主题吗（狗头保命）
|
 |
2
ferrum 2021-07-20 16:29:03 +08:00 via iPhone
这个主题不错，想收到自己的 App 的编辑器里面，但仓库里面没看到 License，直接用可以吗？
|
 |
3
Outshine 2021-07-21 10:48:07 +08:00
看了一楼回复才发现这不是 TapTap 发的帖（狗头）
|
 |
4
LeanCloud OP 这都被你发现我们是一家的啦（狗头）
|
 |
6
RicardoY 2021-07-21 20:04:44 +08:00
cool
|
 |
7
scnace 2021-07-22 00:10:41 +08:00 via Android
主题很棒，支持 Semantic Highlight 吗🙈
|
 |
8
hjiang 2021-07-22 01:08:22 +08:00 via iPhone
@zhengfan2016 我们 LeanCloud 就是我们 TapTap 呀。
|
 |
9
tousfun 2021-07-22 08:27:47 +08:00 via iPhone
还挺好看的
|
 |
10
kollinchu 2021-07-22 09:06:26 +08:00
这个主题所用的字体是什么呢？
|
 |
11
OldDriverKing 2021-07-22 11:28:02 +08:00
挺好看的，用上了。谢谢分享
|
 |
12
EAFA0 2021-07-22 13:21:35 +08:00
再带上 Bracket Pair Colorizer 2 的彩虹花括号
|
 |
13
muunala10221 2021-07-22 14:16:53 +08:00
用上了，但 TS 和 JS 很多变量没有着色
|
 |
15
leeyeh 2021-07-23 06:19:32 +08:00 via iPhone
@muunala10221 （抱歉上面 @ 错了）
|
 |
16
chenmoshijin 2021-07-23 09:40:41 +08:00
优秀
|
 |
17
sam014 2021-07-23 10:44:04 +08:00
用了一天，感觉不错，之前用 One Monokai
|
|
18
muunala10221 2021-07-23 16:33:42 +08:00
@leeyeh 就是有很多变量啦，都是白色，可以参考下 vscode 的深色+主题 ，同一文件部分变量 tap 这个主题色显示的为白色，深色+主题为深蓝色（小建议 可能不对
|
|
19
muunala10221 2021-07-23 16:34:29 +08:00
@leeyeh 就是我的项目是 vue+ts，我定义的一个对象属性，key 全部都是白色～看起来就像没有着色一样
|
|
20
leeyeh 2021-07-23 17:14:10 +08:00
@ferrum 商店后面有说明：Credit to [GitHub's VS Code themes]( https://github.com/primer/github-vscode-theme)，代码是 MIT 的。
@scnace 支持 Semantic Highlight 。 @kollinchu 这个主题主要关注配色，没有定义字体。 @muunala10221 .vue 确实没测到。Semantic Highlight 其实是要针对每种不同的语言调整的，可能 github-vscode-theme 没有考虑到。 |
Select Language