Inconsistent theme on the top bar

[cat-master21]

Thanks in advance for your bug report!

• Have you reproduced issue in safe mode?
• Have you used the debugging guide to try to resolve the issue?
• Have you checked our FAQs to make sure your question isn't answered there?
• Have you checked to make sure your issue does not already exist?
• Have you checked you are on the latest release of Pulsar?

What happened?

On GNU Linux (KDE and Gnome) the top bar

does not change making it inconsistent.

Pulsar version

102.0

Which OS does this happen on?

🐧 Red Hat based (Fedora, Alma, RockyLinux, CentOS Stream, etc.)

OS details

Fedora 37

Which CPU architecture are you running this on?

64-bit(x86_64)

What steps are needed to reproduce this?

1. Change the system theme to dark mode
2. Change the Pulsar theme to any, can more easily be seen on dark mode.
3. Notice that the top bar doesn't change

Additional Information:

[icecream17]

hmm, (afaik) looks like there's no system to change theme automatically when the system theme changes.

does pulsar expose window properties like that to packages?

[Daeraxa]

This is the same in Atom, the menu bar is native to the OS so in theory should only change according to the OS theme, not Pulsar's (I've seen this before in Electron apps).

One way to resolve this eventually would be to move to a non-native menu bar which I detailed here - #345 as it would be fully under Pulsar's control no matter what the OS is.

[icecream17]

I feel like electron must have a solution...
ideally a package (or core) could detect when the system theme changes, and change pulsar's theme accordingly

edit: the reverse consistency would need a custom window huh...

[Daeraxa]

https://www.electronjs.org/docs/latest/tutorial/dark-mode

Looks like it is possible here?

[confused-Techie]

I'm pretty sure that would mean we have to bump electron a bit before that could be done. But might be wrong

[confused-Techie]

Actually @Daeraxa I think you are right. We should be able to use this and can likely expose it as an additional Pulsar API for theme makers to take advantage of. Probably recommending they put it in the activate() (or equivalent call).

Looks like it was added in Electron V7.0.0-beta6, so I'd imagine it's available in v12.2.3 which is what we are currently using.

[confused-Techie]

So I was looking into how we might be able to accomplish this.
Since obviously exposing an API to style the window theme is great, it wouldn't solve the problem of the hundreds of themes that already exist, not then being able to take advantage of this without updates.

So I'm considering, what if we don't prioritize an API to do this, but rather, we focus on making Pulsar do it automatically. I'm considering within the theme-manager what if, once the theme has changed, we could use something like getComputedStyle(documentElement).backgroundColor which will return an RGB value for the app's background color, (this is the color used behind tree-view, and the top menu) and then we could essentially calculate the brightness of this color, and if calculated to be brighter, then we could automatically make the window theme light, or otherwise make the window theme dark.

I feel like this might be a pretty elegant solution.

[confused-Techie]

So playing around with this method, I do have the theme-manager accurately determining when the theme is lighter or darker, as well as I have Pulsar accurately setting nativeTheme.themeSource to whatever is needed, but I think I've now hit an Electron issue.

The testing below is on Windows, and based on this discussion may be a Windows only problem, but I'll continue anyway:

When set to a light theme with my changes:

When set to dark theme with my changes:

So as you can see when compared to previous behavior, like below:

This is absolutely an improvement, and I'm curious if this behavior will exist on other platforms. Which if on other platforms the top menu bar of Electron apps already respect Dark mode, I assume it will. (Since even the Pulsar menu bar with the title doesn't respect my OS level Dark Mode on Windows)

[cat-master21]

So after looking at the Pulsar Flatpak, setting the GTK_THEME to Adwaita-dark in Flatseal and installing org.gtk.Gtk3theme.Adwaita-dark set the top bar to black:

[NeetYunYun]

If your are using Gnome as wm, you can control top bar theme in Tweaks -> Appearance by switching Legacy Applications' theme.