Set GTK UI/branding colors

[cassidyjames]

This should not be too hard thanks to Adwaita.

In GTK inspector, I just set:

@define-color headerbar_bg_color #f15a22;
@define-color headerbar_backdrop_color @headerbar_bg_color;
@define-color headerbar_fg_color white;

@define-color accent_color #f15a22;
@define-color window_bg_color #f8f7f3;

To implement, we'd just need to GResource a style.css with the above.

• Custom styles docs
• Named colors docs

For example, we could do:

#12272a	#f15a22	#f8f7f3

[dylanmccall]

For reference, we implemented that for a little while before reverting it over here:

endlessm/kolibri-installer-gnome@84230a5

endlessm/kolibri-installer-gnome@aee846d

And indeed, we might find that this works better in the context of the Explore plugin since the navigation bar in the web app itself is a nice neutral colour :) However, things do get a bit awkward when we're looking at channels themselves, since those do have brightly coloured navigation bars.

[jprvita]

Wouldn't this be stepping over the user's own theme preferences? In addition to potentially being seen as rude / annoying, I think it may affect accessibility settings.

[cassidyjames]

@jprvita no, Adwaita as used in GTK4 and Flatpak is already designed in this way; Adwaita already uses its own styling and does not inherit any system "theme". And these variables are explicitly provided by Adwaita as part of the API for apps to use for more interesting styling. :)

Light/dark style is implemented as the FreeDesktop preference and could be considered here, as well as the high contrast style; I would just need to test with those preferences to ensure this is handled well.

[cassidyjames]

@dylanmccall in that case, I would lean towards using the dark gray headerbar background color; it matches the default top bar when viewing a channel, and more closely matches what ChromeOS does with its titlebar as well.