Polished

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

In the src folder the repo has several TypeScript files taking care of theme generation and the logic.

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.

Some notes

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.

Demo codes

The repository includes a folder called demos which includes example files of different types to test the theme on.

Color Coding Rules

1. Color coding is useful only if the user knows the code. Red for port (left) and green for starboard (right) will make sense to boat owners and airplane pilots, but not to car drivers.
2. The advantage of color increases as clutter increases. In an uncluttered display, color adds nothing to performance. In a complicated, high-density display (60 items), however, color can reduce search time by 90 percent.
3. Average search time increases linearly as the number of items using the same color increases (by 0.13 seconds per extra three items). In other words, you lose some of your color advantage if too many items have the same color.
4. If you're looking for something of a particular color, having items with other colors on the same display has no effect on search time if the other colors are sufficiently different from the target color. In other words, since red is very different from yellow, no user will pick a yellow triangle when she's looking for a red triangle. However, she might mistake an orange triangle for a red one since orange and red are too close, especially for red-blind individuals (see Color Confusion).

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):

1. Not everyone has a color printer. Say that you have designed a lovely chart with four or five colored lines for your stock valuation tracker. When you print it on a black and white laser printer, what do you get? A lovely chart with four or five undifferentiated black lines.
2. Personal digital assistants and web phones. Many web pages are being sent to personal digital assistants (PDAs) and web-enabled cell phones. Eventually the manufacturers will sell color displays, but they're not available right now.

Color blindness, which is better described as "color confusion" or "color weakness."

Color Confusion

Color blindness or weakness has four basic varieties:

• green blindness--individuals confuse greens, yellows, and reds (6.39 percent)
• red blindness--individuals confuse various shades of red (2.04 percent)
• blue blindness--individuals confuse blues (0.003 percent)
• total color blindness, which affects no more than 0.005 percent of both sexes.

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:

• the environment of the computer or workstation itself
• the application background--the application window or the video screen.

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.

Environmental contrast

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.

Note: If you design for a dim background, keep in mind that some color-blind users, who have no trouble distinguishing red from green or red from orange in bright light, cannot distinguish between the two colors in dim light (Kunz 1987, 315).

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):

• Surfaces in the middle of the visual field (around C in Figure 4) should not have a brightness contrast of more than 1:3.
• Contrasts between the central and marginal areas (between A and B in Figure 4) should not exceed 1:10.
• The working area should be brighter in the middle and darker in the surrounding field.
• Excessive contrasts are more troublesome at the sides than at the top of the visual field.

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:

• Your eyes cannot focus clearly on blue, which is why it is such a good background color and such a bad foreground color.
• Nor can your eyes focus well on red, but red has the advantage (if you need it) of "moving forward" in the visual field.
• Yellow and green are just as visible in the periphery as they are as in the center of the visual field.
• Black and white are equally visible throughout the visual field (Horton 1991, 228).

Other interesting effects include (Horton 1991, 227-228):

• For most colors, hue seems to change as luminance increases or decreases. However, saturated blue, green, and yellow remain constant throughout the range of luminance. Use them when constancy is important.
• Staring at a large patch of a saturated color for a long time shifts color perception towards its complement. For example, when you look up after working on a bright red figure, everything will look greenish. Called the "McCullough effect."
• In bright light, red seems brighter than blue. In dim light, however, blue appears lighter but colorless, while red appears nearly black. In low-light situations, avoid reds. Called the "Purkinje effect."

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:

• Picking meaningful colors.
• Using pattern for meaning, color for reinforcement.
• Picking contrasting colors.

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:

• Green and orange - politically suggestive in Eire and Northern Ireland
• Red - suggests death in many African cultures
• Red, white, and blue - suggests colonialism in some countries
• White - suggests death or mourning in some Oriental cultures (Apple Computer 1992a, 219)

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:

1. Pick a program with a color or palette editor. Open the editor and either find or create a set of nine grays and one black separated by 10 percent differences in darkness. Use white for the background. The values for each gray are:

Gray	RGB Values	HSV Values	HEX Values
100% (black)	0,0,0	0, 0%, 0%	000000
90%	26, 26, 26	0, 0%, 10%	1A1A1A
80%	51, 51, 51	0, 0%, 20%	333333
70%	79, 79, 79	0, 0%, 30%	4F4F4F
60%	102, 102, 102	0, 0%, 40%	666666
50%	128, 128, 128	0, 0%, 50%	808080
40%	153, 153, 153	0, 0%, 60%	999999
30%	181, 181, 181	0, 0%, 70%	B5B5B5
20%	204, 204, 204	0, 0%, 80%	CCCCCC
10%	232, 232, 232	0, 0%, 90%	E8E8E8
0% (white)	255, 255, 255	0, 0%, 100%	FFFFFF

1. Draw a set of gray boxes on a white background, one color of gray per box, ranging from 10 percent to 100 percent (black).
2. Draw diamonds of all the colors you want to test.
3. Drag each color sample over the gray scale, squinting as you drag it. When the color and a gray box seem to match, you've found its gray-scale value.

1. Save the colors that are either 20 or 30 percent apart (separated by two or three boxes) and discard the rest.

Note: Some colors, because of their brightness, maintain high contrast no matter where you put them on the gray scale. However, check the size. Small areas of yellow disappear against white. Red, if used for something small (dots) or thin (lines), shrinks away to nothing against a dark background.

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).

I wanted to use beige, goldenrod, green, pink and blue based on what I had read in the research phase.