pcb-rnd knowledge pool

 

GTK4 rant: CSS: design error with custom widgets

gtk4r_css_labelc by Tibor 'Igor2' Palinkas on 2021-12-23	Tags: insight, gtk4, rant, css, custom, widget, theme, style
node source

 

Abstract: n/a

  This rant is part of a series.

Hardwired colors

A major problem with css themes is that the current css setup is too inflexible to support custom widgets . In that writeup, I showed an example of how scrollbar slider is specified, and the css background color was this:

	background-color: #a4a4a3;

A hardwired magic number in the middle of a 130k css file. This is not the exception, this is the rule: most of the stock dark theme is full of such hardwired magic numbers. If they wanted two widgets have the same color, the color code is just copied.

In that custom widget incompatible with css idea writeup my conclusion was that it's impossible to reuse css colors from the theme. But I was not 100% correct, because gtk css usage is not 100% consistent. There are some colors that can be reused, via a different mechanism.

Named colors

These are named colors, specified at the end of the stock css theme files. For example a few of them look like this:

/*
widget text/foreground color */
@define-color theme_fg_color #eeeeec;
/*
text color for entries, views and content in general */
@define-color theme_text_color white;
/*
widget base background color */
@define-color theme_bg_color #353535;
/*
text widgets and the like base background color */
@define-color theme_base_color #2d2d2d;
/*
base background color of selections */
@define-color theme_selected_bg_color #15539e;
/*
text/foreground color of selections */
@define-color theme_selected_fg_color #ffffff;

These named colors can be resolved. At one part of my code I had to "invert" a label, implementing a cursor. Since there's no reliable way to query widget color, I couldn't just read foreground and background colors and swap the,. I tried to make a programmed text selection, that looked good, but unfortunately started to mess with the clipboard... So I figured I had to manually change colors from code. (Which, by the way, is done by passing on css in char *... so any time my cursor changes, gtk4 goes and compiles css... Wonderful!)

But then I faced the old problem again on what color should I pick to make sure it works with whatever theme the user picks. Fortunately I've found the above lines in the stock theme, so I went with named selection colors. But this is a suboptimal solution.

Conclusion

The main problem is: there is no guarantee these named colors would exist in a random theme. In my opinion gtk4 css theme combines of worst of every possibility:

• it hardwires data (e.g. color codes), duplicating them over and over
• it doesn't let programmers read those colors
• then inconsistent with those decisions, it does define some named colors...
• ... but there's no guarantee which ones