Visual Studio Code has this in-built color theme called Quiet Light which I absolutely love, as I prefer using mostly light themes when coding in the day, when my room is filled with light.
Yesterday after a long long time I was coding in darkness and wanted to switch to a dark theme. I don't remember, in the past which themes I have mostly used for Dark Mode, and I was really yearning for a theme that would be similar to Quiet Light in terms of the color palette. While I did find this one extension claiming to implement dark version of Quiet Light, it didn't actually quite live up to the expectation.
As usually happens during such yak shaving sessions, I started off with trying to edit that theme's json file, and finally ended up considering publishing my own theme to the VS Code Marketplace. So here are the steps to make your own theme and publish them.
Create a VS Code Extension Package
VS Code team have made a yeoman generator for creating VS Code extensions. Start from there.
❯ npm install -g yo generator-code
❯ yo code
This is what the structure of the newly created project look like
.
├── CHANGELOG.md
├── LICENSE.md
├── README.md
├── icon.png # add an icon for marketplace listing
├── package.json
├── quieter-dark-color-theme-0.0.1.vsix
├── screenshot.png # add a screenshot for marketplace
├── themes
│ └── Quieter Dark-color-theme.json
└── vsc-extension-quickstart.md
Make sure the theme file ends with
-color-theme.jsonand then VS Code will give you code completion help when editing it.
There are two main things inside a theme, colors and tokenColors
colors define background, foreground colors for elements of the UI of VS Code itself, including sidebars, status bars, editor panes, tooltips etc
tokenColors define syntax highlighting, like classes, functions, keywords etc.
Once you have created the theme as per your liking, you can move it (or symlink it) into ~/.vscode/extensions/ to have it installed to your local IDE and try it out. Once you are satisfied, you can move on to publishing it.
You'll find more detailed documentation on creating color themes in the official docs
https://code.visualstudio.com/api/extension-guides/color-them
Publishing a Visual Studio Code Color Theme to the Marketplace
Before we go to the further steps, keep vsce (the VS Code Extension manager CLI) installed.
npm install -g @vscode/vsce
Before you can publish, you need to ensure a few steps.
Create a Azure Devops organisation if you do not have one. (Go here)
Get a Personal Access Token inside that organisation. This PAT must have
Marketplace > Managescope in it.
Save this personal access token somewhere. I prefer having it saved in my
~/.profilefile asVSC_MARKET_PAT=xxxxxxxxxso I can use the env variable$VSC_MARKET_PATwherever I need it.Create a VS Code Marketplace publisher. Note this is important to remember what publisher name you make here as you need to add it to your package.json too. (Go here to make this)
Check that the publisher you made is working by doing
vsce login <publisher name>in your terminal, and making sure the login works.
Make sure you add a name and a publisher to your package.json before proceeding.
To publish your extension run
vsce publish
You can also specify a version of your extension, when making changes and updating it
vsce publish 0.0.1
# or
vsce publish minor # 0.1.0 increment
# or
vsce publish major # 1.0.0 increment
You'll get more detailed information including how to disable your extension or deprecate it, and get analytics data of it in the official docs
https://code.visualstudio.com/api/working-with-extensions/publishing-extension
Links and References
https://github.com/championswimmer/vscode-theme-quieter-dark
source code of the extension I madehttps://marketplace.visualstudio.com/items?itemName=championswimmer.quieter-dark-color-theme
published link of the extension