Some apps not following the light / dark mode change

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

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

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

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.

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

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.

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

@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; }