Search code examples
visual-studio-code

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


Solution

  • 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"
            }
        }