DEPRECATED

This extension doesn't work any more on recent versions of gnome-shell/mutter. The property that was used to force the title bar color scheme was removed.

Ok so I think this is a consequence of https://gitlab.gnome.org/GNOME/mutter/-/merge_requests/2175. Mutter/GNOME Shell changed the way they draw window borders for X11 windows that don't draw their own window borders. There's a followup MR that has a comment mentioning that the _GTK_THEME_VARIANT property doesn't work any more.

issue

This change makes it likely impossible to implement this feature using an extension, without changes to either gnome-shell or VSCode itself.

Match the GNOME title bar to your VS Code theme

Visual Studio Marketplace
Open VSX Registry

This extension for Visual Studio Code can set the dark GTK theme variant for your VS Code windows. When using a dark editor theme, this leads to a more attractive UI on systems that select the title bar colour based on the application GTK theme, most commonly GNOME. For best results, you should also turn off the (unthemable) menu bar using the window.menuBarVisibility setting.

This extension does not work on Windows or Mac.

This extension does not work with Wayland builds of VS Code (see below).

By default, whether to use the light or dark theme variant is determined automatically from the editor theme. When changing the editor theme, the title bar is also changed to match the theme (light or dark). The information on whether a given theme is light or dark is pulled directly from the theme definition giving it a high level of accuracy.

This extension is heavily based on the GTKDarkThemeVariantSetter plugin for Sublime Text. The magic juice to make this feature work was adapted from there.

Configuration

The theme variant can also be overridden using the gtkTitleBar.mode setting. Setting it to either light or dark fixes the title bar regardless of the selected editor theme. Setting it to auto selects the variant based on the editor theme as described above. This is the default.

Any changes to either this setting or when changing the editor theme take effect immediately. Note however that when launching VS Code or opening a new window, it will take a few seconds for the title bar setting to be applied. This is due to VS Code's delayed extension loading.

(Lack of) Wayland Support

This extension does work when running on the Wayland display server so long as the VS Code window is still an X11 window. However, it does not work when the VS Code window is a native Wayland window. In that case, the extension will show an error like unable to open display ''.

Currently (November 2022), the official VS Code builds still use X11 by default. However, VSCodium on Flathub uses native Wayland windows.

Unfortunately, there doesn't seem to be a Wayland equivalent to the per-window dark mode configuration toggle that GTK has for X11 windows. I wasn't able to come up with an alternative way to set the theme or theme variant from the outside. Possible workarounds include:

• Setting the environment variable GTK_THEME to the dark variant of your theme, e.g. GTK_THEME=Adwaita:dark. This doesn't dynamically change the titlebar when switching themes in VS Code however.
• Forcing VS Code/Electron to use an X11 window, possibly using the --ozone-platform flag (docs). I wasn't able to get this to work with the VSCodium Flatpak however.

License

See the accompanying LICENSE file.