• Skip to main content
  • Skip to primary sidebar
  • Skip to footer
  • Phones
  • Media Players
  • Banking and Finance
  • Tips
  • Tutorials
  • Computer
AboutDevice Favicon

About Device

About Device Provides Specification, Review, Comparison, Features, Price of Phones and Computers, How To, General Computer Problem Tutorials, Solution, Education, Tips and Tricks with Videos and Images for faster understanding

You are here: Home / Tutorials / How to Change the Look and Feel of VS Code

How to Change the Look and Feel of VS Code

How to Change the Look and Feel of VS Code

If you’re a programmer or software engineer, there’s a great possibility that you’re using a code editor. Code editors are the workspace software engineers spend most of their time on writing and debugging codes. There are a variety of them like Sublime, VS Code and others.

Code editors mostly have their default interface as dark and the reason is not far-fetched. As a programmer, you will be spending most of your time in front of the screen and a bright screen can lead to fatigue of the eyes. But what of if you want to change the default them and make things look you way, well this guide is for you. Here, we give a guide on how to Change the Theme on VS Code

Quick Navigation

  • How to Change Theme in VS Code
  • How to Change Material Theme in VS Code
  • Customize a Theme in VS Code Manually
      • Method 1 – Customise by Installing a Custom Theme
      • Method 2 – Customise by Editing the Theme
  • Rounding Up…

How to Change Theme in VS Code

It is easy to change the global theme in VS Code. Here’s how to do that:

1. Launch VS Code and navigate to Code. From there select Preferences.

2. Under Preferences, select Color Theme. You’ll Now see a couple of pre-installed theme

Navigate to Code > Preferences > Color Theme; Source: alphr.com
Navigate to Code > Preferences > Color Theme; Source: alphr.com

3. You can preview how each them will look on the interface.

4. Hit Enter to choose your most preferred theme

Change Theme; Source: alphr.com
Change Theme; Source: alphr.com

How to Change Material Theme in VS Code

One of the advantages of using VS Code is that it can easily be customised and one of its customisation option is Material Theme.

You get added advantage over pre-installed themes with Material theme. Here’s how to tweak Material theme to look the way you want.

1. Press Ctrl (or Cmd) + Shift + P to launch the Quick menu. Next, type “theme” in the window that comes up.

Type "theme"; Source: alphr.com
Type “theme”; Source: alphr.com

2. Select Preferences: Color Theme.

Select Preferences: Color Theme; Source: alphr.com
Select Preferences: Color Theme; Source: alphr.com

3. Next, choose one of the themes from Material Theme.

The accent color can set your VsCode interface apart especially if you are debugging. Here’s how to set an accent color.

1. Launch the Quick menu by pressing Press Ctrl (or Cmd) + Shift + P

2. When the window comes up, type material them in it and choose Material Theme: Set Accent Color.

Pick any color you want.

Customize a Theme in VS Code Manually

VSCode was built to allow customization so that you can make it look like the way you want. Do the following to customise the theme:

Method 1 – Customise by Installing a Custom Theme

VS Code comes with a broad array of extensions that will help to change the look and feel of your VS Code interface. These extensions will help with customisation. Here’s how to download a theme:

1. Open the VS Code Marketplace and navigate to the Extensions menu. You’ll see this at the left side of the screen.

Open the Extensions menu; Source: alphr.com
Open the Extensions menu; Source: alphr.com

2. Search for a theme extension in the search bar by typing in “theme”.

3. Next, download the extension and then install it. To install it navigate to Extensions > ellipsis icon > Install from VSIX.

4. Another way to install the theme is by locating the theme you prefer in VS Code. When you’ve been able to find it, simply click the Install button on the right menu.

Select Install; Source: alphr.com
Select Install; Source: alphr.com
Method 2 – Customise by Editing the Theme

You can make changes on the theme file to customise your theme. Here’s how to access the settings and adjust things.

1. Open a new workbench or user settings file. Workbench will let you change the look and feel on the project you’re currently working on. The user settings file will reflect in any new project.

2. Enter Preferences: Open Settings command in the main menu and select between user and workbench settings in the tab at the top.

Select Workbench; Source: alphr.com
Select Workbench; Source: alphr.com

3. Click Edit in Settings.json to be able to edit settings in the file.

Click Edit in Settings.json; Source: alphr.com
Click Edit in Settings.json; Source: alphr.com

4. Locate the settings with name “workbench.colorCustomizations.”

2. Edit the Theme name in the following code without altering the punctuations

“[Theme_name]”: { }

