Base2Tone is twenty duotone colorschemes which by now are implemented in themes for many applications using templates which can work with the Base16-Builder CLI tool1.
Base2Tone is based on DuoTone themes by Simurai for Atom.
“DuoTone themes use only 2 hues (7 shades in total). 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.”
Read more about Base2Tone.
For VS Code both the dark and light templates were created from scratch, so themes come in a light and dark background variation. All colors from each theme comes from two base hues, enhancing the readability within a text-editor for there are less colors (for the eye and brain) to process.
Screenshot of Base2Tone_PoolDark in VSCode
Screenshot of Base2Tone_HeathLight in VSCode
links to screenshots
- Base2Tone_CaveDark
- Base2Tone_CaveLight
- Base2Tone_DesertDark
- Base2Tone_DesertLight
- Base2Tone_DrawbridgeDark
- Base2Tone_DrawbridgeLight
- Base2Tone_EarthDark
- Base2Tone_EarthLight
- Base2Tone_EveningDark
- Base2Tone_EveningLight
- Base2Tone_FieldDark
- Base2Tone_FieldLight
- Base2Tone_ForestDark
- Base2Tone_ForestLight
- Base2Tone_GardenDark
- Base2Tone_GardenLight
- Base2Tone_HeathDark
- Base2Tone_HeathLight
- Base2Tone_LakeDark
- Base2Tone_LakeLight
- Base2Tone_LavenderDark
- Base2Tone_LavenderLight
- Base2Tone_MallDark
- Base2Tone_MallLight
- Base2Tone_MeadowDark
- Base2Tone_MeadowLight
- Base2Tone_MorningDark
- Base2Tone_MorningLight
- Base2Tone_MotelDark
- Base2Tone_MotelLight
- Base2Tone_PoolDark
- Base2Tone_PoolLight
- Base2Tone_PorchDark
- Base2Tone_PorchLight
- Base2Tone_SeaDark
- Base2Tone_SeaLight
- Base2Tone_SpaceDark
- Base2Tone_SpaceLight
- Base2Tone_SuburbDark
- Base2Tone_SuburbLight
- Install Visual Studio Code
- Launch Visual Studio Code
- Choose Extensions from menu
- Search for
base2tone-vscode-themesby Atelierbram - Click Install to install it
- Click Reload to reload the Code
- From the menu bar click: Code > Preferences > Color Theme > Base2Tone_CaveDark or any of the other themes (use the arrow keys to preview)
Some additional tweaks can be made using the VSCode Custom CSS extension. This requires to have a CSS file on your computer that will hold your custom CSS. An example of some small tweaks I made are in the repo: base2tone-vscode-custom-css.css, so one can tweak those as well. Small things like the background color for the Panel title (down at the page, when activated - above the statusbar), and monochrome icons ISO colored ones, to make those icons less distracting.
Once done, open your command palette and select: enable custom CSS and JS
Run the command Reload Custom CSS and JS and the Custom CSS should be taking effect.
Note: Reloading custom CSS and JS after every VSCode update is a must!
1: If interested in the build process, please look inside the io.sh file and the db folder
2: One can disable the coloration of matching brackets in settings, because it doesn't fit these themes at all, ... looks terrible in my eyes. Note that these bracket colors are not from the theme files, and look the same across different themes. Not telling anyone what to do of course but just a heads up, see also this issue.
"editor.matchBrackets": "always",
"editor.bracketPairColorization.enabled": false,
"editor.language.colorizedBracketPairs": [["(", ")"]],