One Objective in TDS quarterly OKR is to improve development efficiency. When the company already offers top-of-the-line Macs, Aeron seats, and 4K professional displays, what’s to add to the efficiency of development?
In recent years, some human-computer interaction studies [1] have shown that color combinations have statistical significance in the differences caused by code input efficiency, accuracy, readability and subjective beauty. Several experiments show that the input efficiency can be increased by more than 10% when the color combination with similar wavelength is used. That said, if you are already an enviable 10x Programmer, you can become an 11x Programmer with an optimized color theme. However, the experimental data also show that aesthetic perception and efficiency do not have a strong correlation, so how to strike a balance between the two is very challenging.
The engineers and designers at TDS decided to stop other work and prioritize 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 to install TapTap Theme for VSCode, and you can start the 11X Programmer specific experience.
Marketplace.visualstudio.com/items?itemN…
Emacs, JetBrains, TextMate, Vim, Xcode users, we haven’t forgotten you either: github.com/TapTap/base…
Those who use other tools can DIY our brand skin from one of the 9 levels currently available, according to their own needs
Basic color disc:
Structured color matching data can be found in this file: github.com/TapTap/base…
The design process
In order to ensure the readability and accessibility of the color scheme, we have done sufficient verification during the research process, so let’s take a look at how the TapTap Theme was created:
Diablo mode
Dark Mode has been a hot topic in recent years, and more and more enterprises are starting to pay attention to it. Both Apple and Google offer this feature to users.
Why dark Mode?
Focus on the content
We found that most developers use color-coded syntax under a black screen to reduce visual fatigue. As Toptal developer Kevin Bloch [2] says, “A black background reduces eye strain, makes color coding easier to read, and speeds up code comprehension.” In an experiment [3], the researchers found that compared with the light mode, the dark mode promoted users to stay awake longer and focus more on their operations and tasks. Because of the hierarchical relationship of colors, dark colors will automatically fall back in the visual sense, while light colors will extend forward, so that the strong hierarchical relationship allows users to pay more attention to the highlighted content.
The eyes comfortable
As mentioned in the article [4], the user interface in dark mode can reduce the visual fatigue of the user, especially in the case of low light. In addition, dark mode produces much less blue light than light mode; If the monitor is used at night, less blue light may mean less interference with the body’s sleep cycle [5].
Energy conservation and emissions reduction
On some displays (such as OLED and AMOLED), dark Mode can extend battery life [6]. Google has confirmed that using Dark Mode on OLED screens is a big help to battery life. For example, at 50 percent brightness, a dark background in the YouTube app uses about 15 percent less screen energy than white. At 100 percent screen brightness, the dark background saves up to 60 percent of the screen’s energy.
9 big swatches
TapTap Theme Color board 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 from the seven color schemes in the TapTap design system, and finally nine color schemes are expanded.
As we all know, the biggest difference between dark mode and light mode is the color handling. In Dark mode, we don’t want to break the base palette and color values of light mode. When a design system has both dark and light modes, the color scheme should have a certain continuity and association, rather than two sets of unrelated color sats, so as to avoid development and subsequent maintenance costs, and to ensure consistency when actually switching and using, which means that certain rules need to be used.
For example, in light mode, the darker the color, the more contrast it will have with the background color of the interface, and the more it will attract the user’s attention and the higher the visual hierarchy; In dark mode we need to follow the same rule, so the lighter the color is.
There are three visual channels for color, which are hue (H), saturation (S) and lightness (B). Our general design idea is to get a set of colors in dark mode by keeping hue (H) unchanged and adjusting saturation (S) and lightness (B). The advantage of this is that the color source in the dark mode is the same, and the result of the adjustment will be relatively harmonious.
In addition, by looking at mature color themes on the market such as GitHub, we found that the high contrast of the swatch makes it easier for users to read information. Therefore, by adding the gradient of transparency, we expanded the original 8 levels to 10, providing more options for subsequent code and palette calls.
Color accessibility verification
In order to ensure the universality of color matching theme, we did some research on color Accessibility. Studies have shown that the incidence rate of color blindness in men is very high (about 8% in men and 1% in women), among which the most typical is red-green color blindness [7].
The TapTap Theme has been repeatedly verified by the Colorrevolutionary plugin to maximize the color difference under 9 visual obstacles.
conclusion
You are welcome to install and use this theme to improve the comfort and efficiency of development. While tapTap-specific themes can be used by anyone, other benefits of working at TapTap aren’t available to every company. In addition to providing top-of-the-line hardware, the company also provides free meals, unlimited paid vacation, and supplemental commercial insurance. More importantly, TapTap is committed to providing an open and transparent work environment, with no non-compete agreements and fair treatment of every employee. For those who have passed the probation period and choose to leave voluntarily because they are not satisfied with their work status or for other reasons, we will also award a bonus equivalent to 6 months ‘salary to encourage everyone to find the most suitable position for them, and let those who choose to work in TapTap have no worries at home. If you’re interested in working at TapTap, visit career.taptap.dev/ to learn about current openings and submit your resume. Hope to see you at TapTap soon.
The resources
-
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