Bug 413915 - All electron apps have grey menus when using breeze gtk3 theme
Summary: All electron apps have grey menus when using breeze gtk3 theme
Status: RESOLVED FIXED
Alias: None
Product: Breeze
Classification: Plasma
Component: gtk theme (show other bugs)
Version: 5.17.5
Platform: Arch Linux Linux
: NOR major
Target Milestone: ---
Assignee: Janet Blackquill
URL:
Keywords:
: 417612 (view as bug list)
Depends on:
Blocks:
 
Reported: 2019-11-07 15:40 UTC by Eric Donkersloot
Modified: 2020-02-14 15:50 UTC (History)
7 users (show)

See Also:
Latest Commit:
Version Fixed In: 5.18.1


Attachments
Screenshot (75.52 KB, image/jpeg)
2019-11-07 15:40 UTC, Eric Donkersloot
Details
Screenshot (the correct one this time) (52.19 KB, image/png)
2019-11-07 15:43 UTC, Eric Donkersloot
Details
Electron6 menu bar (7 looks the same) (14.37 KB, image/png)
2020-01-17 21:25 UTC, hexchain
Details
The said script in #c8 (2.28 KB, text/x-python)
2020-01-17 21:26 UTC, hexchain
Details
Breeze and Breeze Light colour difference (172.60 KB, image/png)
2020-02-11 15:24 UTC, Ivan Safonov
Details

Note You need to log in before you can comment on or make changes to this bug.
Description Eric Donkersloot 2019-11-07 15:40:07 UTC
SUMMARY


STEPS TO REPRODUCE
1. Select "breeze" as the gtk3 theme
2. Start an Electron app (Visual Studio Code, Slack, Postman, Skype)
3. Top menu is grey

OBSERVED RESULT

The characters of the top menu are grey

EXPECTED RESULT

The characters of the top menu should be black

SOFTWARE/OS VERSIONS

Operating System: Arch Linux 
KDE Plasma Version: 5.17.2
KDE Frameworks Version: 5.63.0
Qt Version: 5.13.2
Kernel Version: 5.3.8-arch1-1
OS Type: 64-bit
Processors: 8 × Intel® Core™ i7-8550U CPU @ 1.80GHz
Memory: 15,4 GiB of RAM

ADDITIONAL INFORMATION

Switching to "adwaita" as the default gtk3 theme mitigates this issue
Comment 1 Eric Donkersloot 2019-11-07 15:40:28 UTC
Created attachment 123775 [details]
Screenshot
Comment 2 Eric Donkersloot 2019-11-07 15:43:01 UTC
Created attachment 123776 [details]
Screenshot (the correct one this time)
Comment 3 Eric Donkersloot 2019-12-03 15:30:01 UTC
Still an issue using breeze-gtk 5.17.4-1
Comment 4 Eric Donkersloot 2020-01-10 12:12:40 UTC
Still an issue on 5.17.5:

Operating System: Arch Linux 
KDE Plasma Version: 5.17.5
KDE Frameworks Version: 5.65.0
Qt Version: 5.14.0
Kernel Version: 5.4.10-arch1-1
OS Type: 64-bit
Processors: 8 × Intel® Core™ i7-8550U CPU @ 1.80GHz
Memory: 15,4 GiB of RAM
Comment 5 Janet Blackquill 2020-01-11 17:46:10 UTC
Git commit c9ac507ff3c2e700b37ed4394de6ce1356025f6c by Carson Black.
Committed on 11/01/2020 at 17:46.
Pushed by cblack into branch 'master'.

[GTK3] Improve Electron menubar legibility

Summary:
Electron apps using a menubar are now more legible. This has the side effect of
forcing background tabs in Chrome/ium to not have an inactive appearance, as `window > menubar`
provides the styling for both Electron's menubar and Chrome/ium's tabs.
FIXED-IN: 5.18

Test Plan:
Before: {F7877561} {F7877562}

After: {F7877563} {F7877564}

Reviewers: #vdg, #breeze, ndavis

Reviewed By: #vdg, #breeze, ndavis

Subscribers: ndavis, plasma-devel

Tags: #plasma

Differential Revision: https://phabricator.kde.org/D26587

M  +1    -1    src/gtk3/applications/_chromium.scss

