Some apps not following the light / dark mode change

1

Hi, some of my flatpak apps (Discord and Open Office) just don’t follow my laptop’s dark/light theme. For exemple when I put discord theme to follow my system theme it just uses the light theme no matter if my computer’s in dark mode. Same for Open Office. Is it a flatpak problem ? Could I make it work ? Thanks in advance

1 Like
2
  • OnlyOffice: It happens not only on flatpak. The team is aware (issue on Github).
  • Discord: I’d guess it’s also an app’s specific issue. You can try to search and get support here

PS: I considered OnlyOffice instead of OpenOffice, since OpenOffice is not available on Flathub.

3

Yes it was OnlyOffice sorry. Okay well I hope it’ll soon be fixed then, thanks !

4

I have vision problems and light themes cause me a great deal of discomfort. One of the reasons I have snaps installed on my device was because the Flathub Theming never seemed to want to work right for me.

I found this article about setting a system-wide or app-specific theme setting and ever since I’ve had absolutely no problems.

DOWNLOAD A THEME BEFORE YOU START!

run to view available GTK themes

flatpak search gtk3theme

download themes by running

flatpak install flathub org.gtk.Gtk3theme.Matcha-dark-sea
[Matcha-dark-sea is my preferred theme, it should be the same as your current desktop theme]

In order to manually force your preferred dark theme on any/all flatpaks you need to:

Step 1: Give Flatpak apps access to GTK themes and icons location

Give ALL Flatpak packages permission to access ~/.themes and ~/.icons:

sudo flatpak override --filesystem=$HOME/.themes
sudo flatpak override --filesystem=$HOME/.icons

OR

Give Flatpak permission per-application to access ~/.themes and ~/.icons:

sudo flatpak override org.gnome.Calculator --filesystem=$HOME/.themes
sudo flatpak override org.gnome.Calculator --filesystem=$HOME/.icons

Step 2: Tell Flatpak apps which theme/icon to use

To tell ALL Flatpak packages which GTK theme/icon to use, first get the name of the desired item and then apply the following command:

sudo flatpak override --env=GTK_THEME=my-theme
sudo flatpak override --env=ICON_THEME=my-icon-theme

OR

For individual per-application permissions, run:

sudo flatpak override org.gnome.Calculator --env=GTK_THEME=my-theme
sudo flatpak override org.gnome.Calculator --env=ICON_THEME=my-icon-theme

There is a way to do this using Flatseal that looks easier. I haven’t tried that way though.

5

If you are looking for OpenOffice, LibreOffice is on flathub. And it follow the theme settings.

2 Likes
6

Have same problem using Visual Studio Code, Retroarch, etc. Just change Ubuntu’s light or dark style once and applications start displaying incorrect themes. I have always used dark themes, but when I change to light afterwards there is no way for the flatpak apps to go back to dark.

There should be a command to repair the themes of all apps installed with flatpak or to validate the style settings.

7

This will never work with visual studio code, they by definition not honor light/dark style, you need to set that inside vscode.

1 Like
8

@justresisting, that shall solely apply to GUI toolkits that ultimately render to GTK3 or Qt5/6. GTK4 remains unsupported:

@hub, even moreso, OnlyOffice is entirely deprecated:

Indeed, @razzeee. Electron applications need to update their CSS to utilize the system colouration. You can see an example of the modifications they need to make at bugreports.qt.io/browse/QTBUG-131845:

OBSERVED RESULT

The HTML’s background-color appears to be hard-coded as either of the undermentioned:

  • HTML { background-color: #FFFFFF; }

  • HTML { color-scheme: light; }

I doubt that @media (prefers-color-scheme: is involved.

EXPECTED RESULT

As [Firefox permits using its browser.display.use_system_colors preference][1], about:blank in khelpcenter the Web Browser plasmoid should render usiung the system .colors scheme’s background-attribute’s colour value.

To my knowledge, this can be remdiated by unsetting background-color, and setting the undermentioned:

HTML { color-scheme: light dark !important; }