search

microsoft / vscode

Visual Studio Code
https://code.visualstudio.com
MIT License
159.13k stars 27.83k forks source link

Menu bar color is white while environment is dark. #212044

Closed elongbug closed 2 weeks ago

elongbug commented 3 weeks ago

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

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. https://github.com/microsoft/vscode/issues/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. vscode_1_89_0_custom

( 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. ) gnome_display_resolution_scale gnome_tweak_font_scale

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

    vscode_1_81_1_version vscode_1_81_1_menubar

  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

    vscode_1_82_0_version vscode_1_82_0_menubar

  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

    vscode_1_89_0_version

aeschli commented 2 weeks ago

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 https://github.com/electron/electron/issues/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 commented 2 weeks ago

@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 commented 2 weeks ago

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.