Are you unsatisfied with your favorite vscode theme just because of how a certain UI looks? I was in the same situation. Sometimes I want to increase the contrast between text and the background.
In this article, I will show you how to customize every element of your vscode window without writing any advance code.
What we will do is, we will install and hack a vscode extension called Window Colors.
Extension Url: https://marketplace.visualstudio.com/items?itemName=stuart.unique-window-colors
The main purpose of this extension (i guess) is to assign a unique color for each window so that you can identify each of them when alt-tabbing and it works really great.
Upon installation, this extension will create .vscode folder in your project root, and inside that folder, it creates the settings.json file. You could commit this file or not that's upon your wish. My suggestion is to ignore .vscode folder in the global gitignore file.
Now let's dive into the settings.json inside the newly created .vscode folder.
You will see a json like below
"workbench.colorCustomizations": {
"activityBar.background": "#13332E",
"titleBar.activeBackground": "#19423B",
"titleBar.activeForeground": "#F6FBFB"
}
Now go to https://code.visualstudio.com/api/references/theme-color and try any of the customizable property listed in this page. You will see tons of property that you can just add into this json.
For example, to change the editor background, I just add "editor.background": "#020531".
To change the sidebar background, again I just add "sideBar.background": "#3d003f".
That's simple right. That's all that I can share for now.
Have a great day.
Top comments (1)
Clearly I've never had an original idea in my life, because this was exactly what I wanted. Thank you!