Can I selectively desaturate icons in a gtk theme?

#1

The way it’s done in every theme that I’ve looked at is:

button:disabled image {
   opacity: 0.4;
}

But this only reduces the opacity. This does make the icon lighter but it’s still not identifiable as disabled without a much longer look than traditional toolkits (and GTK2) which also desaturate the icon.

GTK3:

image

GTK2 / Traditional:

image

Is there a way to also desaturate the icon like this through a theme stylesheet?

Further reducing opacity just makes the icon harder to see long before providing reinforcement of a disabled state.

#2

No, there are no filter effects in GTK3’s CSS. GTK2 was calling gdk_pixbuf_saturate_and_pixelate()—unless a theme engine decided to use something else, of course. Icons aren’t really using GdkPixbuf any more, as they are not great for caching and for rendering without unnecessary copying and compositing. These days, we use Cairo surfaces.

GTK4 supports filters with the -gtk-icon-filter CSS property.

As a side note: you should really use -gtk-icon-effect: dim, instead or hardcoding an opacity.

#3

Can writing an extension provide a way to apply the desired desaturation to a GTK3 desktop environment?

I’ve been working on porting the GTK2 Clearlooks theme to GTK3 with the Clearlooks-Phenix project as a base. But I’m finding that there is some behavior which is not analogous to the new toolkit and cannot be done purely with a stylesheet.

I understand that GTK4 is the way forward but GTK3 is established and will also remain present on LTS releases for a long time. I’m therefore very motivated to get this polished up for GTK3 before looking at what solutions are available in GTK4.

#4

An extension to what? There are no extensions in GTK theming.

The goal of the GTK CSS engine has never been to replicate what you could do with a shared module side loaded into the application’s process—mostly because theming engines in GTK2 could literally do anything (including crashing). Pixel-perfect equivalence with Clearlooks was not a contributing factor towards the switch to CSS. You may also have noticed that most applications have stopped using color icons, opting towards symbolic ones that do not need to be desaturated; and that the amount of icons in UIs has been drastically scaled down.

If GTK’s CSS engine can’t do something then it cannot be done without changing the CSS engine. Additionally, GTK3’s CSS is frozen and stable, so we cannot add a desaturate effect.

#5

The problem I have with GTK3 is it seems to required user behavior to changed to align with the goals of the new toolkit.

I don’t disagree with the project’s motivation to break new ground and try new things. But it’s frustrating when that change removes the ability to continue to provide historically established paradigms.

Someone somewhere may have decided that all icons everywhere should be monochromatic. In that case then :dim and :highlight is sufficient. But I certainly prefer color in my icons.

Would it be possible to write extensions to the CSS engine which would allow me to add my own -clearlooks-icon-desaturate: option?

#6

Yes, this is something that happens because the toolkit developers, designers, and application developers adapt to changes in how computer UIs change. GTK2 was the result of the UI design of late '90s/early 2000s. GTK3 is the result of the late 2000s. GTK4 is the result of the late 2010s.

As I said above: there are no extensions in the CSS theming. Engines do not exist any more.

#7

Honestly, that’s a subjective statement, I have no trouble identifying the disabled icons in the upper example as disabled just as quickly/easily as in the lower example. I suspect it’s a matter of what you’re used to, in part, as well as your expectations.

If you’re expecting GTK3 to be identical to GTK2, then the upper example fails to meet that expectation. But if you’re just looking to determine which icons are disabled, the upper example meets that goal just fine. (And for users with certain types of color-vision limitations, there won’t even be an obvious difference between some of the icons in the two examples.)

#8

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