Atelier Themes for VS Code

Atelier Schemes are ten colorschemes which by now are implemented in many applications using templates which can work with the Base16-Builder CLI tool¹. For VS Code both the dark and light templates were created from scratch, making each theme come in a light and dark background variation. Time and effort was spend to make different markup and programming languages become more readable with these themes in Visual Studio Code. Read more about Atelier Schemes.

Screenshot of Atelier_SulpurpoolDark in VSCode

Screenshot of Atelier_SulpurpoolLight in VSCode

Screenshots

Installation

1. Install Visual Studio Code
2. Launch Visual Studio Code
3. Choose Extensions from menu
4. Search for atelier-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 > Atelier_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: atelier-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 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": [["(", ")"]],