[Linux] Menubar background color is always white

[inukshuk]

• Electron Version: 2.x, 3.x
• Operating System (Platform and Version): Linux
• Last known working Electron version: 1.8

Expected Behavior
I would expect the menubar's background color to use a background based on the GTK theme. Up to Electron 2.0 this used to work (albeit only for the light theme variant), see for example the screenshot below:

Actual behavior
In Electron 2.x and 3.x the menubar is always white. Using both the light and dark theme variant.

To Reproduce
This is reproducible for me with Electron Quick Start. Is it supposed to be this way or might this be caused by my Desktop configuration?

[clobrano]

Making some tests, it looks like menubar is always taking the style from Adwaita theme. In fact, configuring gtk3 to "prefer dark" (see below), the menubar becomes black, following Adwaita-dark theme

$ cat ~/.config/gtk-3.0/settings.ini 
[Settings]
gtk-application-prefer-dark-theme=1

[Cobinja]

This is probably due to https://github.com/electron/electron/blob/master/atom/browser/ui/views/menu_bar.cc#L127 where the menu bg color is fetched instead of the menubar bg color, which can be totally different depending on the used gtk3 theme.

[inukshuk]

@Cobinja is right, the color returned is the GTK theme's menu background (changing that color in the theme changes the menu bar). I'm guessing Chromium defines only that color because it does not use a menu bar at all? So this might be problematic, because on quick glance I can't find an appropriate color id constant for the menu bar, nor is there any constant, that I can find, which would use the GtkMenuBar#menubar selector (which we would need, I think?).

Is it possible to call Chromium's GetColor directly?

[codebytere]

@inukshuk took a stab at this, PR here: #14785

[inukshuk]

@codebytere this looks great, thanks!

[inukshuk]

Just tested and it works well:

There is a tricky problem related to dark mode: when creating a window with the darkTheme option, the menu bar will still use the theme's light variant.

It's possible to 'fix' this as a user by forcing the dark theme variant for the process (e.g., by setting the GTK_THEME environment variable).

This is already much improved, but ideally, we should take the darkTheme option of the window into account to allow an app to create windows using either the dark or light variant.

[codebytere]

@inukshuk if you'd be interested, i'd be happy to pair with you on a PR for this? I can try to address this later but also if you'd want to contribute i can also help that effort!

[inukshuk]

@codebytere thanks for the offer, I'd very much like to contribute, if it makes sense. Now that macOS also has proper light and dark modes, I wonder if a common approach to this issue wouldn't be warranted? At the moment, there is only the darkTheme option when creating new window and the systemPreferences.isDarkMode -- but I do wonder if there shouldn't be an option, similar to darkTheme on Linux for macOS now to specifically create a window in the right mode.

Our app already has a light and dark theme; on macOS we're using a frameless window, but now there seems to be a new kind of highlight/shadow built into all windows: in light mode it is almost white, while in dark mode it is a little bit darker. Now, it seems to me as if Electron's frameless window always gets the light variant, even when the system preferences is switched to dark mode. See here for example:

Here you see a few dark mode windows and the Electron window in the middle. Notice how the line at the top is much lighter than for the other windows; also the traffic lights are much lighter in the Electron window. I would argue that we probably need a darkMode option on macOS or use darkTheme for both Linux and macOS. Do you think this is right?

[MarshallOfSound]

@inukshuk let's not mix the issue of mojave dark mode support and GTK theming. Mojave dark mode has a different set of APIs and expectations to GTK theming.

See this PR for what I'm doing to support Mojave dark mode: #14755

As for the white line you are seeing at the top of all your windows on mojave, see #13164

[Cobinja]

While the menubar background works now, its foreground color remains that of menu, not that of menubar. Should I open a new issue for that or can we handle it here?
Just as a hint: You can check using my theme CobiBird (available on Github here). It's a light theme with dark menus

[merlijn-sebrechts]

The issue that @Cobinja mentions is tracked here: Upstream issue: #15194

it seems the foreground color for the menubar is being pulled from the context menu color, not the menubar foreground color.

So this affects themes where the menu bar and context menu foreground color are different: Ubuntu 18.10 but not Ubuntu 18.04.

[inukshuk]

Hi @codebytere coming back to your offer, I'm working on a fix for the most imminent issue #15194 (to avoid potentially illegible text). For this we also need to use GetFgColor. In order to do this, I assume we need to set the function's visibility attribute via LIBGTKUI_EXPORT like you did for GetBgColor. Can you tell me the best way to update the patch file? Thanks!

[inukshuk]

I think I figured it out, please see #15878

[soundar-m]

This issue still exists in fedora 37 when using electron 21.3.0