Connect with us

Hi, what are you looking for?




Many people use visual studio code with different themes, but not every theme is suitable for everyone, and changing things is one of the nice features of open source programs.

In this article, we will completely process the customization of themes that many people are curious about, and we will finish our theme visualization by creating a sample theme.

Creating Settings File

In Visual Studio Code, we use the settings file for customization. To open the settings file, you can open all properties with ctrl + shift + p and type Settings to open the file.

Customize Sidebar

It is important to keep all your codes in braces. We use the workbench.colorCustomizations mode to customize all parts.

   "sideBar.border": "#ffff",
   "sideBar.background": "#ffff",

You can do all sidebar customizations with the sidebar class. In this code, it is used to change the border and background color.

Customize Editor Window

You can edit the colors of all the units you edit in the editor with the “editor.tokenColorCustomizations” widget, for example, comment lines, strings, variables…

   "comments": "#00ff00",
   "strings": "#ff0000",
   "variables": "#00a2ff"

Customize Other Feature

You can customize all other features in the same way with a single block, if you use plugins such as tabnine, it will help you.

   // All Customize Code Here

The name of the window to be changed is entered and its properties are assigned the same way as before.

Remember to back up the settings file after customizing themes, paste the codes on a notepad, then save in json format so you don’t lose your theme features.

While editing the themes, you can choose the colors you choose, but try to choose the colors you use in the editor with vibrant colors. Dark colors make it difficult to work.

Click to comment

Leave a Reply

Your email address will not be published. Required fields are marked *

You May Also Like


This article is prepared to explain concepts that will be important for programming beginners such as data types, variables, heap and stack, and operators....


This article was created for those who want to use functional programming in their career or who are learning new programming paradigms. We will...


Functions are pieces of code that combine the integrity of the code used to perform a task into a single structure. If you are...


Computers can solve an event in different ways, we call these ways algorithms, each algorithm works differently from the others and has different processing...