Menu bar text not visible

[devansh08]

• Output of node_modules/.bin/electron --version: v2.0.11
• Operating System (Platform and Version): Arch Linux

Expected Behavior
Menu bar text font color should be white for a black/dark background.

Actual behavior
Menu bar text color is gray(close to black) with black background. So the text is unreadable.

To Reproduce
Have had this problem since installation.

Screenshots

Additional Information
I am facing this problem on both Atom and VS Code so I am presuming it to be related to Electron. This is happening on both light and dark themes. In fact there is no change in the menu bar colors for Adapta and Adapta-Nokto themes. I have read abt this issue on another thread here but it was last updated an year ago and mentions the problem being related to electron not having GTK3 support. I presume this has been achieved so I dont know what to do now.

[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.

[ckerr]

Possible that we didn't notice this until #14813 .. 🙄 😆

[devansh08]

#14813 seems to have been fixed in v2.0.11 according to release logs. But its not working for me on v2.0.11 or v2.0.12.

[devansh08]

This issue seems to only occur for VS Code and Atom installed from Pacman repos. Everything works fine for their respective AUR repos which seem to be created from the official binaries.

[sbatten]

Adding in this information from my duplicate for awareness.

After tweaking the theme css for the Yaru Ubuntu 18.10 theme, it seems the foreground color for the menubar is being pulled from the context menu color, not the menubar foreground color.
The colors are set here:

electron/atom/browser/ui/views/menu_bar.cc

Line 142 in 74644e5

background_color_ = libgtkui::GetBgColor(menubar_selector);

[merlijn-sebrechts]

Note that this affects a default install of Ubuntu 18.10 but not 18.04 LTS, because 18.04 still uses the old theme.

Some affected applications on Ubuntu 17.10:

• vscode
• mattermost 4.2.0
• skype
• atom beta

[mmstick]

This seems to be happening again. Have seen it in the latest releases of mattermost-desktop, vscode, and atom 1.33.0 on Pop!_OS 18.10 (and from previous references, Ubuntu 18.10).

[devansh08]

I think this issue has been fixed (#15878) but not added to any stable release yet. We may have to wait on that.

[malnvenshorn]

Is the fix included in any release by now?

[codebytere]

@malnvenshorn no, it looks like it slipped under our radar: apologies! @Cobinja helpfully opened up backports, so we can look to get those in as soon as possible 🙇‍♀️

[Moonstrous]

Is it fixed yet or something ? i still have this issue ... any work-arounds ?

[devansh08]

On Arch the AUR package for Atom works. And for VS Code they have sort of added an option to merge title bar and menu bar. That fixes this issue. I don't have any clue for any other electron app.

[Cobinja]

The backports are merged into the 3-0-x and 4-0-x branches, but there were no point releases yet, so I assume it to arrive with the next ones for 3.0 and 4.0.
@codebytere what about the 3-1-x backport?

[malnvenshorn]

The fix should also be included in 2.0.x

[Cobinja]

I did the backports only for the above mentioned branches because the original PR was tagged for them.
@codebytere: When will/did 2.0 reach end-of-life? Would it still make sense to backport it now?

[Synaxis]

Still happening .... maybe just add option to change the Font/Color scheme From system to default like chrome firefox and VSCODE does

[jaynarayan89]

I also have this issue on fresh install of atom . I am using atom version 1.34.0 on ubuntu 18.10 x64.

[klvenky]

I am seeing this issue on ubuntu 19.04 on latest version (v1.38.x I guess). Is there some configuration that I can do to make this work. Just as someone already asked for, some setting option like in vscode

[devansh08]

In VS Code you can set Title Bar Style as custom rather than native. This will merge the two and make the menus visible. Although this setting seems to be default in the latest versions by my knowledge.

[klvenky]

Hi @devansh08,
I agree that it works that way in vscode however, I would just like to know if there is a workaround for atom. Would be great if there is a config setting that could help me in that :)

[klvenky]

this is working on other themes like advaita. However, for yaru theme the fix is in v1.39-beta2. I have checked and found that it works. :)

[timburgess]

The default in VS Code is for menus to be 'native'. Changing Settings for Window: Title Bar Style to be 'custom' is a workaround for this issue. I wasn't able to find a solution in Atom.