CODEWITHSUNDEEP
visual-studio-code
Alex F
Alex F

Reputation: 955

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

Upvotes: 25

Views: 18963

Answers (4)

Kyle Thomas
Kyle Thomas

Reputation: 31

Add "window.titleBarStyle": "native" to the top-level of vscode's settings.json to get the border and titlebar rendered by Windows.

This is my experience after reading others' links. My system specs:

Version: 1.92.0-insider (user setup)

Commit: a35380d6f0ff65f7c35345baafcf1c3f8a378d38

Date: 2024-07-12T05:08:08.550Z

Electron: 30.1.2

ElectronBuildId: 9759760

Chromium: 124.0.6367.243

Node.js: 20.14.0

V8: 12.4.254.20-electron.0

OS: Windows_NT x64 10.0.22631

Upvotes: 0

darren
darren

Reputation: 5694

Since the answer posted works only on MacOS and Linux, i post a solution for windows here:

go to settings:

set window.titleBarStyle == native

Window: Title Bar Style - Adjust the appearance of the window title bar to be native by the OS or custom. On Linux and Windows, this setting also affects the application and context menu appearances. Changes require a full restart to apply.

enter image description here

Upvotes: 5

Loophole
Loophole

Reputation: 403

Sadly this is no longer possible. Support for window.activeBorder and window.InactiveBorder has been officially widthdrawn, as of Visual Studio Code 1.71.x

See https://github.com/microsoft/vscode/issues/160159

Upvotes: 9

Matt Bierner
Matt Bierner

Reputation: 65223

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

Upvotes: 20

Related Questions