Lately, I’ve been intermitently working on the gtk-style-context branch, which is meant to supersede GtkStyle and get rid of all its limitations in creating contemporary UIs, to name a few:
- Cairo as a first class citizen: This means elements may be rendered on any surface, not only on X resources.
- No more widget peeping: There is now a GtkWidgetPath abstraction, which fully defines the widget in a styling point of view.
- Widget is no longer a plain area: Widgets may define named regions, which can be styled independently.
- Animation support: Theming engines no longer have to hack their way to animate some UI element, there is built in support for animations on state changes.
- No more detail string: GtkStyleContext may contain several classes, which can be checked by the theming engine.
As a consequence, the GtkRC parser has been replaced as well by a CSS-like parser, the property names aren’t currently fully following the CSS spec (Selectors do), and there are some semantics that don’t apply, but OTOH there is support for symbolic colors. The format is enough for people into web development to get the gist of it:
@named-color: #01a4f9;
/* Set background on GtkCheckButton
* and other types inheriting from
* it
*/
GtkCheckButton {
background-color: #14a414;
}
/* Theme buttons inside a table,
* not necessarily a direct child
*/
GtkTable GtkButton {
foreground-color: #f01df4;
text-color: #f01df4;
}
/* Theme scale widgets that are
* direct children of a GtkTable
*/
GtkTable > GtkScale {
foreground-color: #01ab39;
}
/* Widget states may be defined */
GtkButton:active {
background-color: #f01;
}
/* Generic classes may be used as well */
.button:prelight {
background-color: #10f;
}
/* any widget with this name will be themed */
*#some-widget-name {
font-color: #e0a;
}
/* This will apply if both states happen on the
* widget, such as a pressed checkbox button with
* the pointer on it.
*/
GtkButton:active:prelight {
background-color: shade (#f01, 1.3);
}
/* Set bg color on odd rows */
GtkTreeView row:nth-child(even) {
background-color: #f00f10;
}
/* Theme first notebook tab differently */
GtkNotebook tab:nth-child(first) {
background-color: @named-color;
}
/* And paint a bit darker if active */
GtkNotebook tab:nth-child(first):active {
background-color: shade (@named-color, 0.7);
}
/* Animate checkbutton transitions */
GtkCheckButton:active {
transition: 200ms ease-in-out;
}
If you compile the gtk-style-context branch and put this into ~/.gtk-2.0.css, you should see something like this:
(Disclaimer: this is the default engine, I know it’s ugly, let’s leave art for artists)
At the moment, widgets have been roughly ported to this new code indirectly through making GtkStyle rely on GtkStyleContext, so they could be a lot more talkative about the elements they render and contain. If you’re a theme engine developer try out the GtkThemingEngine API, this is what theming engines must implement and use in order to render UI elements, constructive feedback is most welcome.
