Creating our own color theme in vscode

the dilemma

We've all been there. The need to please our eyes when you see a particular block of code. You like some nuances from a colour scheme and some things you just don't like at all. You like a colour scheme, use it for a while, but still there is that voice telling you that this can be better, your experience with writing code still needs improvement.

This led me to edit out some of the colors I just don't like in some of the color themes I was using. At first I was drawn to the simplicity of Predawn. but the oranges didn't work for me. The minimalistic choice of colors is fine, but not good enough for me. Then I found material darker with high contrast. but ugh the color palette is not minimalistic like predawn.
like the italics on the theme for comments is so icky. Talking about colour palettes I know a better dark palette waiting anyway. Nord. So one unproductive Saturday morning I forced myself to edit out the colour palette in settings(json).

workbench.colorCustomizations: {}

like the cursor colour, background, taking out the italics and stuff. Down the rabbit hole, I was reading on how to create your own color-scheme from an existing one.

The Material Themes darker high contrast theme looked like a starting path for me to start tweaking, since the UI indicators and separation of high contrast colors is good enough for me. enough of small talk let's get into the three easy steps of creating a color scheme

1. apply your own favourite color scheme by hitting

cmd+shift+p > Preferences: Color theme > <select the theme>

1. convert the existing theme to json format

cmd+shift+p > Developer: Generate Color theme from Current settings

this will create an untitled file with particular color palette and settings for every customisable UI element in vscode.

tweak the colors to your liking.

some of the tweaks I've made are

colors: {
// changed all blues to #5E81AC like
"activityBarBadge.background": "#5E81AC",
// main editor background
"editor.background": "#212121",
// current line number to be more focused
"editorLineNumber.activeForeground": "#eeffff",
// list explorer items
"list.highlightForeground": "#5E81AC",
// didn't like the terminal cursor colour
"terminalCursor.foreground": "#5E81AC",
}

• removed every unnecessary italics (like in comments)

1. convert the json to vscode color theme extension. for this step you'll npm

• install yo and code-generator

npm install -g yo generator-code

• run yo code and select color theme from list of options

• the prompt will ask you if you want to create color theme from an existing one or start afresh.
• select create a fresh color theme and give some name to it.
• now go to <theme-name>/themes/<theme-name>-color-theme.json and replace it with the untitled file you've edited before.

Now that your extension is ready, you may need to enable the theme and check it out.

• copy the entire folder <theme-name> to ~/.vscode/extensions/

cp -r <theme-name> ~/.vscode/extensions/

• restart the editor, and hit cmd+shift+p > Preferences: color theme > you'll see your <theme-name> there.

The comprehensive way to create an extension can be found here

check out my color theme at predusk

vinaybommana / predusk

predawn and material high contrast theme for vscode

I'll try to publish the extension in vscode marketplace in the future, for now the theme lives on at Github.

give a ❤️ if you like this article. let's discuss down below, which theme you are currently using ✨