Skip to content
Duotone themes for VS Code
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.vscode
db
themes
.gitignore
.vscodeignore
CHANGELOG.md
LICENSE
README.md
base2tone-vscode-custom-css.css
icon.png
io.sh
package.json

README.md

Base2Tone Themes for VS Code

Base2Tone is thirteen 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_PoolDark in VSCode

Screenshot of Base2Tone_HeathLight in VSCode

Screenshot of Base2Tone_HeathLight in VSCode

Screenshots

links to screenshots

Installation

  1. Install Visual Studio Code
  2. Launch Visual Studio Code
  3. Choose Extensions from menu
  4. Search for base2tone-vscode-themes by Atelierbram
  5. Click Install to install it
  6. Click Reload to reload the Code
  7. From the menu bar click: Code > Preferences > Color Theme > Base2Tone_CaveDark or any of the other themes (use the arrow keys to preview)

Tweaks

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!

Notes

1: If interested in the build process, please look inside the io.sh file and the db folder

You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.