Creating our own color theme in vscode
Tags: vscode
Published: 2021-05-24 23:21:23

# 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](https://github.com/jamiewilson/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](https://marketplace.visualstudio.com/items?itemName=CrazyFluff.bettermaterialthemedarkerhighcontrast). 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](https://www.nordtheme.com). So one unproductive Saturday morning I forced myself to edit out the colour palette in settings(json).

![Nord Palette](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/46dl6gqnlqyrwj5giypl.png)

![Nord Palette](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sz7p0b3if3dro0ckjt9w.png)

```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>
```
2. 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
```bash
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)

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

* install yo and code-generator

```bash
npm install -g yo generator-code
```
* run `yo code` and select color theme from list of options

![yo code options](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xsbjlzzw878qmzr2ezo8.png)
* the prompt will ask you if you want to create color theme from an existing one or start afresh.
![afresh](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ie0j8je4zumtg2isbfyv.png)
* 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/`

```bash
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](https://code.visualstudio.com/api/get-started/your-first-extension)

check out my color theme at [predusk](https://github.com/vinaybommana/predusk)
{% github vinaybommana/predusk no-readme %}

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 ✨