How to change VSCode background

As a Python developer myself, I work with VSCode almost everyday. Although the interface is well designed, it lacks personality. Having an image background in VSCode feels like a nice idea, which can reduce the boring out of a plain source editor.

Lately I've been looking for background image/color theme combinations. This article will show you how to change VSCode background to make the code editor more pleasing to the eyes.

VSCode background

Change VSCode background using extension

There are several extensions that enables changing VSCode background, the most popular one is background by shalldie.

The extension works by modifying VSCode CSS file vscode_style.css that is responsible for styling its interface. This is by far the easiest way to customize VSCode UI elements.

The first thing you need to do is search for background by shalldie extension from VSCode Marketplace. If you didn't know how to do so, see our guide on install extensions in VSCode.

image-20211012162120190

Then, go to File -> Preferences -> Settings to open the settings view. Alternatively, fire up Command Palette and search for Settings (JSON). Add these lines into the settings file.

You can either fetch the background from a URL or use a local file. Remember to replace the background.customImages with your desired path/URL to background image file.

    "background.enabled": true,
    "background.loop": false,
    "background.useDefault": false,
    "background.useFront": false,
    "background.style": {
          "content": "''",
          "pointer-events": "none",
          "position": "absolute",
          "z-index": "99999",
          "width": "100%",
          "height": "100%",
          "background-size": "cover",
          "background-repeat": "no-repeat",
          "opacity": 0.1
      },
    "background.customImages": [
          "https://cdn.wallpapersafari.com/5/23/AMbq2m.jpg",  //REPLACE THIS
          "/home/nl/Downloads/wallhaven-8ok7vk.jpg",          //REPLACE THIS
      ]

Linux users would have to get permissions to modify VSCode executable file before the changes can take effect. In order to do that, run these two commands in any terminal emulator. Remember to replace your_username with your actual username.

sudo chown <your_username> /usr/share/code -R
chmod ugo+rwx /usr/share/code

In Mac, you have to move vscode from Download to Applications before the changes can take effect.

You will see a warning that notifies you about the changes that you've just made to the internal parts of VS Code, you can click the gear icon and select Don't Show Again to make it disappear.

image-20211012165019930

The background can be further configured by modifying background.style in the settings as it holds all the CSS properties. The result may look like this.

image-20211013095513594

Change VSCode background using transparency

Alternatively, one do not want to mess with VSCode internal parts just to make it look good can achieve the same result by making the windows transparent. In this case, you will see the wallpaper behind, as well as other application under the active one.

The first thing you need to do is search for GlassIt Linux by nowsci extension from VSCode Marketplace. If you didn't know how to do so, see our guide on install extensions in VSCode.

image-20211013102222446

In order for GlassIt Linux to work properly, you have to ensure wmctrl (to get the window ID), xprop (to set transparency), and bash (to run the transparency commands) are installed on your system. Most of these come as part of the default packages, but if they're not, you can run this command to install them all.

sudo apt install -y wmctrl x11-utils bash

The end result may look something like this

image-20211013102831062

Users can change the opacity of the window by going to File -> Preferences -> Settings to open the settings view and look for Glassit-linux: Opacity. Alternatively, fire up Command Palette and search for Settings (UI). A VSCode restart is required for any changes to take effect.

We hope that this article helped you learn how to change VSCode background to build up a better programming workflow. You may also want to see our guide on Spell Check Extensions for VSCode or how to integrate ZSH terminal to VSCode.

Click to rate this post!
[Total: 9 Average: 4.9]

Leave a Comment