Css button color

Development
1

hi
i have several computers on linux mint lmde. on my computer i have installed gtk 4 and in my app button colors are blue. But on my production machine color of button is default and not blue but text of button is white as is on my computer. where to start to fix this css styling. since i bundle my exec in appImage for now i fear that on production machine some different file exists that renders css but diferently …any hint or help is more than welcome.

2

Hi,

The style depends on many parameters…
Is it a pure-gtk4 app, or do you use libadwaita?

If pure-gtk4, then the app will follow the configured gtk theme, which may be different on each system.

Also, some people modify their $HOME/.config/gtk-4.0/gtk.css, which overrides all apps style. If it’s the case, then there is nothing much you can do…

3

i didnt know this and am surely not happy …but on production machine i did nothing special its unavailable till evening so i cant check if gtk4 is installed there i doubt my better half which mostly use computer did anything special …in code i just add class and send css text and use provider. nothing fancy

4

Linux Mint ships a custom GTK theme called Mint-Y out of the box. So it wouldn’t be your partner doing anything special: it’s Linux Mint installing customizations out-of-the-box. Distributions tend to do this kind of thing, unfortunately (this is what https://stopthemingmy.app/ was about: asking distros to stop shipping broken themes by default)

libadwaita was designed to force the Adwaita theme and ignore the distro’s default theme settings specifically to avoid this kind of problem. So you can port your app to libadwaita, and get much saner theme behavior. However, your app will look more like a GNOME app, which might not be something you want. You would probably need to at least edit your custom styles to match the updated Adwaita theme, but in return you’ll get goodies like automatic light/dark mode and high contrast support, accent color integration, and so on.

If you want to keep using the default theme built into GTK4, you can simply make your app ignore OS theme settings. Just grab the GtkSettings object (via gtk_settings_get_default) and set the gtk-theme-name property to Default, Default-dark, Default-hc or Default-hc-dark. Then your app will ignore the system’s theme settings and use only the theme your app explicitly chose to use.

There’s nothing you can do about $HOME/.config/gtk-4.0/gtk.css. But that’s for user customization to force apps to look and behave a certain way. Distros won’t put anything there by default (or at least they haven’t so far…), so if someone adds some CSS there that’s explicit user choice to do that and you don’t have to provide support for it.

5

i dont want to write app to work only on mint. because i had problem with fedora i choosed to create appImage. so i would get alot of cookies with libadwaita but how does things look then on other distribution? if you can please gimme some heads up…
somehow i think ill have to keep default theme for gtk4 …and if it is possible to create button that is small as i want so the size isnt forced by theme.

6

As suggested by adrianvovk, you can force using the gtk4 default theme:

  g_object_set (gtk_settings_get_default (),
                "gtk-theme-name", "Default",
                NULL);

Adwaita is designed to look the same everywhere (only dark/light, high-contrast and accent-color are configurable).

Yes, you can load a small CSS snippet that overrides the current theme for a specific element, for example:

.compact-button {
    font-weight: normal;
    padding: 3px;
    min-height: 16px;
    min-width: 16px;
}

then add the compact-button class to that button.

There are many examples on this forum, search for gtk_style_context_add_provider_for_display() to know how to load that custom CSS.
Feel free to ask more details if needed.