Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

VSCode customize window border

I'd like to add a subtle border around VSCode so multiple open windows don't blend together.

I've looked through the Theme Color API Reference but didn't spot any relevant setting: https://code.visualstudio.com/api/references/theme-color

I'm using the Material Theme and would like to add a border, something like this

    "workbench.colorCustomizations": {
        "[Material Theme Darker]": {
            // These settings work:
            "editor.foreground": "#f1f1f1", // regular text color
            // "editor.background": "#ff0000"
            // "sideBar.background": "#ff0000",

            //I'd like something like this, but it DOESN'T WORK:
            "window.border": "#444444"
        }
    },

I would like for each VSCode window to have a border of 1 pixel, so that when two windows overlap they're not blending together.

For example, here is one VSCode window on top of another, but it's hard to tell where one ends and the other begins:

Screenshot

like image 396
Alex F Avatar asked Oct 17 '19 16:10

Alex F


People also ask

How can I change the color of my status bar in VS Code?

Press Control + Shift + P when you just open Visual Studio Code and type "open settings(UI)" and search for window. titleBarStyle and change the option from native to custom so that you can restore the colour of status bar from white to black.


1 Answers

VS Code 1.40 adds two new theme colors for this:

  • window.activeBorder — When the window is active
  • window.inactiveBorder — When the window is inactive
  "workbench.colorCustomizations": {
        "[Material Theme Darker]": {

            "window.activeBorder": "#444444"
        }
    }
like image 56
Matt Bierner Avatar answered Sep 18 '22 15:09

Matt Bierner