A preset that works for both light and dark styles

[diegopvlk]

I don't use Gradience 😅 but from what I seen no one made a preset that works with both dark and light schemes, so I'm sharing this as inspiraton for other people.

It uses a lot of mix, alpha and currentColor, I don't know if all of this affects performance, in my machine I did not notice any difference.

I use accent_bg_color to color everything, but you can play around with other colors.
Not all colors will work, but most will, with some more tweaks I thinks it's possible to make it work with any color.

@define-color window_bg_color mix(alpha(mix(currentColor, @accent_bg_color, 1), 1),
  alpha(mix(currentColor,
      mix(currentColor, mix(currentColor, @accent_bg_color, 1), 100), 1.15), 1),
  .8);

@define-color view_bg_color mix(alpha(mix(currentColor, @accent_bg_color, 1), 1),
  alpha(mix(currentColor,
      mix(currentColor, mix(currentColor, @accent_bg_color, 1), 100), 1.15), 1),
  .86);

@define-color sidebar_bg_color mix(currentColor, alpha(@accent_color, 0.08), 1);
@define-color sidebar_backdrop_color mix(currentColor, alpha(@accent_color, 0.05), 1);

@define-color popover_bg_color mix(alpha(mix(currentColor, @accent_bg_color, 0.8), 1),
  alpha(mix(currentColor,
      mix(currentColor, mix(currentColor, @accent_bg_color, .1), 100), 1.15), 1),
  .7);

@define-color headerbar_bg_color mix(alpha(mix(currentColor, @accent_bg_color, 0.8), 1),
  alpha(mix(currentColor,
      mix(currentColor, mix(currentColor, @accent_bg_color, .1), 100), 1.15), 1),
  .7);

@define-color card_bg_color alpha(mix(currentColor, alpha(@accent_color, 0.1), 1), 1);

@define-color accent_color @purple_2;
@define-color accent_bg_color @purple_2;

This is how it looks:
Screencast

[daudix]

Oh wow, this is smart! Pinned for more people to see ;)

[0xMRTT]

@daudix-UFO we can use that for having light/dark preset 😎

[diegopvlk]

I'm glad you guys found useful :)

An alternative way to do it is using background-image with an almost transparent gradient on classes like this:

window, flap .navigation-sidebar {
  background-image: linear-gradient(rgba(0, 0, 125, 0.05), rgba(155, 55, 0, 0.05));
}
headerbar, tabbox {
  background-image: linear-gradient(rgba(0, 0, 125, 0.04), rgba(0, 0, 125, 0.04));
}

That probably would require a lot more work though and you have to make sure to not apply the background twice on the same element.

[qwertychouskie]

I wonder, does GTK support @media (prefers-color-scheme: dark) in its stylesheets? If so, this could be used to allow a theme to define two sets of colors, one for light, and one for dark.

[daudix]

No unfortunately, if it was we would use it

[qwertychouskie]

https://gitlab.gnome.org/GNOME/libadwaita/-/issues/722

We'll see if anything happens

[daudix]

Be ready for it to be closed and locked 🙂