Dark Menu bar with Grey / Brown Text in Electron Based App

[GulajavaMinistudio]

**Operating System (Platform and Version): **
Linux based with GTK Theme (Arc Darker, Adapta , etc)

Expected Behavior
Menu bar show white text instead of brown or grey.

Actual behavior
It show brown or grey text, althought i have changed GTK Theme Color.

To Reproduce
Install GTK Theme (Arc or Adapta) and switch in Darker theme. I find some electron apps like Visual Studio Code and Gitkraken show grey text with darker background in menu bar.

Screenshots
Here i provide some screenshoot from latest version of VS Code and Gitkraken with latest version of Electron JS.

[welcome]

👋 Thanks for opening your first issue here! If you're reporting a 🐞 bug, please make sure you include steps to reproduce it. We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can.

To help make it easier for us to investigate your issue, please follow the contributing guidelines.

[sofianguy]

which version of electron are you running?

[GulajavaMinistudio]

@sofianguy

For Visual Studio Code, i get the info about version of Electron here
Version: 1.29.1
Commit: bc24f98b5f70467bc689abf41cc5550ca637088e
Date: 2018-11-15T19:07:43.495Z
Electron: 2.0.12
Chrome: 61.0.3163.100
Node.js: 8.9.3
V8: 6.1.534.41
Architecture: x64

And for Gitkraken, the version of Electron is unknown

[nana-4]

Hi, I have same issue on Atom 1.33.0 and VSCode 1.29.1. I'm using Fedora 29.

This seems to be caused by Electron using the GtkWindow text color instead of menubar > menuitem text color for the menu bar.

IIRC, this problem didn't happen in the older version of Electron.

Atom version info:

$ atom --version
Atom    : 1.33.0
Electron: 2.0.11
Chrome  : 61.0.3163.100
Node    : 8.9.3

VSCode version info:

VSCode  : 1.29.1
Electron: 2.0.12
Chrome  : Ditto
Node    : Ditto

[btd1337]

Same error here... In dark theme this error doesn't occurs.

Occur in Latest VS Code Stable and Insider edition.

VSCode Stable Version

 1.29.1
bc24f98b5f70467bc689abf41cc5550ca637088e
x64

VSCode Insider Version

1.30.0-insider
241923763dbeaf3b64443187e935d55b29f6125d
x64

Electron Version

v3.0.10

[ckristi]

mattermost-desktop-4.2.0 and skypeforlinux-8.34.0.78 are affected as well.

mattermost-desktop-4.1.2 menus worked fine with mint-y-darker theme(s), but the upgrade to 4.2.0 broke the menus (probably upgraded electron?).

[hexchain]

I have the same problem on Arch Linux, with electron 2.0.14.

Probably electron is using the wrong CSS selector for the menu button? https://sourcegraph.com/github.com/electron/electron@v2.0.16/-/blob/atom/browser/ui/views/menu_bar.cc#L145

Here is a screenshot of GTK_DEBUG=interactive gtk3-demo --run=menus. The expanded element is the menu label:

And here are the relevant CSS rules of my theme:

/*********
 * Menus *
 *********/
menubar,
.menubar {
  -GtkWidget-window-dragging: true;
  padding: 0;
  background-color: #4e585f;
}

menubar > menuitem,
.menubar > menuitem {
  transition: all 100ms cubic-bezier(0, 0, 0.2, 1);
  min-height: 20px;
  padding: 4px 8px;
  color: rgba(242, 244, 244, 0.7);
}

menubar > menuitem:hover,
.menubar > menuitem:hover {
  transition: none;
  background-color: rgba(242, 244, 244, 0.12);
  color: #f2f4f4;
}

menubar > menuitem:disabled,
.menubar > menuitem:disabled {
  color: rgba(242, 244, 244, 0.3);
}

menubar > menuitem label:disabled,
.menubar > menuitem label:disabled {
  color: inherit;
}

.csd.popup {
  background-color: transparent;
}

menu,
.menu,
.context-menu {
  margin: 4px 0;
  padding: 4px 0;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.4);
  background-color: #fcfcfc;
  border: 1px solid rgba(0, 0, 0, 0.12);
}

