Use dark mode for the window title bar on Windows 10

[Zylann]

Describe the project you are working on:
Any

Describe the problem or limitation you are having in your project:
When OS-wide dark mode is enabled on Windows, Godot still has a white title bar.

Describe the feature / enhancement and how it helps to overcome the problem or limitation:
Instead, it should follow the same color scheme and have a dark color.
(A similar issue was raised and fixed on MacOS: godotengine/godot#27264)

Describe how your proposal will work, with code, pseudocode, mockups, and/or diagrams:
I'm no expert in that OS-specific part, but I suppose it should be relatively simple to do?
The color to pick could come from the editor theme, or from the OS if there is an API to obtain it.

If this enhancement will not be used often, can it be worked around with a few lines of script?:
It's OS-specific and there is nothing exposed to do this from a script AFAIK, it would be very inconvenient to do that with an addon anyways.

Is there a reason why this should be core and not an add-on in the asset library?:
It relates to the core windowing system, used for games, editor and project manager.

[bruvzg]

Isn't it UWP only feature?

[Zylann]

I think in this day and age, we should be able to have this... but if we still cant somehow, that would be very sad :/
There is an option in Windows colour settings to choose "Window colours", but it only works on focused windows.

[Calinou]

Windows (Win32 apps) doesn't let you change the title bar color on a per-window basis. The only way we can implement this is to use client-side decorations; in other words, replace the OS-provided title bars with our own. See also godotengine/godot#34528 where this would be useful.

It's true that Windows Explorer is able to have a dark title bar even though it's not UWP, but I'm not sure if there's an API that exposes this to other applications. Explorer is more deeply integrated than most other applications are.

Other than that, you can change your OS settings to make title bars dark. Set the accent color to the darkest allowed color (#333333) and make the accent color affect the title bar. (Right-click an empty space on your desktop and choose Personalize.)

Even then, that tweak only works while the window is focused. There's nothing you can do about unfocused windows.

[Xrayez]

If I understand correctly, I do have dark title bars in dark mode on Windows:

Yet as pointed by Calinou, unfocused windows are white:

OS version/build: 1909/18363.1198.

[VedatGunel]

You can change the unfocused title bar color through registry.

• Type in regedit in Start Menu to access the Registry Editor.
• Go to HKEY_CURRENT_USER\SOFTWARE\Microsoft\Windows\DWM.
• Create a new DWORD and name it AccentColorInactive.
• Set its value to the color you want. It should be in HEX format, and BGR order. For example, if you want a pure yellow color, the value would be 00ffff.

[Arnklit]

We couldn't just get rid of the title bar completely like browsers and other modern apps are doing? We're basically just taking up a line of space to show "Godot Engine", the name of the open file and the minimize, maximize and close buttons. They could be integrated into the same line as the top menus and people would get an extra line of editor space as well.

I understand this is a way bigger ask. but it would be a nice improvement.

[Zylann]

The problem with removing decoration is that you would loose OS-specific behavior for resizing and positionning windows, which you'd have to re-implement (that's what happened last time I tried this on another project).

Tweaking colors in settings and adding the missing registry key is a good workaround for the editor. Might not do for apps though.

[akien-mga]

This is missing important information: how do other Windows applications behave with dark mode?

Changing theme or changing registry are workarounds and not so relevant to Godot development. What matters is that Godot behaves like all other applications. If it doesn't, and Godot is the odd one out, then we can look into fixing it. Otherwise there's no point trying to workaround design decisions from the Windows devs.

[Zylann]

@akien-mga well that settles it then I guess? This part of theming is quite a mess on Windows. Some apps follow dark mode properly, others do it halfways, others don't. Core Windows apps do have dark title bar at all times, while those using older APIs like Notepad++ don't, and Godot is among them.

[akien-mga]

Well if some apps can do it, we might be able to too. But indeed if it's only possible using UWP APIs, we might be out of luck.

#1868 (comment) suggests that dark mode works for the title, only that it's then white when unfocused. Is this the experience you have with other apps like Notepad++? How do native apps look like in both focus modes?

I'm not on Windows nor using dark mode, so it's a bit hard to see what's the current status and what's the desired status.

[Zylann]

#1868 (comment) suggests that dark mode works for the title, only that it's then white when unfocused. Is this the experience you have with other apps like Notepad++? How do native apps look like in both focus modes?

After I turned on Dark mode, title bars of notepad++ and Godot were still white.
I had to check an option in Windows setting to have the accent color on title bars (it was off by default), then I had the same behavior as Xrayez's comment on Notepad++ and Godot.

Mozilla, Slack, Explorer and Console windows were keeping a dark color when unfocused, and in fact I actually screenshoted the Console to pick that color, and applied it to the registry thanks to VedatGunel's comment. At this point I got consistent decoration colors everywhere (except maybe on Discord which has custom decorations).

[Pablo96]

I've seen this is the only issue on window client side decorations and I wonder if I could take it as a task to implement it and have a programming buddy with me to start developing on this project. I would like to contribute this to the project.
I plan to look at this PR #40223 as reference

[xaviervitor]

I think the correct design would be like the Windows Explorer title bar.
Focused:

Unfocused:

[pattlebass]

It might be possible now, but I haven't tested anything.

[ludogue]

In fact, this is possible from a long time, but not documented.
mintty do this ( https://github.com/mintty/mintty/blob/3.6.1/src/winmain.c )
so i have checked how they do it :

// set DWMWA_USE_IMMERSIVE_DARK_MODE; needed for titlebar
BOOL dark = 1;
if (S_OK != pDwmSetWindowAttribute(w, 20, &dark, sizeof dark)) {
    // this would be the call before Windows build 18362
    pDwmSetWindowAttribute(w, 19, &dark, sizeof dark );
}

I have tested it and it's work ( i have windows 10 build 19044 )
They also check os version with GetVersion :

DWORD win_version = GetVersion();
uint build = HIWORD(win_version);
win_version = ((win_version & 0xff) << 8) | ((win_version >> 8) & 0xff);
//printf("Windows %d.%d Build %d\n", win_version >> 8, win_version & 0xFF, build);
if (win_version >= 0x0A00 && build >= 17763) { // minimum version 1809

There is also check if dark mode is enabled on the system, but i am not sure if this is allway a good solution.
I think it may rather be linked to the theme used by the application.
A need more investigation for that part, so i will stop there for now ;-)

[akien-mga]

Implemented by godotengine/godot#65026.