VSCode Color Theme (theme-vscode)

About

This is a codification of Microsoft Visual Studio's colors used for interface and syntax.

It was created using colors directly from Visual Studio Code, focusing on the various syntax highlight colors.

Currently, I consider this to be an incomplete draft as I'd like to do a little more digging to ensure there aren't colors I'm missing. Presently, some colors are not derived from VS or VSCode, but instead from approximation on what I feel fits the scheme.

What this isn't

This is not an attempt to export the syntax color scheme to other code editors, nor is it an attempt to claim the color scheme itself as my own. This is primarily intended for theming websites, applications, and GUIs in general to match VSCode.

Applications

Currently, I'm only providing a .scss file for use in SASS and a traspiled .css file from said .scss file. I'll be adding applications over time.

SASS

See 'vscode-theme.scss'.

• A color palette is provided for both light and dark modes.
  • $theme-vscode-dark-colors
  • $theme-vscode-light-colors
• The colors available in the palette; the range is 100-1000 and is an approximation of the 'Lightness' value of the hsl() color. e.g., map.get($theme-vscode-dark-colors, 'teal-800') will return a light teal -- this is one of the accent colors covered below. Colors available in both light and dark include:
  • blue
  • purple
  • teal
  • yellow
  • magenta
  • green
  • orange
  • red
  • grey (from pure black to pure wight -- the dark foreground (grey-800) and dark background (grey-100) are the only colors that deviate from the 10% steps)
• Accent colors are the colors that VSCode uses and are what I based the theme off of. For convenience, they are provided in a map of their own and contain 7 separate colors. The mappings match between light and dark for consistency. E.g., map.get($theme-vscode-dark-presets.accent-1) returns $theme-vscode-dark-colors.teal-800 in dark mode and `$theme-vscode-light-colors. The mappings are as follows:

Preset	Mode	Color
background	Dark	grey-100
foreground	Dark	grey-800
accent-1	Dark	teal-800
accent-2	Dark	purple-600
accent-3	Dark	green-500
accent-4	Dark	green-700
accent-5	Dark	yellow-800
accent-6	Dark	blue-600
accent-7	Dark	red-600
background	Light	grey-000
foreground	Light	grey-1000
accent-1	Light	blue-500
accent-2	Light	purple-400
accent-3	Light	green-300
accent-4	Light	teal-300
accent-5	Light	yellow-300
accent-6	Light	blue-200
accent-7	Light	red-400

CSS

• Transpiled from vscode-theme.scss via 'vscode-theme-css.scss'.
• Converts hsl() colors used for creation of theme colors to rgb() colors for legacy support purposes.

In the CSS version, every color is in a variable named accordingly to its mapping, e.g., var(--theme-vscode-dark-teal-800). Accent colors can be accessed using the number instead of a color, e.g., var(--theme-vscode-dark-1).

See vscode-theme.css