Back to Top

VS Code Customize Workbench Colors

Updated 1 April 2021

In this block, we will learn how to change the color combination of VS code theme. It’s sometimes we chose a theme but we are not satisfied with the few colors, there you want to customize the color combination.

Download Theme

Download any of your favorite theme, or you can use your existing theme. I chose Dracula. Now open your workspace settings. Use the following VS Code menu command:

  • On Windows/Linux – File > Preferences > Settings
  • On macOS – Code > Preferences > Settings

Edit Setting.json

Now search settings.json file in Search Bar.

settings.json_

Open Settings.json file and add workbench.colorCustomizations to customize colors for example, To change Editor background Color Simply add editor.background”: “#090909“.

editor-bg

This will change the editor Background color to #090909 . Similarly you can customize other settings also. These are few customize settings of workbench.

Start your headless eCommerce
now.
Find out More
linenumbers

After adding these changes you can view the result on your VS code Workbench. Like we have added Active File background color to #007acc and line numbers to #5aec16.

sidebar-1

For more Information you can visit https://code.visualstudio.com/api/references/theme-color

Support

Still have any issue feel free to add a ticket and let us know your views to make the code better https://webkul.uvdesk.com/en/customer/create-ticket/

Thanks for Your Time! Have a Good Day!

. . .

Leave a Comment

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


Be the first to comment.

Back to Top

Message Sent!

If you have more details or questions, you can reply to the received confirmation email.

Back to Home

VS Code Customize Workbench Colors