Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to change the gutter background colour in VS Code?

All the VS Code default themes (and any others that I've seen) have a uniform background color between the main view and the gutter. This makes it really hard to tell if you're at the start of a line (or to click there). Is the cursor at the start of the line here?

enter image description here

This is especially annoying with Python where indentation matters and you can't simply auto-indent a block once your indentation is messed up.

I often find myself pasting a block only to find that I was one space away from the start of the line and the pasted block therefore being offset.

Simply setting the gutter to a light grey background would fix this problem but looking at the default theme files I can't see any settings for the gutter. I've also looked at a theme from the store (Material) which has a few keys relating to gutter colours but changing them did not do anything.

Is there any way to modify the gutter background colour in VS Code?

Update: Version 1.8 of VS Code comes with a new setting to render the line highlight which can help with this when set to 'gutter':

enter image description here

enter image description here

like image 778
sas Avatar asked Dec 09 '16 07:12

sas


People also ask

How do I change the background color in Visual Studio?

Here's how to change it to a different color theme. On the menu bar, select Tools > Options. In the options list, select Environment > General. In the Color theme list, choose between the default Dark theme, the Blue theme, the Blue (Extra Contrast) theme, and the Light theme.

How do I customize VSCode color?

If you want to customize specific color or other stuff basing on a existing color theme, then open command palette > developer:generate color theme from current settings.

How do I add a custom background to VSCode?

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.


1 Answers

You can change the gutter's background color (or colour) in settings.json. This was added in May.

"workbench.colorCustomizations": {
    "editorGutter.background": "#000000" // your color here
}

or you can add

"editor.rulers": [ 0 ]

This won't change the background but it will add a line between the gutter and the editor.

like image 178
nick Avatar answered Nov 08 '22 18:11

nick