Making GTK3 themes – Part 2: The gtk.css and gtk-widgets.css files

This is the second post from the “Making GTK3 themes”series. The first post can be found here.

We will name our theme as “Dream”. So create a directory named “Dream” under “~/.themes” and then create another directory named “gtk-3.0″ under “~/.themes/Dream/gtk-3.0″. All the files we create will be inside this directory.

Now we will make a gtk.css file for our theme. This file is read by GTK and it can import additional CSS files. Commonly, the gtk.css file defines common colors used throughout the theme.

The colors can be defined with the @define-color rule. The colors defined like this are called symbolic colors. Defining symbolic colors has the advantage that if you want to change a color, you need to change it once, and the whole theme can adapt to it. Symbolic colors can be defined as rgb, hex etc. For example, if we want to define a symbolic color named @bg_color to be light grey, we can define it as follows,

@define-color bg_color #eee;

We can also have comments just like in CSS. Comments are ignored, but may be helpful to remember or explain things.

/* this is a comment */

So we will now define some symbolic colors which we can use throughout the theme.

/* default color scheme */
@define-color bg_color #cecece;
@define-color fg_color #3c3c3c;
@define-color base_color #fcfcfc;
@define-color text_color #000;
@define-color selected_bg_color #398ee7;
@define-color selected_fg_color #fff;
@define-color tooltip_bg_color #000;
@define-color tooltip_fg_color #e1e1e1;

/* colormap actually used by the theme, to be overridden in other css files */
@define-color theme_bg_color @bg_color;
@define-color theme_fg_color @fg_color;
@define-color theme_base_color @base_color;
@define-color theme_text_color @text_color;
@define-color theme_selected_bg_color @selected_bg_color;
@define-color theme_selected_fg_color @selected_fg_color;
@define-color theme_tooltip_bg_color @tooltip_bg_color;
@define-color theme_tooltip_fg_color @tooltip_fg_color;

/* misc colors used by gtk+ */
@define-color info_fg_color rgb (80, 80, 80);
@define-color info_bg_color rgb (250, 250, 130);
@define-color warning_fg_color rgb (255, 255, 255);
@define-color warning_bg_color rgb (255, 150, 80);
@define-color question_fg_color rgb (80, 80, 80);
@define-color question_bg_color rgb (150, 180, 230);
@define-color error_fg_color rgb (255, 255, 255);
@define-color error_bg_color rgb (200, 70, 50);
@define-color link_color #2c82dd;
@define-color error_color #cc0000;

As you can see, we have defined some colors with the theme prefix. This will make it easy to override the colors if we want to make a dark counterpart. More about that later.

Now save the file as gtk.css. Next we need to make another file which will contain all the widget styling. The reason is to keep separate types of things separate. We will create a new file named gtk-widgets.css. Then add the following line in gtk.css to import the file.

@import url(“gtk-widgets.css”);

First, we need to add some default styling, such as the theme engine, some GTK properties and basic styles.

/* default */
* {
engine: none;

border-width: 1px;
background-clip: padding-box;

-GtkArrow-arrow-scaling: 0.5;
-GtkButton-child-displacement-x: 1;
-GtkButton-child-displacement-y: 1;
-GtkButton-default-border: 0;
-GtkButton-image-spacing: 0;
-GtkButton-interior-focus: true;
-GtkButton-inner-border: 1;
-GtkCheckButton-indicator-size: 15;
-GtkCheckMenuItem-indicator-size: 12;
-GtkEntry-inner-border: 1;
-GtkEntry-progress-border: 0;
-GtkExpander-expander-size: 12;
-GtkHTML-link-color: @link_color;
-GtkIMHtml-hyperlink-color: @link_color;
-GtkMenu-horizontal-padding: 0;
-GtkMenu-vertical-padding: 0;
-GtkMenuBar-internal-padding: 0;
-GtkMenuItem-arrow-scaling: 0.4;
-GtkNotebook-initial-gap: 0;
-GtkNotebook-tab-overlap: -2;
-GtkPaned-handle-size: 1;
-GtkProgressBar-min-horizontal-bar-height: 10;
-GtkProgressBar-min-vertical-bar-width: 10;
-GtkRange-slider-width: 9;
-GtkRange-stepper-size: 0;
-GtkRange-stepper-spacing: 0;
-GtkRange-trough-border: 3;
-GtkRange-trough-under-steppers: 1;
-GtkScale-trough-border: 1;
-GtkScrollbar-activate-slider: 1;
-GtkScrollbar-trough-border: 1;
-GtkScrollbar-slider-width: 15;
-GtkScrollbar-min-slider-length: 50;
-GtkScrolledWindow-scrollbar-spacing: 0;
-GtkScrolledWindow-scrollbars-within-bevel: 1;
-GtkSeparatorMenuItem-horizontal-padding: 0;
-GtkStatusbar-shadow-type: none;
-GtkTextView-error-underline-color: @error_color;
-GtkToolButton-icon-spacing: 6;
-GtkToolItemGroup-expander-size: 11;
-GtkToolbar-internal-padding: 0;
-GtkTreeView-expander-size: 11;
-GtkTreeView-vertical-separator: 0;
-GtkWidget-wide-separators: true;
-GtkWidget-separator-width: 1;
-GtkWidget-separator-height: 1;
-GtkWidget-focus-padding: 0;
-GtkWidget-focus-line-width: 1;
-GtkWidget-link-color: @link_color;
-GtkWidget-visited-link-color: @link_color;
-GtkWindow-resize-grip-width: 13;
-GtkWindow-resize-grip-height: 13;
-WnckTasklist-fade-overlay-rect: 0;
}

GtkWindow {
color: @theme_fg_color;
}

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

/**********
* states *
**********/
*:insensitive {
color: mix (@theme_fg_color, @theme_bg_color, 0.4);
text-shadow: 1 1 alpha (@theme_base_color, 0.4);
}

*:active {
background-color: shade (@theme_bg_color, 0.9);
}

*:active:hover:insensitive {
}

*:active:insensitive {
}

*:hover {
}

*:hover:insensitive {
}

*:selected,
*:selected:focus {
background-color: alpha (@theme_selected_bg_color, 0.9);
color: @theme_selected_fg_color;
}

The first block of style is applied to *, which means it is universal and every other widgets will inherit the properties.

As you can see, we have specified the engine as none, that means we want to use the built-in theme engine. Of course, you can use another engine like adwaita. But if we start with the default engine, we can easily extend it to use any other engine easily.

Then there are some basic properties for all widgets like border-width and background-clip. We have border-width as 1px, which means, if you want a widget to have a border different than 1px, then you’ll have to specify that.

Next are some GTK properties which control the appearance of some widgets, similar to in GTK2. Most are self explanatory. You can experiment with different values and see the results.

Then we have some basic styling, like the text color for the GtkWindow widget, and styles for different states.

Here is what we have till now,

Not pretty, but we will surely make it pretty :D Let’s stop it here today, and we will continue in the next post.

In case you are wondering about the theme we are using in this example, it is Greybird.

Part 1 | Part 3 | Part 4