Native Windows title bar does not respect dark mode setting

[MolusMS]

Issue Type: Bug

I have the dark theme on VSCode, if I set the window.titleBarStyle to native, the title bar does not pick up the dark color.

VS Code version: Code - Insiders 1.41.0-insider (27cd33d, 2019-11-08T19:12:35.358Z)
OS version: Windows_NT x64 10.0.19514

System Info

Item	Value
CPUs	Intel(R) Core(TM) i9-9900K CPU @ 3.60GHz (16 x 3600)
GPU Status	2d_canvas: enabled flash_3d: enabled flash_stage3d: enabled flash_stage3d_baseline: enabled gpu_compositing: enabled metal: disabled_off multiple_raster_threads: enabled_on oop_rasterization: disabled_off protected_video_decode: unavailable_off rasterization: enabled skia_renderer: disabled_off surface_control: disabled_off surface_synchronization: enabled_on video_decode: enabled viz_display_compositor: enabled_on viz_hit_test_surface_layer: disabled_off webgl: enabled webgl2: enabled
Load (avg)	undefined
Memory (System)	63.81GB (51.88GB free)
Process Argv
Screen Reader	no
VM	0%

Extensions (3)

Extension	Author (truncated)	Version
vscode-nmake-tools	Mic	2.0.191107007
cpptools	ms-	0.26.1
powershell-preview	ms-	2019.11.0

[vscodebot]

(Experimental duplicate detection)
Thanks for submitting this issue. Please also check if it is already covered by an existing one, like:

• [themes] setting for preferred light and dark color theme based on system dark mode setting (Windows/Mac) (#61519)
• New mixed titleBarStyle (#57117)

[sbatten]

@deepak1556, this is really an electron feature request

[deepak1556]

@sbatten electron fixed this in 7 and also exposed a new module to allow apps customize it electron/electron#19656

[deepak1556]

@MolusMS can you try the exploration builds from #84214 (comment) to make sure this is fixed with electron 7. Thanks!

[vscodebot]

This issue has been closed automatically because it needs more information and has not had recent activity. See also our issue reporting guidelines.

Happy Coding!

[deepak1556]

Verified that this is not fixed in electron 7, we would have to listen to OS events using the above module and set the app color.

[deepak1556]

After some investigation, this is a bug in chrome as well, launch chrome with --disable-windows10-custom-titlebar and the native title bar will not respect the dark mode for apps settings. Should be reported in upstream.

[LarsFosdal]

This goes for the light theme as well. The app does not use the Windows 10 Theme App Title colors for focused / non-focused.
Really annoying!

[Poopooracoocoo]

cough undocumented APIs for dark titlebars cough

[rzhao271]

Adding upstream Chromium issue link https://bugs.chromium.org/p/chromium/issues/detail?id=1127795

[rzhao271]

I tried setting some breakpoints and noticed that https://source.chromium.org/chromium/chromium/src/+/main:ui/views/window/non_client_view.cc;l=113;bpv=1;bpt=1 gets hit. But, I didn't find a corresponding OnPaint event handler. https://source.chromium.org/chromium/chromium/src/+/main:ui/views/window/custom_frame_view.cc;drc=cafa646efbb6f668d3ba20ff482c1f729159ae97;bpv=0;bpt=1;l=363 is the closest we get, but it's for the custom frame view rather than the native one.

I then noticed that other non-Chromium Windows app titlebars weren't picking up the system colour either, so I looked around and saw microsoft/microsoft-ui-xaml#2484, which still hasn't been implemented.

[rzhao271]

I just realized that the original issue is saying that if the user picks a dark mode theme, then the native titlebar colour should also be the dark mode colour. I'm not as sure about this. On macOS, for example, the native titlebar colour goes by the OS theme, and same with cmd.exe on Windows. Changing the issue scope so that we're going by OS theme instead.

[rzhao271]

I confirmed the feature works on a custom Insiders build. This issue will be fixed once we're on Electron 16.

[joyceerhl]

Still seems to repro in latest Insiders which uses Electron 16:

[rzhao271]

Looks like I forgot to add steps.

1. On Windows, set the app mode (or if not available, the system mode/theme) to dark mode.
2. Set VS Code to use the native titlebar.
3. The titlebar should be black rather than white. More specifically, it should be the same colour as the titlebar you get when opening a command prompt from the start menu.

[joyceerhl]

1. System theme is dark mode
   
2. VS Code is configured to use native titlebar with the "window.titleBarStyle": "native" setting
3. Title bar is still white

After also changing my app mode to dark mode, the title bar is black. Is that expected @rzhao271?

[rzhao271]

Reopening since we're switching back Electron versions.

[rzhao271]

Verification steps:
See #84453 (comment).

[be9em0t]

From my point of view, native titlebar does respect theme color EVENTUALLY.

During VS Code launch first empty un-themed window appears (looks like un-themed (basic theme) windows 10, light blue titlebar which really cuts your eyes when in dark mode ).
Then, once all components finish loading, the titlebar is repainted with the correct theme.

Short clip

[rzhao271]

That's a separate issue: #146683