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.
"workbench.colorCustomizations":
{
"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…
"editor.tokenColorCustomizations":
{
"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.
"workbench.colorCustomizations":
{
// 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.