Background of custom GTK widget is rendered solid black

Question

I am trying to create a custom widget in GTK 3. I noticed drawing problems which only appear with certain GTK themes, while all other themes work great. I narrowed down the problem to the code that draws the background by calling gtk_render_background(). For some themes, the background is rendered in solid black, although this is not the themes's default background color. Below is a simplified version of my draw function.

static void gtk_databox_ruler_draw_ticks(GtkDataboxRuler *ruler)
{
    GtkWidget *widget;
    GtkStateFlags state;
    cairo_t *cr;
    GtkStyleContext *style_context;
    gint width, height;

    if (!gtk_widget_is_drawable(GTK_WIDGET(ruler))) {
        return;
    }

    widget = GTK_WIDGET(ruler);
    state = gtk_widget_get_state_flags(widget);
    style_context = gtk_widget_get_style_context(widget);

    gtk_style_context_save(style_context);
    gtk_style_context_add_class(style_context, GTK_STYLE_CLASS_DEFAULT);
    gtk_style_context_set_state(style_context, state);

    /* <test-code> */
    GdkRGBA test;
    gtk_style_context_get_background_color(style_context, gtk_widget_get_state_flags(widget), &test);
    /* </test-code> */

    width = gtk_widget_get_allocated_width(widget);
    height = gtk_widget_get_allocated_height(widget);

    cr = cairo_create(ruler->priv->backing_surface);

    gtk_render_background(style_context, cr, 0, 0, width, height);

    gtk_style_context_restore(style_context);
    cairo_destroy(cr);
}

I added some test-code to query the background color and set a breakpoint in gdb:

When using Ubuntu's Ambiance theme:

(gdb) print test
$1: test = {red = 0.94901960784313721, green = 0.94509803921568625, 
  blue = 0.94117647058823528, alpha = 1}

When using Ubuntu's HighContrast theme:

(gdb) print test
$1: test = {red = 0, green = 0, blue = 0, alpha = 0}

I now wonder if I use the new GtkStyleContext in a wrong way, or whether or the theme is broken. How can I narrow down the source of the problem?

I'd also appreciate it if someone can point my to a good introduction to GtkStyleContext. The official API documentation is not so helpful for understanding the fundamental concept.

Answer 1

After more than one year has passed, I had to look into this problem again because it also occurs when using the GTK3 default (built-in) style, i.e. when my program is used on a system that has no themes etc. installed.

It looks like the source of the problem is that some GTK themes define a background color for the "default case" and others do not.

The GTK3 default theme:

…
* {
  color: @fg_color;
  border-color: shade (@bg_color, 0.6);
  padding: 2px;
  -GtkWindow-resize-grip-width: 0;
  -GtkWindow-resize-grip-height: 0;
  -GtkWindow-decoration-button-layout: 'icon:minimize,maximize,close';
}

GtkWindow, .button, .slider {
  background-color: @bg_color;
}
…

The Adwaita theme:

…
* {
    /* inherit the color from parent by default */
    color: inherit;
    background-color: @theme_bg_color;
}
…

To get the background drawn, I simply have to select a widget class that has a background color defined across all (most) themes. I use the button class for that:

gtk_style_context_add_class(style_context, GTK_STYLE_CLASS_BUTTON); 

Answer 2

What version of Ubuntu and GTK3 are you using?

Perhaps you need to call gtk_style_context_set_junction_sides().

You may also be interested in this info from Benjamin Otte, one of the developers of GTK. How GTK styling works, also available GTK+3 Styling.