feat: add immersive dark mode on windows

[mlaurencin]

Description of Change

Closes #32913, closes #18119.

A refactored implementation of dark mode for Windows, using official API for Windows 11 and undocumented flag on Win 10 >= 20H1. It allows Electron apps to set a dark title bar based on the system preference.

cc @dsanders11 @deermichel @ckerr

Checklist

• PR description included and stakeholders cc'd
• npm test passes
• relevant documentation is changed or added
• PR release notes describe the change in a way relevant to app developers, and are capitalized, punctuated, and past tense.

Release Notes

Notes: Added immersive dark mode on Windows.

[dsanders11]

Been waiting for this. 😄

I've built it and played with it on Windows 10. However, it seems to suffer from the same problem outlined in #25373:

There is still a wart: Changing themeSource dynamically when the window is already shown isn't perfect: the property is set, but the window still has to be poked before the change takes effect, e.g. changing focus or minimizing/restoring the window. The usual programmatic ways of forcing a window refresh don't seem to work here; perhaps this is my error but let's see about getting guidance for the right recipe to use.

Using the fiddle from our docs on dark mode I can confirm that's the behavior I see, the titlebar doesn't change until something forces a window refresh like resizing it, minimizing, blurring it, etc. It does however refresh correctly when it's set to system and you toggle the system setting.

Also, can release notes be updated to clarify it's for Windows?

[deermichel]

@dsanders11 yup that's a known issue - I spend quite some time trying to find a fix but wasn't able to come up with a working programmatic "force-redraw" (RedrawWindow API etc.). Feel free to give it a try ;). For some reason I only hit that in vanilla Electron, not in Skype - also it's only an issue when setting dark mode from within the app; afaik it works when changing the system dark mode in OS settings.

The fact that the title bar changes after moving a window shows that the property is already set correctly (so it's nothing missing on our side). I wouldn't be surprised if it is an actual Windows bug.

[deermichel]

@mlaurencin after merging, we should also add the new fuse to @electron/fuses :)

[dsanders11]

Current implementation doesn't change the titlebar for DevTools windows, but I was able to get that working wtih a small change, see 63e4ef2 for how I implemented it. EDIT: That commit has problems, so just a reference on how it might be done, not a shippable solution.

[deermichel]

@dsanders11 Thanks! I'll check your comments tmw or next week; unfortunately i cannot guarantee for anything but the initially proposed changes, because they were tested in the wild 🤞🏽

[dsanders11]

@deermichel, disregard the commit about doing all windows to get the DevTools windows. I tested it again and it didn't work like it did before. 🤔 I also realized that it wouldn't work for the case where you open DevTools after the theme change, since it wouldn't re-run that code when the DevTools opens. So, disregard that. 🙂 I'll just open a bug once this lands that DevTools won't have dark mode titlebar (would be nice, but not too important).

[deermichel]

@dsanders11 @mlaurencin Let me suggest a path for going forward here:

• On Win11, there is a public API (that seems to work reliably) - so I wouldn't put the feature behind a flag, but enable it for all.
• On Win10, we can offer a fuse for users to enable it there with the risk of private/undocumented API usage
• or we don't offer the option on Win10 at all (not sure if Win11 adoption is that widespread tbh)

[mlaurencin]

@dsanders11 @mlaurencin Let me suggest a path for going forward here:

• On Win11, there is a public API (that seems to work reliably) - so I wouldn't put the feature behind a flag, but enable it for all.
• On Win10, we can offer a fuse for users to enable it there with the risk of private/undocumented API usage
• or we don't offer the option on Win10 at all (not sure if Win11 adoption is that widespread tbh)

If I am following correctly, the API is currently public for Win11 and private for Win10, so it would be a matter of converting the fuse to only apply to Win10 if it were to be kept, right?

[MarshallOfSound]

or we don't offer the option on Win10 at all (not sure if Win11 adoption is that widespread tbh)

I much prefer this option, it keeps the code cleaner and makes more sense for consumers. "This is a Windows 11 feature".

[dsanders11]

I much prefer leaving it possible to use on Win10 - which is going to be around for a long time to come. Not having the functionality at the moment is an eyesore, especially since the menu bar does respect dark mode, making the out of the box experience on Windows feel unpolished.

[deermichel]

I agree with @dsanders11.

• Dark mode has been around for a long time with widespread usage on Win10 - users might not understand why this should be a Win11-only feature now.
• Our Win11 userbase is around 10% (compared to all Windows versions) and a quick google reveals adoption doesn't look much better on a larger scale. Do we want to withhold a "great" experience from 80%+ of Windows users?

For Win11, enabling the feature per default is a no-brainer. For Win10, putting it behind a fuse seems like a reasonable way to make this feature available to the public without risking too much (it is super unlikely the API will change on Win10 anyway as it is in maintenance mode & would even break msft apps).

[hipstersmoothie]

How close are we to getting this landed? I really don't want to create my own custom build of electron

[dsanders11]

@deermichel, take a look at my branch, hopefully we can grab these changes and finish this PR off: https://github.com/dsanders11/electron/commits/immersive-dark-mode-add-2

I changed the fuse to mention Win10 specifically, added a runtime check for Win11, and separated out the implementations so it's cleaner and clear which one is using private APIs.

[deermichel]

@dsanders11 thank you very much, i'll take a look next week

[release-clerk]

Release Notes Persisted

Added immersive dark mode on Windows.

[trop]

I have automatically backported this PR to "18-x-y", please check out #34548

[trop]

I have automatically backported this PR to "20-x-y", please check out #34549

[trop]

I have automatically backported this PR to "19-x-y", please check out #34550

[damienallen]

Very excited to test this out in the next release!