This project was generated with
yo, following this article: https://css-tricks.com/creating-a-vs-code-theme/.
Open this folder in a new VS code window.
View > Run.
Click the ▶️ button up top. A new window will open. Select this theme in that window. (I recommend creating a deve version in
themes if you already have the extension installed)
Make a change, like changing
background to white.
themes/Themeless Colors-color-theme.json will reflect immediately in the other window on save.
demo folder contains good files for testing.
https://code.visualstudio.com/api/references/theme-color#side-barfor details on color edits, most edits will be made in
yarn deploy, respond to prompts, when asked for a PAT, just go here https://dev.azure.com/gusnordhielm/_usersSettings/tokens and make a new token.
Full instructions here: https://code.visualstudio.com/api/working-with-extensions/publishing-extension.
Yarn will complain about the package json's
engines field. If you remove that the theme will break.
seti-sources folder is unused right now, but contains all the mappings that generate the icons I use. One day it would be good to pull those mappings out and fully clone https://github.com/jesseweed/seti-ui.
What's in the folder
- This folder contains all of the files necessary for your color theme extension.
package.json - this is the manifest file that defines the location of the theme file and specifies the base theme of the theme.
themes/Themeless Colors-color-theme.json - the color theme definition file.
Get up and running straight away
F5 to open a new window with your extension loaded.
File > Preferences > Color Themes and pick your color theme.
- Open a file that has a language associated. The languages' configured grammar will tokenize the text and assign 'scopes' to the tokens. To examine these scopes, invoke the
Developer: Inspect Editor Tokens and Scopes command from the Command Palette (
Cmd+Shift+P on Mac).
- Changes to the theme file are automatically applied to the Extension Development Host window.
Adopt your theme to Visual Studio Code
- The token colorization is done based on standard TextMate themes. Colors are matched against one or more scopes.
To learn more about scopes and how they're used, check out the color theme documentation.
Install your extension
- To start using your extension with Visual Studio Code copy it into the
<user home>/.vscode/extensions folder and restart Code.
- To share your extension with the world, read on https://code.visualstudio.com/docs about publishing an extension.