https://commits.kde.org/breeze-gtk/c9ac507ff3c2e700b37ed4394de6ce1356025f6c
Comment 6 Eric Donkersloot 2020-01-11 23:16:04 UTC
Thank you for picking this one up; much appreciated.
Comment 7 Janet Blackquill 2020-01-11 23:17:23 UTC
(In reply to Eric Donkersloot from comment #6)
> Thank you for picking this one up; much appreciated.

No problem :)
Comment 8 hexchain 2020-01-17 21:24:29 UTC
I'm afraid this change did not fix anything for me. Now the menu bar items in Electron are hardly readable. A screenshot is attached.

It could be stale configurations on my side, but I am sure I have a fresh ~/.config/gtk-3.0/colors.css.

Electron uses a set of CSS selectors to get color for the menubar item text from the current theme, see [1]. I've written a simple script to replicate most of this logic according to [1] and [2], and the result is indeed unsatisfactory.

Currently, to work around this issue, I have the following lines in ~/.config/gtk-3.0/gtk.css:

window.background.chromium menubar, window.background.chromium .menubar {
    color: @theme_fg_color;
}

[1] https://sourcegraph.com/github.com/electron/electron@v7.1.9/-/blob/shell/browser/ui/views/menu_bar.cc#L294-297
[2] https://source.chromium.org/chromium/chromium/src/+/master:chrome/browser/ui/libgtkui/gtk_util.cc;l=474;drc=3085f123db39ded55bccebcd1e508ad94bc8ef50?originalUrl=https:%2F%2Fcs.chromium.org%2F
Comment 9 hexchain 2020-01-17 21:25:50 UTC
Created attachment 125208 [details]
Electron6 menu bar (7 looks the same)
Comment 10 hexchain 2020-01-17 21:26:29 UTC
Created attachment 125209 [details]
The said script in #c8
Comment 11 hexchain 2020-01-17 21:28:09 UTC
Forgot to say that I'm on Arch Linux, Plasma 5.18 beta now. The active color scheme is Breeze.
Comment 12 Patrick Silva 2020-01-23 23:00:26 UTC
I can confirm that this bug persists on Plasma 5.18 beta. :(

Operating System: Arch Linux 
KDE Plasma Version: 5.17.90
KDE Frameworks Version: 5.66.0
Qt Version: 5.14.0
Comment 13 Ivan Safonov 2020-02-11 15:09:19 UTC
Same issue. It works properly with colour schemes like "Breeze Dark" or "Breeze Light", but with "Breeze" scheme menu text is barely visible. 

Operating System: KDE neon 5.18
KDE Plasma Version: 5.18.0
KDE Frameworks Version: 5.67.0
Qt Version: 5.13.2
Kernel Version: 5.3.0-28-generic
OS Type: 64-bit
Comment 14 Ivan Safonov 2020-02-11 15:24:56 UTC
Created attachment 125847 [details]
Breeze and Breeze Light colour difference

It seems like "Active Titlebar Text" has a wrong colour in the Breeze theme
Comment 15 Ivan Safonov 2020-02-11 15:40:38 UTC
Or '@theme_titlebar_foreground' should be changed to something else
Comment 16 Nico Dorn 2020-02-11 17:45:20 UTC
(In reply to Ivan Safonov from comment #14)
> It seems like "Active Titlebar Text" has a wrong colour in the Breeze theme

Changing that option makes things even worse. The menu of the Electron app would be fine, but the titlebar text would be unrecognizable in all and every window.

I'm dispatching the following on autostart which fixes the issue for me:

sed -i 's/theme_titlebar_foreground.*/theme_titlebar_foreground rgb(35,38,39);/' "$HOME/.config/gtk-3.0/colors.css"
Comment 17 Janet Blackquill 2020-02-14 13:21:01 UTC
*** Bug 417612 has been marked as a duplicate of this bug. ***
Comment 18 Nate Graham 2020-02-14 15:50:22 UTC
author	Carson Black <uhhadd@gmail.com>	2020-02-13 20:23:43 -0500
committer	Carson Black <uhhadd@gmail.com>	2020-02-14 10:38:13 -0500
commit	d3e9aa737502b06e9080a87059f8b4066008c589 (patch)
tree	8e20d455586c3b7e0be554f583dd379766746407
parent	63584449cd7131f4293fb004d16e5293ce073c72 (diff)
[GTK3] Fix menubar coloursPlasma/5.18
Summary:
This patch uses strictly content fg/bg for menubars instead of a mix,
and moves the window titlebar colours into the CSD class.

Reviewers: #breeze

Subscribers: plasma-devel

Tags: #plasma

Differential Revision: https://phabricator.kde.org/D27390
Diffstat
-rw-r--r--	src/gtk3/applications/_chromium.scss	8