Menu bar doesn't follow dark/light theme on Windows

[dzhou121]

The window title bar follows dark/light them on Windows nicely but not the menu bar.

Is it possible to do or a limitation of win32 api?

[Poopooracoocoo]

Win32 does not provide a dark menu bar. Need to go non-native for that.

[amrbashir]

Win32 has Owner Drawn Menu Items where you basically draw everything by yourself from scratch but that only works for the submenus and not the menu bar itself, well, at least officially. There is some undocumented APIs to also draw the menu bar from scratch and I got pretty good result with it.

Here is a screenshot where the menu bar color matches the title bar color(hard coded for now):

I could add on to this and also draw the submenu but I feel it is not necessary, and it is better to keep it white.

The thing is, Windows has an option "Show accent color on titlebar and window borders" and if it is "ON", I can get that color and apply to the menu bar too but if it is "OFF", I need to fallback to the default color but I need to know when that option is toggled on and off, and currently I don't know of a way to get notified about that option getting changed. And even if I get notified about that option getting toggled, I still don't know of a way to get the default color for active and inactive titlebar.

To what this feature needs in order to be implemented:

• Need a way to get notified about Show accent color on titlebar and window borders option getting toggled.
• Need a way to get the current accent color of Windows (Can be retrieved from HKEY_CURRENT_USER\SOFTWARE\Microsoft\Windows\DWM\AccentColor)
• Need a way to get the default color of active and inactive titlebar

[BenjaminYe36]

I was trying to migrate one of my project from Electron to Tauri recently and when I was trying out the menu bars I found this post.

When I'm on Windows using dark theme and "Show accent color on titlebar and window borders" OFF, electron would show white titlebar with dark menubar.
In contrast, Tauri would show dark titlebar with white menubar.
But I actually wanted a dark titlebar with a dark menubar in this setting.

@amrbashir Thanks a lot for contributing to the awesome Tauri project. I just have some follow-up questions regarding your comment.
In my testing with Tauri today, it seems like the three points you mentioned is already implemented?

• When the "Show accent color on titlebar and window borders" is toggled, the Tauri window correctly updates the color
• I guess the accent color is retrieved somehow to make the first observation possible. (also electron seems to use this win32 api to get accent color for Windows system)
• The default color for light and dark mode titlebar and active and inactive titlebar seems to work in my Tauri app.

Regarding your comment that menubar may use accent color if "Show accent color on titlebar and window borders" is "ON", I'm a little confused, because the setting only mentions titlebar and window borders which doesn't include using accent color for menu bar.

I'm not an expert of window or UI desgin, and I just want to present my observation. By comparing some Windows Applications with similar menu bar styles to Tauri window like (apps built with Electron using menu bar and Notepad++)

• They won't apply accent color to menu bars when "Show accent color on titlebar and window borders" is "ON" (only titlebar is affected)
• When their tab is inactive, only their titlebars are grayed out (also including apps like firefox, edge browser), their menu bars are not grayed out

I wonder would it be possible for TAO to use the same detection method for titlebar dark theme and change the menu bar color when dark theme is applied? Thank you!

[amrbashir]

When I'm on Windows using dark theme and "Show accent color on titlebar and window borders" OFF, electron would show white titlebar with dark menubar.
In contrast, Tauri would show dark titlebar with white menubar.
But I actually wanted a dark titlebar with a dark menubar in this setting.

I wonder would it be possible for TAO to use the same detection method for titlebar dark theme and change the menu bar color when dark theme is applied? Thank you!

This can be done.

Reading your comment, I think you misunderstood me completely, maybe my wording wasn't clear.

I am not talking about title bars colors because they work perfectly, I was talking about matching the menubar color to the titlebar color whether it is using the default (black/white) color or the accent color (when "Show accent color on titlebar and window borders" is "ON") or when it is inactive (which has a slightly different color).

I'm not an expert of window or UI desgin, and I just want to present my observation. By comparing some Windows Applications with similar menu bar styles to Tauri window like (apps built with Electron using menu bar and Notepad++)

• They won't apply accent color to menu bars when "Show accent color on titlebar and window borders" is "ON" (only titlebar is affected)
• When their tab is inactive, only their titlebars are grayed out (also including apps like firefox, edge browser), their menu bars are not grayed out

yeah that's probably because they can't also detect when the Show accent color on titlebar and window borders is getting toggled.

I think what we can just do the following:

1. Light Titlebars -> Light menubar
2. Dark Titlebars -> Dark menubar without submenus
3. Accented Titlebars:
   • Windows using Light theme -> Light menubar
   • Windows using Dark theme -> Dark menubar without submenus.

[dhan2325]

I saw the linked PR was merged, but I wasn't sure if the feature was added to to v1.* or if this is to be included in v2. I'm currently working in v1 now, and I'm finding that on Windows, even with both my OS and my window theme set to dark mode, while the title bar theme seems to behave correctly, my menu bar is consistently showing up in light mode colors.

If someone could point me to any configs I might have missed or if this feature is available in v1 at all or if there's a solid workaround in v1, I'd greatly appreciate it.

[amrbashir]

That's for v2, v1 will stay as is

[dhan2325]

Is it included in the beta release of V2 that was announced earlier this month?

[amrbashir]

yeah, it is included