2 base hues – 32 color values > 1 theme

Applications

Dedicated repositories for generating syntax-highlighting themes:

For Visual Studio Code Marketplace: marketplace.visualstudio.com/items?itemName=Atelierbram.base2tone-vscode-themes

Base2Tone colorschemes are created from two base hues, into (32) values with different saturation and lightness levels. Base2Tone is based on DuoTone themes by Simurai for Atom:

… It tones down less important parts (like punctuation and brackets) and highlights only the important ones. This leads to a more calm color scheme, but still lets you find the stuff you’re looking for.

Dependencies

Colorschemes are generated with the help of Base16 Builder

An example command to generate a scss Sass file for Prism, from the template for prism-scss in the "Evening" colorscheme:

$ base16-builder --scheme db/schemes/base2tone-evening.yml --template db/templates/scss-prism/prism.scss.ejs > output/prism/_prism-base2tone-evening.scss

Some customized commands from the latest fork of Base16 Builder can be found here in executable bash scripts (cli/io.sh). Read more on this versatile and flexible CLI building tool on the Github repo for Base16 Builder, and the many ways to use it from the command-line.

Installation

Base16 Builder is available on NPM[1], you can install it on your machine like so from the commandline:

$ npm install --global base16-builder

1. Installing from NPM means you will also need to have Node.js installed; instructions can be found here.

Base2Tone Color Schemes

Code Syntax Highlighting

dark variation – space

/* comment */
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}
mark {
  background: #ff0;
  color: #000;
}
small {
  font-size: 80% !important;
}

light variation – space

/* comment */
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}
mark {
  background: #ff0;
  color: #000;
}
small {
  font-size: 80% !important;
}

Templates for illustrations

download vector image

Designed by Freepik

Color Hex Values Table

ABCD
0#24242e#5151e6#7b736f#b25424
1#333342#6363ee#8e8580#cb5c25
2#515167#7676f4#a09792#dd672c
3#5b5b76#767693#b1a9a5#e66e33
4#737391#8a8aad#c3bbb7#ec7336
5#8a8aa3#aaaaca#d8cfcb#f37b3f
6#a1a1b5#cecee3#eae4e1#f88349
7#b8b8c7#ebebff#fbf9f9#fe8c52