Making GTK3 themes – Part 4: Porting GTK2 themes

This is the 4th post from the “Making GTK3 themes” series. The older posts can be found here, here and here.

Gnome 2 had some really great themes. And now we miss them with GTK3. Porting is not that much hard, but still, not that easy. But with some little tricks, you can ease porting GTK2 themes to GTK3.

Here I have a portion from a GTK2 theme which styles buttons. Then I do that for GTK3…

style “button”
{
fg[NORMAL] = @fg_color
fg[PRELIGHT] = @fg_color
fg[ACTIVE] = @fg_color
fg[INSENSITIVE] = mix (0.4, @fg_color, @bg_color)

bg[NORMAL] = shade (1.02, @bg_color)
bg[PRELIGHT] = shade (1.07, @bg_color)
bg[ACTIVE] = shade (0.85, @bg_color)
bg[INSENSITIVE] = shade (0.95, @bg_color)

engine “murrine”
{
gradient_shades = {1.05,1.0,0.97,0.97}
border_shades = { 0.8, 0.8 }
roundness = 2
}
}

When I write that in GTK3,

.button {
background-image: -gtk-gradient(linear, left top, left bottom,
from (shade(shade(@theme_bg_color, 1.02), 1.05)),
to (shade(shade(@theme_bg_color, 1.02), 0.97)));

border-radius: 2px;
border-color: shade(shade(@theme_bg_color, 1.02), 0.8);
border-style: solid;
color: @theme_fg_color;
}

.button:active {
background-image: -gtk-gradient(linear, left top, left bottom,
from (shade(shade(@theme_bg_color, 0.85), 1.05)),
to (shade(shade(@theme_bg_color, 0.85), 0.97)));

border-color: shade(shade(@theme_bg_color, 0.85), 0.8);
}

.button:hover,
.button:active:hover {
background-image: -gtk-gradient(linear, left top, left bottom,
from (shade(shade(@theme_bg_color, 1.07), 1.05)),
to (shade(shade(@theme_bg_color, 1.07), 0.97)));

border-color: shade(shade(@theme_bg_color, 1.07), 0.8);
}

.button:insensitive {
background-image: -gtk-gradient(linear, left top, left bottom,
from (shade(shade(@theme_bg_color, 0.95), 1.05)),
to (shade(shade(@theme_bg_color, 0.95), 0.97)));

border-color: shade(shade(@theme_bg_color, 0.95), 0.8);

color: mix(@theme_fg_color, @theme_bg_color, 0.4);
}

See what I did here? You can just have a look at the numbers, compare both codes and you’ll understand. While this cannot be done for everything, this little trick will come handy in many places. Sometimes you also have to consider other factors like contrast etc. Have a try and let us know how did it work for you.

Part 1 | Part 2 | Part 3