Menu bar color is white while environment is dark.

[elongbug]

Does this issue occur when all extensions are disabled?: Yes

• VS Code Version: from version 1.82.0 to the latest
• OS Version: Linux (Arch rolling release, Kernel 6.6.29-1-lts), Gnome 46

Steps to Reproduce:

1. install the latest vscode

From Vscode version 1.82.0 to the latest version (1.89.0), when setting window.titleBarStyle to native, the menubar background color is rendered differently from the color of the theme provided by the system.

This issue did not occur until vscode version 1.81.1.
From version 1.82.0 of vscode, this issue raised.

(If you simply reinstall vscode version 1.81.1 to the system that has the latest version of vscode on the same system without any changes, the problem will go away. )

This has been reported as below bug, but the underlying issue has not been resolved.
#192905

There is a reason why I can't change window.titleBarStyle to custom in my environment.
I'm using a 32-inch monitor with 4K resolution, so when I use window.titleBarStyle as custom, the font size of the menu bar is small (and light(thin)) and inconvenient.

( I use Gnome's global font scale set to 1.25 to have a readable font in Linux gnome on a 4K resolution monitor, but this setting does not apply to vscode's menubar. )

Also, I want to change only the font size of the menubar to be bigger, but not the other settings in vscode, but I can't use it because when I change it through zoom, all the UI in vscode changes with it.

1. Tested OS and Window Manager: Linux, Gnome 64 (wayland)

2. Working version

Version: 1.81.1
Commit: 6c3e3dba23e8fadc360aed75ce363ba185c49794
Date: 2023-08-09T22:18:39.991Z
Electron: 22.3.18
ElectronBuildId: 22689846
Chromium: 108.0.5359.215
Node.js: 16.17.1
V8: 10.8.168.25-electron.0
OS: Linux x64 6.6.29-1-lts

3. Detailed version of when the issue began to occur

Version: 1.82.0
Commit: 8b617bd08fd9e3fc94d14adb8d358b56e3f72314
Date: 2023-09-06T22:07:18.759Z
Electron: 25.8.0
ElectronBuildId: 23503258
Chromium: 114.0.5735.289
Node.js: 18.15.0
V8: 11.4.183.29-electron.0
OS: Linux x64 6.6.29-1-lts

4. Same issue in newer versions

Version: 1.89.0
Commit: b58957e67ee1e712cebf466b995adf4c5307b2bd
Date: 2024-05-01T02:08:25.066Z
Electron: 28.2.8
ElectronBuildId: 27744544
Chromium: 120.0.6099.291
Node.js: 18.18.2
V8: 12.0.267.19-electron.0
OS: Linux x64 6.6.29-1-lts

[aeschli]

The color of the native title bar is controlled by the OS. Typically it is white on OS light mode and black on OS dark mode.
We currently have no Electron API to change it on Linux. The issue is electron/electron#28887
I don't know what changed with 1.82, likely we updated to new version of Electron.

If you want to stick with the native title bar you can look into ways to change the color from the OS side.

[elongbug]

@aeschli The method suggested in electron/electron#28887 does not solve this problem.

If you set the following, all themes in gnome will change to another theme.

gsettings set org.gnome.desktop.interface color-scheme 'prefer-dark'

If the electron update changed the theme color of the native menu and you can't change it in vscode,
Could you please add a setting to change only the font size of the menu when window.titleBarStyle is set to custom?

[aeschli]

Would be better if you create a new feature request for the font size of the menu. I can then assign it to the right developper.