If you want to make any other changes, do so in the new brackets. Simply include the parameters you want to change within the quotes and after that, put a colon (:) ,then choose the settings you want.

You can use this syntax to change various UI elements such as backgrounds, terminal appearance, base theme color, button colors, and font styles.

Rounding Up…

As a result of you being used to VS Code, you will want to furnish it to your taste, change the colours here and there, make it have your personal feel and maybe change its overall look. Whatever you want, VS Code is very customisable and we gave you steps on how to customise it. If you found this helpful, leave a comment and don’t forget to share.

You can also check out

How To Edit A Zoom Recording
How to Change your Background in Zoom
How to Change Your Name in Zoom Before a Meeting
How to Change Your Name in Zoom During a Meeting
How to Add Photos on TikTok
How to Know Those That Viewed Your Profile on TikTok
TikTok: How To Edit A Video Caption After Posting
How to Check NIN on MTN, Glo, Airtel and 9mobile
DStv Subscription Package, Prices with Channels
Startimes Subscription Package, Prices, And Channel List For Each Plan
GOtv Subscription Package GOtv Max, Jolli, Jinja and Lite Channel List and Price
GOtv Assigned Channel Number with Channel
GoTV Customer Service Contact, Social Media Handle & Email Address
StarTimes Customer Care Contact, Social Media Handle & Email Address
Top 5 Best Web Browsers for Android
Top 5 Best Music Player Apps for Android
Top 5 Best Alarm Clock Apps for Android
Top 5 Best eBook Reader Apps for iPhone and iPad
Top 4 Best VPN Apps for iPhone and iPad
Top 5 Best Apps for Monitoring Data on iPhone and iPad
Top 5 Best Translation Apps for iPhone and iPad
Top 5 Best Alarm Apps for iPhone and iPad
Top 5 Best Calendar Apps for iPhone and iPad
Top 5 Best Photo Editing Apps for iPhone and iPad

Hope with this, you have learnt How to Change the Look and Feel of VS Code.

Please share and like below, also comment below for any problem faced or encountered.

Related Posts:

  • How to Change Icon Look in Windows 10
    How to Change Icon Look in Windows 10
  • Polaris Bank Transfer Code
    Polaris Bank Transfer Code
  • Polaris Bank USSD Code (*833#) transaction
    Polaris Bank USSD Code (*833#) transaction
  • UBA USSD Code (*919#) Transaction
    UBA USSD Code (*919#) Transaction
  • Ecobank USSD Code (*326#) Transaction
    Ecobank USSD Code (*326#) Transaction
  • Zenith Bank USSD Code (*966#) Transaction
    Zenith Bank USSD Code (*966#) Transaction

Filed Under: Tutorials

Reader Interactions

Leave a Reply Cancel reply

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

Primary Sidebar

BrandsView All

  • Samsung
  • Xiaomi
  • Vivo
  • Realme
  • Huawei
  • Oppo
  • Motorola
  • Tecno
  • LG
  • Honor
  • Nokia
  • Apple
  • ZTE
  • Infinix
  • Sony
  • HTC
  • OnePlus
  • Lenovo
  • Ulefone
  • BLU
  • Gionee
  • iTel
  • Google
  • Asus
  • Alcatel
  • TCL
  • Meizu
  • Umidigi
  • Oukitel
  • Cubot
  • Wiko
  • Elephone
  • Leagoo
  • Mobicel
  • Condor
  • NUU Mobile
  • Micromax
  • Sharp
  • Olla
  • Blackview
  • HP
  • Dell
  • Canon
  • Nikon
  • Panasonic
  • Microsoft
  • QMobile
Show More Brands

New Arrivals

  • Realme GT Neo Realme GT Neo $400.00 $400.00
  • Realme X7 Pro Ultra Realme X7 Pro Ultra $550.00 $440.00
  • Tecno Spark 7 Tecno Spark 7 $140.00 $140.00
  • Nokia C10 Nokia C10 $60.00 $60.00
  • Nokia C20 Nokia C20 $80.00 $80.00
  • Nokia G10 Nokia G10 $150.00 $150.00

Footer

About AboutDevice

About Device Provides Specification, Review, Comparison, Features, Price of Phones and Computers, How To, General Computer Problem Tutorials, Solution, Education, Banking and Finance Tips and Tricks with Videos and Images for faster understanding

Disclaimer

Please This is Not Bank Website, This is a Blog and we provide reply based on our knowledge.Please any information shared is at Your Risk.
Checkout Full Disclaimer

Pages

  • About US
  • Contact Page
  • Disclaimer
  • Privacy Policy

Copyright © 2021