THIS IS A WORK IN PROGRESS. COMMENTS AND SUGGESTIONS PLEASE.
Visual Studio Code Theme based on Color Theory and Science
Edit TypeScript instead of editing JSON
This repo does not include any actual theme json files. It has a different approach. The theme is getting generated programmatically, which brings a huge list of advantages.
It is possible to use the full TypeScript capacities to generate colors and have very complex solutions if necessary.
How this works
The list of all possible themable colors is based on the official documentation from https://code.visualstudio.com/api/references/theme-color
Currently the list is supported manually, but there is some work done to have the list update itself based on the above mentioned page automatically.
A general good rule of thumb is 2-3 alphabets in length for the amount of characters in the line, or 52-78 characters (including spaces). This is why it is recommended to set the length of the lines at 80 chars.
When reversing color out, eg white text on black, make sure you increase the leading, tracking and decrease your font-weight. This applies to all widths of measure.
White text on a black background is a higher contrast to the opposite, so the letter forms need to be wider apart, lighter in weight and have more space between the lines.
Colors and Contrast
One of the important things is to consider accessibility and legibility during the theme development.
Based on the 2018 StackOverflow survey more than 90% of developers are male. And based on another survey around 8% of men and 1% of women have some sort of colorblindness.
With that in mind, all of the iteration have been tested with Coblis.
The repository includes a folder called
Color Coding Rules
Why Use Patterns
Despite color's appeal, color is not enough. In fact, color should be used second, pattern first. There are three reasons, all having to do with hardware (human or machine):
Color blindness, which is better described as "color confusion" or "color weakness."
Color blindness or weakness has four basic varieties:
Background Color & Pattern
With the stumbling blocks of black and white displays and printers and color-blind users, how do you pick the right colors?
The answer is that you don't. Don't pick the colors first--pick contrast and pattern first, then pick colors. The next few sections explain how.
Start with Black and White
The development platform guidelines recommend that you design the objects in your application in black and white, and then add color. This guarantees, they say, that the icons and windows will work just as well in black and white as in color.
All of the development-platform guidelines recommend against overusing color. Edward Tufte, in a report he prepared for the IBM Design Program (Tufte 1989) and in his own books (Tufte 1983, 1990), points out that less is more.
Any first version of a window or an icon will contain a lot of noise. But by studiously eliminating extra patterns, using gray instead of black lines, or eliminating lines altogether, you can reduce the noise and bring information forward.
Pick the Background First
Some designers try very hard to come up with imaginative ideas in an attempt to design attractive furniture for offices. They visualize pitch-black office machines on a bright table or dark furniture neighboring bright walls. Such designers don't care about ergonomic principles or balanced surface luminances. Etienne Grandjean in Ergonomics in Computerized Offices (Grandjean 1987, 46).
There are two types of background:
If you know anything about your typical user's workplace, you can easily design your program's backgrounds and foregrounds to accommodate your users' visual situation. If not, you can still pick a range of contrasts that reduce users' discomfort while they're looking at your windows.
Etienne Grandjean is one of the inventors of ergonomics and human factors. From 1950 to 1983, he was director of the Institute for Hygiene and Work Physiology at the Swiss Federal Institute of Technology in Zurich. From 1961 to 1970, he was general secretary to the International Ergonomics Association.
In Ergonomics in Computerized Offices, Grandjean describes the ill effects of high illumination levels on computer users. Although glare, reflections, and deep shadows on the monitor are often extremely irritating, an unrecognized eye-strain culprit, he concludes, is too much contrast between the foreground (computer monitor) and the background (everything else--desktops, walls, curtains, windows, and so on).
The human eye adapts so well to shifts in light and dark that we can see nearly as well in moonlight as in the brightest sunlight, even though the illumination level differs by more than 100,000 times. However, dark adaptation takes a relatively long time--25 minutes to reach 80 percent adaptation, an hour for full adaptation. Light adaptation is quicker than darkness adaptation--a reduction in light sensitivity by several powers of ten in a few tenths of a second.
Since office designers usually recommend lighting levels of over 1,000 lux, luminance readings in typical modern offices can cause severe acuity problems (leading to eyestrain, headaches, squinting, wrinkled brows, and so on). A thousand lux is a lot of light: The range of light in a typical living room is 50-200 lux. Bright sunlight is 50,000-100,000 lux and a well-lit street at night is 10-20 lux. Reflected light is about 60 percent of the original brightness, so overhead light of 1,000 lux reflected off an office wall could be as much as 600 lux (Millerson 1991, 11).
Research indicates that the ratio in brightness between the video screen and a document from which the user is typing should be no more than one to ten (1:10); the ratio between the video screen and the immediate background (walls, desktop, and so on) should be no more than 1:20; and the ratio between the video screen and the entire room should be no more than 1:40. The reality is much different. Researchers who surveyed 109 VDT workstations found a ratio of 1:10 to 1: 81 (average 1:21) between the screen and source documents, and a ratio of 1:87 to 1:1450 (average 1:300) between the screen and nearby office windows (Grandjean 1987, 43).
In short, to avoid dazzling and prevent eyestrain (your own or your users), try to keep all surfaces at the same brightness by matching the overall brightness or dimness of your screens to the office environment. If users typically use your software in brightly lit offices or if they type from bright source documents, use light or off-white backgrounds. If your software is used in dim or dark areas (air traffic control towers, for example), use dark backgrounds. If you can't find out what the background will be, you might want to include two backgrounds, one light and one dark, with your program.
Contrast and focus
The area on which you can focus is about one inch at 20 inches (1° angle of view). You are aware of text or images within a circle about a foot in diameter (1° to 40° ), but can perceive only movement outside that circle (41° to 70° ).
The rules for contrast on the screen, or between the screen and its immediate surrounding, take into account the size of the visual field as well as the dazzle effect described in Environmental contrast (Grandjean 1987, 41):
Color inside the eye of the beholder
Once you've picked the overall background for your program, you're ready to pick the color scheme for the windows, buttons, and icons in your software. However, colors have some odd characteristics, due to interactions between the physiology of the eye and the physics of light. In short, different wavelengths of color come into focus at different points in the eye.
Since yellow and green wavelengths come into focus at the retina, they require the least accommodation from the eye (this is the reason for so many yellow and green monochrome monitors a few years ago). Red wavelengths, on the other hand, come into focus a little behind the retina and therefore seem to "pop out" of the background. Since blue wavelengths come into focus in front of the retina, blues seem to fade into the background.
So, when you choose colors, remember that:
Other interesting effects include (Horton 1991, 227-228):
Foreground Color and Pattern
Color in the foreground parts of an application--charts, icons, toolbars, and so on--must contrast with the muted background of the application. However, bright colors bring up these issues:
Hint: When you start to create icons and the rest of the foreground objects, avoid temptation. Don't work directly on the computer with all its multitudes of colors and brightnesses. Instead, start by sketching your pictures on a paper napkin, a cafeteria placemat, the back of an envelope--anything that keeps you working on the shape of the picture rather than its colors. Put the picture into the computer only after you're satisfied it that stands on its own (by testing it on your colleagues, friends, relations, and clients, for example).
Pick meaningful colors
Although picking culturally correct colors for the overall interface is useful (cool gray for an accounting system, hot pink for a Post-Modern game), selecting meaningful colors for the signals inside your windows is even more important. There are four issues:
Chunking: People can remember the significance of only seven colors, plus or minus two. In other words, don't create line charts with nine differently colored lines (unless the entire pattern of lines is the significant picture--for example, to indicate a noise level or a confusion level).
Actual or spurious relationships: Since people automatically assume that items colored the same are related (Galitz 1993, 429), you must color related things the same, unrelated things differently. Don't just add color, in other words. Aesthetics are not as important as sense.
But you can take advantage of this automatic-association facility: For example, if your application has many charts, each of which contain the same types of data, color-code the data types. In a loan-analysis program, say, you could use green for principal payments, blue for interest payments, red for defaults, and so on. As well as simplifying the situation for your clients, the programming staff won't have to reinvent the color wheel every time a new chart is added to the program.
Task domain expectations: Find out how color (or pattern) is used in the area for which you're designing the program. "The designer needs to speak to operators to determine what color codes are applied in the task domain. From automobile-driving experience, red is commonly considered to indicate stop or danger, yellow is a warning, and green is go. In investment circles, red is a financial loss and black is a gain. For chemical engineers, red is hot and blue is cold. For map makers, blue means water, green means forests, and yellow means deserts" (Schneiderman 1992, 327).
Hint: When you ask about color, ask about relative position as well. For example, color-blind individuals in the U.S. use the mnemonic "Stop on top, go below" for stoplights. If you design a dashboard with red, yellow, and green lights in the wrong order or organize them horizontally, at least eight percent of your audience will get the lights wrong. See Color Confusions for details.
Cross-cultural differences: Colors mean different things in different cultures. For example:
Use pattern for significance, color for reinforcement
If you always use pattern with color, you avoid most problems (except the problem of visual clutter). For example, on a line chart with one significant line, and two or three other lines, you can use a bright color with a solid line for the most important data, then dotted and dashed lines for the less important data.
Pick contrasting colors
Visual acuity is worse for color than for brightness (Gregory 1987, 151). If you stripped away the hue and left only the gray scale, would you still be able to separate items visually? Picking gray-scale values in addition to hue may solve the problems caused by color confusions, black and white print-outs, and low light or low contrast settings on users' computers.
The rule is: To create enough contrast between type, lines, or other small items, and the background, make sure that the colors' gray-scale values differ by at least 20 to 30 percent (White 1990, 73).
How to tell if your selected colors have enough contrast
To check your colors, create a gray-scale ruler:
Avoiding Problems with Adjacent Colors
Most computer illustrations come in full color nowadays, so the question of what colors to use is either irrelevant ("It's a picture of a face! The colors are face colors!") or too complicated to talk about here ("Remove that green cast in her face before sending the file to the color separator").
However, some colors, when used in blocks, do odd things in the presence of other colors. For example, bright colors like red look bigger than dark colors like black (White 1990, 15-18). In Figure 8, notice that the inner red square looks larger than the inner black square:
Problem: Comparing widely separated colors
Since color perception is sharp only near the fovea, color coding is effective only within 10 to 15 degrees of the central area of vision. Widely separated colors are hard to compare, in other words, unless you lean back or step back from the computer (Horton 1991, 226).
Problem: Hues change in proximity to one another
If you want a color to look like itself and stay that way, don't put it next to a complementary color (White 1990, 16-18).
Complementary colors are pairs of colors which, when combined or mixed, cancel each other out (lose hue) by producing a grayscale color like white or black. When placed next to each other, they create the strongest contrast for those two colors. Complementary colors may also be called "opposite colors."
Against a shade of itself vs. its complement
Same color looks light, then dark
Problem: Complementary colors flicker
Putting blocks of saturated complementary colors next to one another causes eyestrain. Because the cones in your eyes cannot see both colors at the same time, your focus shifts back and forth rapidly without being able to settle on either color:
This shows you what happens with orange and blue. Red and blue-green, yellow and dark blue, and purple and chartreuse (yellow-green) are also complementary colors.
Problem: Contrasting colors create intense edges
The edge between two bright contrasting colors can be very intense and often distracting. To avoid this effect, you can either lighten or darken one of the colors or separate the two colored areas with a white or black line.
Too much color contrast in the first penguin, not so bad in the second
Problem: Color does not make type stand out
Do not fall in the trap of thinking that color is as strong as black because it looks brighter, more cheerful, more vibrant, and so more fun to look at. It is not. You have to compensate for its weakness, to make color as visible as black. There just has to be more of it, so you have to use fatter lines, bolder type, or larger type to overcome the problem. Jan White in Color for the Electronic Age (White 1990, 24).
When you switch from black text or lines to light- or bright-colored text or lines (red, orange, gold), double the width of the lines and use either bold or a larger type size. One to two points larger should be enough for 8- to 12-point type, two to four points larger for 14- to 24-point type. However, check visibility by squinting at the text. Too-light type will recede or even disappear.
The reason for color's poor showing is physiological. Colored letters and numbers can only be read when they are quite close to the eye's focal point, although color itself can be seen far from the focal point. "This indicates that color is a useful aid for visual search but actual reading takes place in a restricted visual reading field. If a reader is familiar with the significance of colors, then colors will help to locate the required information quickly, but the recognition of a word or symbol itself depends on the legibility of characters and not on their color" (Grandjean 1987, 30-31).