This is a preview that leverages the new VS Code theming options in v1.12.
The Problem
The Solution
What if all you needed to do to generate a theme was specify a few colors and everything else was handled for you? Well that's what this module aims to accomplish. All you need to do is specify a set of "base colors" (background, foreground and 4 accent colors) and you have a reasonably good looking theme.
All other VS Code theme colors are then derived from those base colors, with the option to tweak each underlying color as well.
This is all that's needed to generate a great looking theme:
import { generateTheme, IColorSet } from 'vscode-theme-generator';
const colorSet: IColorSet = {
base: {
background: '#12171F',
foreground: '#EFEFEF',
color1: '#399EF4',
color2: '#DA6771',
color3: '#4EB071',
color4: '#FFF099',
}
};
generateTheme('My Theme', colorSet, path.join(__dirname, 'theme.json'));
There's a quick start repository that allows you to get started quickly, just clone and run!
git clone https://github.com/Tyriar/vscode-theme-generator-quick-start
cd vscode-theme-generator-quick-start
npm install
Make your changes to the colors in index.ts and hit F5 to build the theme and launch a new VS Code window with your theme available in the command palette (ctrl
/cmd+shift+p
> "Color Theme").
In addition to the base
colors, IColorSet
provides more options for syntax
, ui
, and terminal
. There is also an overrides
property, which allows you to set any color key from the Theme Color Reference directly.
Since the theme is defined in TypeScript, you can create an object to give names to colors you want to re-use.
import { generateTheme, IColorSet } from 'vscode-theme-generator';
const colors = {
red: '#DA6771',
green: '#4EB071',
yellow: '#FFF099',
blue: '#399EF4',
blueLight: '#9FCFF9'
}
const colorSet: IColorSet = {
base: {
background: '#12171F',
foreground: '#EFEFEF',
color1: colors.blue,
color2: colors.red,
color3: colors.green,
color4: colors.yellow
},
syntax: {
identifier: colors.blueLight,
string: colors.red
},
ui: {
cursor: '#FFFFFF'
},
terminal: {
blue: colors.blue,
brightBlue: colors.blueLight
},
overrides: {
'editorGutter.modifiedBackground': colors.green,
'editorGutter.addedBackground': colors.blue,
'editorGutter.deletedBackground': colors.red
}
};
generateTheme('My Theme', colorSet, path.join(__dirname, 'theme.json'));
The syntax
properties present a simplified set of token types. If not set, these will be derived from the base colors:
color1
determines boolean
, identifier
, keyword
, storage
, and cssClass
color2
determines string
, stringEscape
, and cssId
color3
determines function
, class
, classMember
, type
, and cssTag
color4
determines functionCall
and number
By default, comment
is derived from the background
color, and modifier
and markdownQuote
are not set.
The ui
properties allow you to set colors for various highlights and a few other things:
cursor
: the cursor colorinvisibles
: used for visible whitespace (see the editor.renderWhitespace
VS Code setting)guide
: indentation guidelines in the editor panelineHighlight
: colors the line your cursor is on, in place of the boundary linesfindMatchHighlight
and currentFindMatchHighlight
: highlights matches from the find widgetfindRangeHighlight
: highlights the selected area for "find in selection"rangeHighlight
: background for a selected range of linesselection
: highlights text selected with the cursorselectionHighlight
: highlights text which matches the selected textwordHighlight
: when the cursor is on a symbol, highlights places that symbol is readwordHighlightStrong
: when the cursor is on a symbol, highlights places that symbol is writtenactiveLinkForeground
: color of hyperlinks when clickedBy default, invisibles
and guide
are derived from the background
color, and the rest are not set.
The terminal
properties include each of the standard 16 ANSI colors (black
, red
, green
, yellow
, blue
, magenta
, cyan
, and white
, plus their "bright" counterparts). To set the background color, add the terminal.background
key under overrides
.
Support below means that the standard VS Code grammar has explicit support for the languages, ie. the colors should match their meanings. Other languages will probably still look alright but there is no guarantee that they will.
Below are several of the bigger planned items, community feedback is welcome :smiley:
npm run watch
Then in VS Code press F5 to build demo and launch the debugger with the generated themes available to switch to.