libadwaita coloring

[yavko]

Hi, libadwaita supports changing the colors of stuff using the @define-color at-rule in XDG-CONFIG/gtk-4.0/gtk.css, I was thinking if there was a way for this theme to also match that. Here is an example of what I have:

@define-color window_bg_color #1e1f29;
@define-color window_fg_color #f8f8f2;
@define-color view_bg_color #282a36;
@define-color view_fg_color @window_fg_color;
@define-color accent_bg_color #bd93f9;
@define-color accent_color @accent_bg_color;
@define-color headerbar_bg_color @window_bg_color;
@define-color headerbar_fg_color @window_fg_color;
@define-color popover_bg_color #44475a;
@define-color popover_fg_color @view_fg_color;
@define-color card_bg_color rgba(255, 255, 255, 0.08);
@define-color card_fg_color @window_fg_color;

Thanks for this great theme!

[polyjitter]

To further extend on this, this extension allows for recoloring the bar based on the page's metadata - https://addons.mozilla.org/en-US/firefox/addon/adaptive-tab-bar-color/

Perhaps something can be done to integrate the two?

[yavko]

To further extend on this, this extension allows for recoloring the bar based on the page's metadata - addons.mozilla.org/en-US/firefox/addon/adaptive-tab-bar-color

Perhaps something can be done to integrate the two?

How?

[polyjitter]

As in, perhaps a pull request with the extension to allow it to overwrite the firefox-gnome-theme colors and make it look like what you're suggesting.

[yavko]

As in, perhaps a pull request with the extension to allow it to overwrite the firefox-gnome-theme colors and make it look like what you're suggesting.

Are you proposing some sort of api for changing the theme's colors? I think that wouldn't be in the scope for this issue.

[rafaelmardojai]

This is not trivial to implement, are you suggesting to load colors from XDG-CONFIG/gtk-4.0/gtk.css?

Also libadwaita uses CSS color functions that are GTK-only like lighten(), darker(), shade(), alpha(), mix(), allowing you to recolor the interface with a few colors, so probably this is no viable with pure regular CSS.

[yavko]

This is not trivial to implement, are you suggesting to load colors from XDG-CONFIG/gtk-4.0/gtk.css?

Yes

Also libadwaita uses CSS color functions that are GTK-only like lighten(), darker(), shade(), alpha(), mix(), allowing you to recolor the interface with a few colors, so probably this is no viable with pure regular CSS.

Couldn't it be done with javascript?

[rafaelmardojai]

Yes

That's imposible unless you modify Firefox. In the best case maybe load them making an extension, but I'm not sure if you can read that file from an extension.

Other option would be to modify the installation script to read the file and make all the magic, but that would be too complex and I don't even think you would be able to do the color calculations from bash. So maybe porting the script to python would be needed. But in any case, you will need to run the script every time you change those values.

Couldn't it be done with javascript?

Yes, you should be able to calculate colors using JS, but this theme is CSS only.

---

Also remember those CSS variables from libadwaita are intended for app developers to tweak their app colors, not for users to modify them, so that's unsupported. This theme is focused to mimic an standard libadwaita app.

[radical4ever]

well, libadwaita doesnt have this user-support chooser for accent colors but there is already a gtk3 with accent color support, i leave the theme repo here, for the color support to happen you yous copy the gtk.css of gtk-4.0 to the 3.0 one an it works great, im askiing if is possible to use a custom gtk3 theme from yoour local user but keeping the layout as it is.

[TheOPtimal]

This is not trivial to implement, are you suggesting to load colors from XDG-CONFIG/gtk-4.0/gtk.css?

Also libadwaita uses CSS color functions that are GTK-only like lighten(), darker(), shade(), alpha(), mix(), allowing you to recolor the interface with a few colors, so probably this is no viable with pure regular CSS.

Then some sort of CSS preprocessor could be used.

[rafaelmardojai]

Then some sort of CSS preprocessor could be used.

Well that could help me to mimic the Adwaita color generation and ease things for me, but anyone wanting to change the colors will need to recompile the CSS. Those GTK CSS functions I mentioned are executed at runtime.

Right now the easiest way to change colors is to modify some of the CSS variables this theme uses.

[TheOPtimal]

Then some sort of CSS preprocessor could be used.

Well that could help me to mimic the Adwaita color generation and ease things for me, but anyone wanting to change the colors will need to recompile the CSS. Those GTK CSS functions I mentioned are executed at runtime.

Right now the easiest way to change colors is to modify some of the CSS variables this theme uses.

What if the pre-preprocessed CSS was only preprocessed at install time? (when the scripts are ran)

[rafaelmardojai]

What if the pre-preprocessed CSS was only preprocessed at install time? (when the scripts are ran)

Right, but that will require to have Sass (for example) as a dependency to install the theme, and that is something that I would like to avoid.

Anyway, I'm closing this as wontfix for now, IMO this is kinda out of scope and the theme can already be tweaked using CSS variables.

[radical4ever]

i tried doing the coloring manually, and it turns out pretty good(practically any color works!)!, i'm thinking if its possible to make an optional tool as a firefox web extension? bc if its possible at least the process of changing color would be less dense than going to the file location.

[TheOPtimal]

I think an extension could work. It could potentially even grab system colors whenever that is implemented.