Visual Studio Code UI is visually mismatched in Ubuntu 19.10

The VS Code UI has been changed in 19.10 and it's not good as it was in 19.04 and earlier. The menu bar in VS Code deviates from the Ubuntu 19.10 system theme, and it has a disconcerting white background instead of being dark. The VS Code UI also deviates from the default system theme in a few other minor ways. This mismatched UI is annoying to someone who uses Visual Studio Code on a daily basis, and it's no longer possible to save slick looking screenshots of my code.

Is there any way to get a decent looking UI back in Visual Studio Code?

Solution 1:

Open your settings.json and add the following:

{
...
    "window.titleBarStyle": "custom",
...
}

VS-Code will then prompt for a restart of the application. With GruvBox theme this was the result:

Solution 2:

Open Settings and search for Title Bar Style. Changing that option to custom could possibly fix this issue.

Solution 3:

To install the Visual Studio Code snap package in all currently supported versions of Ubuntu open the terminal and type:

sudo snap install code --classic  

or search for Visual Studio Code in the Ubuntu Software app.

In your screenshot I noticed that the terminal pane isn't open at the bottom of Visual Studio Code. Because Visual Studio Code can run code of many programming languages, I keep the terminal pane open all the time. To open the terminal pane from the Visual Studio Code menu select Terminal → New Terminal.

Explorer pane:

VS Code menu bar + breadcrumb navigation bar looks like the default Ubuntu Ambiance theme, which is not surprising because Visual Studio Code is packaged as an app in Ubuntu Software.