Design - ajvondrak/vondark GitHub Wiki

I strived to use colors very consistently in the vondark color scheme. The Color Palette is composed of 6 shades of grey (5 of them achromatic) and 8 chromatic colors. The latter are devoted almost entirely to the syntax highlighting, while the UI elements are built primarily with the greys. This page discusses the guiding principles behind the ways these colors are applied.

Shades of grey

In particular, the greyscale has very little "wiggle room", so it must be used carefully to create the desired effects. I'm not a savvy designer, so the core colors are just a plain achromatic gradient forming 5 levels of darkness. The addition of the slate grey (Material Blue Grey) livens up the progression with an attention-grabbing variant.

Color Swatch
#cccccc #cccccc
#999999 #999999
#666666 #666666
#333333 #333333
#1a1a1a #1a1a1a
#8eacbb #8eacbb

As a dark color scheme, the darkest grey (#1a1a1a) is used as the background and the lightest grey (#cccccc) is used as the foreground. This is a natural choice, as straight white-on-black is generally regarded as too high-contrast for dark color schemes. The three intermediate greys then form the three basic levels of brightness for different text and UI pieces: dim (#999999), dimmer (#666666), and dimmest (#333333).

The dimmest grey is conceptually used for passive highlighting and inactive UI elements. Because its contrast against the background is so low (with a ratio of 1.38), it isn't used for any text. Rather, it's used as a background to:

  • accentuate text, as in the diff mode highlighting;
  • passively highlight text, as with the cursor line; or
  • render inactive UI components, as in the non-current status line.

The dimmer grey is conceptually used for either inactive text or active UI components. Its contrast against the background is fairly low, but still somewhat legible. (The ratio is 3.03, which technically passes the 3:1 requirement for WCAG 2.0 level AA at large fonts.) As a foreground, it's used for special text that shouldn't draw overt attention, such as line numbers. As a background, it's used for active UI components such as the current status line.

The least dim grey is reserved for comment syntax highlighting. It's legible (with a contrast ratio of 6.11), but still conveys a sense of inactivity.

Then that leaves the slate grey for active highlighting and text. As a foreground, it's used to color special text that still demands a little attention, such as the mode message. As a background, it's used to indicate a selection actively made by the user, as in visual mode or the popup menu.

Chromatic colors

The remaining colors are used chiefly for syntax highlighting, basically in a one-to-one mapping to the conventional group names.

Color Swatch Group
#ff1744 #ff1744 Error
#ff8a50 #ff8a50 Number
#ffc400 #ffc400 Constant, String
#80e27e #80e27e Type
#6ec6ff #6ec6ff Identifier
#2979ff #2979ff Statement
#9a67ea #9a67ea PreProc
#dc67ea #dc67ea Special

Some of the conventional groups are missing from the above:

  • Comment is highlighted in dim grey (#999999), as explained previously.
  • Underlined is highlighted as "active" special text in slate grey (#8eacbb), but also in bold.
  • Ignore is left the same as Normal.
  • Todo is the same as Normal but in bold.

The color mapping is essentially arbitrary, but deliberately simple. Depending on their syntax definitions, different languages will use more of some colors and less of others. The vondark scheme is not in the business of rewiring how a given language's syntax definition should be interpreted. Admittedly, it was designed with a strong bias towards the Ruby syntax highlighting, which makes fantastic use of the default groups.

The most noteworthy deviation from the simple one-to-one mapping is how the Constant highlighting gets broken up. There are several groups that link back to it by default, namely String, Character, Boolean, and Number (Float links to Number which links to Constant). The highlighting enumerated above distinguishes between constants (including booleans and characters), strings, and numbers (including floats). Yellow (#ffc400) is used to highlight basic constants, but strings are further accentuated with the passive grey background (#333333). Numbers are more orange (#ff8a50) - close to yellow, but still a visually distinct shade. This structure is borrowed heavily from inkpot, which I used for many years before making vondark. I find it has the benefit of breaking up the literals in your code for easy scanning, and in particular making strings stand out in useful ways. In Ruby, for instance, it's easy to see "holes" punched in a string via interpolation (which resets to the default background) and escape codes (which are highlighted as Special).

The chromatic colors also make measured appearances in a handful of other highlighting scenarios, such as incremental searches. But by and large they're reserved for the canonical syntax.