11x Programmer's exclusive TapTap code editor theme

TDS has an Objective in the OKR every quarter to improve development efficiency. After the company has provided top-equipped Macs, Aeron seats, and 4K professional monitors, what else can further improve development efficiency?

In recent years, research on human-computer interaction [1] has shown that color combinations have statistical significance for differences in code input efficiency, accuracy, readability, and subjective aesthetics. Among them, multiple experiments show that when using color combinations with similar wavelengths, the input efficiency can be increased by more than 10%. In other words, if you are already the enviable 10x programmer , after using the optimized color theme, you can become 11x programmer . However, the experimental data also shows that there is no strong correlation between aesthetic feeling and efficiency, so how to strike a balance between the two is a very challenging thing.

The so-called sharpening and not cutting wood by mistake, TDS engineers and designers decided to interrupt other work and prioritize the problem of efficiency. After a quarter of research and experimentation, the TapTap code editor theme was launched.

how to use

If you are a VSCode user, click the link below and install TapTap Theme for VSCode to start the exclusive development experience of 11x programmer.

https://marketplace.visualstudio.com/items?itemName=TDS.taptap-vscode-theme

Emacs, JetBrains, TextMate, Vim, Xcode users, we have not forgotten you: https://github.com/TapTap/base16-taptap-scheme/releases

Students who use other tools can combine their own needs and DIY our brand skin from the 9 color levels currently provided~

basic color palette:

structured color matching data can be found in this file: https://github.com/TapTap/base16-taptap-scheme/blob/main/taptap.yaml

Design process

In order to ensure the readability and accessibility of the color matching, we have done sufficient verification during the research process. Next, let us take a look at how TapTap Theme is created:

dark mode

Dark mode is a hot topic in recent years, and more and more companies have gradually begun to pay attention to it. Both Apple and Google provide users with this feature.

Why do dark mode?

Focus on content

We found that most developers use the color coding syntax under the black screen to reduce visual fatigue. As Toptal’s developer Kevin Bloch [2] said: “The black background reduces eye fatigue, makes color coding easier to read, and speeds up code comprehension.” The researchers found in the experiment [3] that the difference between light and light Compared with the color mode, the dark mode can promote users to stay awake for a long time and focus more on their operations and tasks. Because the color has a hierarchical relationship, the dark color will automatically retreat in the visual sense, and the light color will extend forward, so that the contrasting hierarchical relationship can make users pay more attention to the highlighted content information.

eye comfort

An article [4] mentioned that the user interface in dark mode can reduce the user's visual fatigue, especially in the case of insufficient light. In addition, the dark mode produces much less blue light than the light mode; if the display is used at night, less blue light may mean less interference with the body's sleep cycle [5].

Energy saving and emission reduction

On some displays (such as OLED, AMOLED), dark mode can extend battery life [6]. Google confirmed that using dark mode on OLED screens can greatly help battery life. For example, at 50% brightness, the dark background in the YouTube application saves about 15% of screen energy than white. When the screen brightness is 100%, the dark background saves up to 60% of the screen's energy.

9 large color palette

The TapTap Theme color palette starts with TapTap brand blue as the main color, and orange as the secondary color. According to different code types and usage scenarios, purple and pink are added to the 7 colors in the TapTap design system, and finally 9 are expanded. Color matching.

As we all know, the biggest difference between dark mode and light mode is the color processing. In dark mode, we don't want to break the basic color palette configuration rules and color values in light mode. When the dark and light modes of a design system coexist, the color matching should have a certain continuity and correlation, rather than two sets of unrelated color plates, so that one is to avoid development and subsequent maintenance costs, and the other is to ensure that the actual switching and use Consistency, which means that certain rules need to be used.

For example, the darker the color in the light mode, the greater the contrast with the background color of the interface, the easier it is to attract users’ attention, and the higher the visual level; in the dark mode, we also need to follow this rule, so Corresponding to the color used is also lighter.

Color has three visual channels, namely hue (H), saturation (S), and lightness (B). Our general design idea is based on a light-colored basic color palette, keeping the hue (H) unchanged, and adjusting the saturation (S) and brightness (B) to get a set of colors in dark mode. The advantage of this is that the color source in the shade mode is the same, and the result obtained after adjustment will be relatively harmonious.

In addition, by observing mature color themes on the market, such as GitHub etc., we found that the high contrast of the color palette makes it easier for users to read information. Therefore, we have expanded the original 8 color levels to 10 by supplementing the transparency gradient, which provides more options for the subsequent code and color palette calls.

Color accessibility verification

In order to ensure the universality of the color theme, we have done some research on color accessibility. Studies have shown that the incidence of male color blindness is very high (about 8% for men and 1% for women), and the most typical of them is red-green color blindness [7].

TapTap Theme has been repeatedly verified by the Colorblindly plug-in, and has maximized the color difference under 9 visual impairments.

Conclusion

Everyone is welcome to install and use this theme to improve the comfort and efficiency of development. Although TapTap exclusive themes can be used by anyone, other benefits of working at TapTap are not available to every company. In addition to providing top-notch hardware equipment, the company also provides free three meals, unlimited paid vacations, and supplementary commercial insurance. More importantly, TapTap is committed to providing an open and transparent working environment, does not sign a non-competition agreement, and treats every employee fairly. For colleagues who have passed the probation period and choose to resign because they are dissatisfied with their work status or for other reasons, we will also award a compliment equivalent to 6 months' salary to encourage everyone to find the most suitable position for them. It also gives people who choose to work at TapTap no worries. If you are interested in working at TapTap, please visit https://career.taptap.dev/ learn about the currently open positions and submit your resume. Hope to see you in TapTap soon.

Reference

1. Kirlidog, Melih. (2014). Effect of Colours in Manual Data Typing. Computer Science & Information Technology. 4. 65-76.
2. Miklos Philips, [Dark UIs. The Good and the Bad. Dos and Don’ts.
   ](https://www.toptal.com/designers/ui/dark-ui)
3. Luka Koning, Marianne Junger, Dark user interface, dark behavior? The effect of ‘dark mode’ on honesty, Computers in Human Behavior Reports, Volume 4, 2021
4. Reeno Koemets, The Benefits of Dark Mode: Why should you turn off the lights?
5. Silas S. Brown, Advantages of dark backgrounds on computer displays.
6. Brooke Crothers, The Facts About Dark Mode And Battery Life: LCD Vs OLED, iOS 13 On iPhone, Android Q, Forbes, 2019
7. Gretchyn Bailey, Color Blindness: Types, Causes, Symptoms, Treatment