Custom CSS button colors are ignored when system theme is Adwaita

Platform
1

I created a custom theme CSS for my application Flowblade and I’m quite happy with it.

The problem is that if system theme is set to Adwaita (or Paper or some others) the color defined for buttons does not appear in GUI, instead we get the Adwaita button colors.

Themes like Arc and Yaru do not have this effect when they are the system theme.

In the image below we have:
Top) custom theme with Arc as system theme, everything works
Middle) button color set to red in my custom CSS to confirm that we are setting the color correctly
Bottom) custom theme with Adwaita as system theme, now the button colors come from Adwaita and not from my custom CSS

buttton_artifact
buttton_artifact732×1800 111 KB

My theory is that Adwaita sets some additional CSS properties that override my custom CSS or maybe my custom CSS does not fully override Adwaita, but I have no idea what these properties are. Or maybe it is something else completely.

Any ideas anyone?

2

When you load a CSS fragment in your application, you can set the priority for your rules; if you use GTK_STYLE_PROVIDER_PRIORITY_APPLICATION then only user-specific overrides will have a higher priority than your own rules.

You can use the inspector to check what value the CSS properties have for each widget, and then check inside Adwaita and your own theme.

3

Alright, the inspector was the way to go. Adwaita had background-image set for buttons that needed to overidden to none.

There are some other elements still leaking through, they are different for different themes, e.g. Yaru adds orange lines on active menus.

It would be useful if you could add to Gtk4 for some method to clear all CSS properties so that when application adds its own CSS one does not have to hunt every conflicting CSS property coming through from potentially a large number of themes.

1 Like
4

That’s very unlikely to ever happen, as it would break the very cascading model of CSS.

I’m sorry, but if you want to override user themes then you’ll have to deal with properties that are set, inherited, or simply the default. We cannot programmatically clear things from the API because, by the time the style is applied, the toolkit already has combined:

  • the system’s theme
  • the application CSS rules
  • the user overrides

It would also inevitably lead to broken UIs when your application’s CSS rules do not cover some UI control; right now, at the very least, the toolkit can fall back to something, even if it looks slightly out of place. The “unset” state is a transparent control, which would make no sense whatsoever.

5

Well, that’s that then. None of the other artifacts are deal breakers, so I can live with this situation and can spend some time later to maybe fix few of them now that I know how to work the problem.

Anyway thanks for the reply and the pointer on inspector, I didn’t know that such a thing was available.

6

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.