[Windows] Title bar does not respect dark mode

[zlstringham]

Preflight Checklist

• I have read the Contributing Guidelines for this project.
• I agree to follow the Code of Conduct that this project adheres to.
• I have searched the issue tracker for an issue that matches the one I want to file, without success.

Issue Details

When setting nativeTheme.themeSource to 'dark' (or 'system' and setting the system theme to 'dark'), the title bar on Windows remains light. On macOS, the title bar accurately reflects the setting.

• Electron Version:
  • npm ./node_modules/.bin/electron --version: 6.9.0
  • package.json: "electron": "^8.2.5",
  • yarn.lock: 8.2.5
• Operating System:
  • Windows 10 (1903)

Expected Behavior

(This works as expected on macOS)

	nativeTheme.themeSource = 'system'	nativeTheme.themeSource = 'light'	nativeTheme.themeSource = 'dark'
Light Theme	Light Title Bar	Light Title Bar	Dark Title Bar
Dark Theme	Dark Title Bar	Light Title Bar	Dark Title Bar

Actual Behavior

	nativeTheme.themeSource = 'system'	nativeTheme.themeSource = 'light'	nativeTheme.themeSource = 'dark'
Light Theme	Light Title Bar	Light Title Bar	Light Title Bar
Dark Theme	Light Title Bar	Light Title Bar	Light Title Bar

To Reproduce

nativeTheme.themeSource = 'dark'

Screenshots

Command Prompt:

File Explorer:

Title Bar in Electron with nativeTheme.themeSource = 'dark'

[miniak]

This is only doable using undocumented APIs for win32 applications
https://stackoverflow.com/questions/53501268/win10-dark-theme-how-to-use-in-winapi
https://github.com/ysc3839/win32-darkmode

[ckerr]

I have a WIP for this and will push it to a public branch RSN. Hoping to have this ready by the end of the week.

[ckerr]

I have updated the patch based on review feedback.

In this week's Releases Workgroup meeting, I'll propose its inclusion. The point of contention in review is that a fair amount of private API is necessary to make this work.

[ckerr]

An agreement has been reached about how to handle use of nonpublic APIs -- this PR will be merged behind a compile-time feature flag.

[ckerr]

After a few more revision requests, the PR to honor nativeTheme.themeSource = 'dark' being called before the Window is created has finally been approved. The backport bot 'trop' can port it from master to 11; I'll backport it to 10 manually.

[ckerr]

This has been merged into Electron 10, 11, and master behind a disabled build flag. It can be enabled by changing enable_win_dark_mode_window_ui to true in buildflags/buildflags.gni.

[Arjan-Zuidema]

Any chance this will be enabled in pre-built versions so I can actually use this in my projects? I do not like using a custom title bar for Windows only.

[gpetrov]

Maybe this issue should be reopened as it is still not available in the production builds @ckerr

[twitharshil]

@ckerr I tried the flag mentioned here on electron v11.4.4, looks like the issue is partially solved. The right OS theme is applied to the browserWindow title bar at the time when browserWindow is created during the app launch, but the theme change is not getting reflected in the title bar when we switch between the OS theme while the app is already launched. I have tried setting nativeTheme.themeSource = 'system and explicitly setting it to dark and light by listening to this updated event but didn't get any success.
Check the attached gif that reflects the issue correctly

[jviotti]

@ckerr I haven't spent a lot of time looking at your initial PR, but it seems that the code is only checking the system theme and applying the theme mode on windows creations, i.e.:

if (message == WM_NCCREATE) {
   ...
}

From https://github.com/electron/electron/pull/25373/files#diff-9a00c5b8d17617acce09892658a116c0f0f0d03c1cf7e4d59d8247c2ecfa911cR33.

Based on what @twitharshil , the nativeTheme updated event does get correctly triggered, so it might be about adding that same snippet of code in reaction to that event too.

[bmsuseluda]

Im confused because It is closed but not fixed in the production build.
I hope someone could explain why it is like that.

[damienallen]

@bmsuseluda Been tracking this for a while and we kinda gave up on this being fixed quickly. I suspect it doesn't help that, at least on the Windows side, the OS-level handling of dark mode seemed a bit shaky to start with. I also remember some old thread saying that there were also changes needed on the Chromium side before this could work in Electron.

I agree this should get re-opened if it's not being tracked elsewhere.

[bradmanAWS]

Is there any update to this issue? It seems like this issue should be reopened.

[damienallen]

@bradmanAWS Sounds like there has been some movement, see: #33624