.csd menu, .csd
.menu, .csd
.context-menu {
  border: none;
  border-radius: 2px;
}

menu menuitem,
.menu menuitem,
.context-menu menuitem {
  transition: background-color 100ms cubic-bezier(0, 0, 0.2, 1);
  min-height: 20px;
  min-width: 40px;
  padding: 4px 8px;
  font: initial;
  text-shadow: none;
}

menu menuitem:hover,
.menu menuitem:hover,
.context-menu menuitem:hover {
  transition: none;
  background-color: rgba(56, 62, 66, 0.12);
}

menu menuitem:disabled,
.menu menuitem:disabled,
.context-menu menuitem:disabled {
  color: rgba(56, 62, 66, 0.5);
}

menu menuitem arrow,
.menu menuitem arrow,
.context-menu menuitem arrow {
  min-height: 16px;
  min-width: 16px;
}

menu menuitem arrow:dir(ltr),
.menu menuitem arrow:dir(ltr),
.context-menu menuitem arrow:dir(ltr) {
  -gtk-icon-source: -gtk-icontheme("pan-end-symbolic");
  margin-left: 8px;
}

menu menuitem arrow:dir(rtl),
.menu menuitem arrow:dir(rtl),
.context-menu menuitem arrow:dir(rtl) {
  -gtk-icon-source: -gtk-icontheme("pan-end-symbolic-rtl");
  margin-right: 8px;
}

menu menuitem label:dir(rtl), menu menuitem label:dir(ltr),
.menu menuitem label:dir(rtl),
.menu menuitem label:dir(ltr),
.context-menu menuitem label:dir(rtl),
.context-menu menuitem label:dir(ltr) {
  color: inherit;
}

menu > arrow,
.menu > arrow,
.context-menu > arrow {
  min-height: 16px;
  min-width: 16px;
  padding: 4px;
  background-color: #fcfcfc;
  color: rgba(56, 62, 66, 0.7);
}

menu > arrow.top,
.menu > arrow.top,
.context-menu > arrow.top {
  margin-top: -4px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 2px 2px 0 0;
  -gtk-icon-source: -gtk-icontheme("pan-up-symbolic");
}

menu > arrow.bottom,
.menu > arrow.bottom,
.context-menu > arrow.bottom {
  margin-top: 8px;
  margin-bottom: -12px;
  border-top: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 0 0 2px 2px;
  -gtk-icon-source: -gtk-icontheme("pan-down-symbolic");
}

menu > arrow:hover,
.menu > arrow:hover,
.context-menu > arrow:hover {
  background-image: image(rgba(56, 62, 66, 0.12));
  color: #383e42;
}

menu > arrow:disabled,
.menu > arrow:disabled,
.context-menu > arrow:disabled {
  border-color: transparent;
  background-color: transparent;
  color: transparent;
}

menu separator,
.menu separator,
.context-menu separator {
  margin: 4px 0;
}

menuitem accelerator {
  color: rgba(56, 62, 66, 0.7);
}

menuitem:disabled accelerator {
  color: rgba(56, 62, 66, 0.3);
}

.popup:not(.csd) menu menuitem {
  color: #383e42;
}

.popup:not(.csd) menu menuitem:hover {
  background-color: #e4e5e6;
}

.popup:not(.csd) menu menuitem:disabled {
  color: #9a9d9f;
}

.popup:not(.csd) menu accelerator {
  color: #73777a;
}

[hexchain]

Looks like a fix is already applied: #15878
Should it be backported to Electron 2 as well?

[sofianguy]

Thank you for taking the time to report this issue and helping to make Electron better.

The version of Electron you reported this on has been superseded by newer releases.

If you're still experiencing this issue in Electron v4.2.x or later, please add a comment specifying the version you're testing with and any other new information that a maintainer trying to reproduce the issue should know.

I'm setting the blocked/need-info label for the above reasons. This issue will be closed 7 days from now if there is no response.

Thanks in advance! Your help is appreciated.

[sofianguy]

Thank you for your issue!

We haven't gotten a response to our questions in our comment above. With only the information that is currently in the issue, we don't have enough information to take action. I'm going to close this but don't hesitate to reach out if you have or find the answers we need, we'll be happy to reopen the issue.