Making GTK3 themes – Part 3: The dark side

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

So in the last post we went through the basics of the gtk.css and gtk.widgets.css files. Customizing the CSS file is up-to you. Pickup your Favorite theme and start hacking. The syntax will be familiar if you know CSS.

Now that our theme is ready, we might want to add support for new GTK3 features like a dark theme. GTK3 applications can ask for a dark theme, and if you have defined a dark color scheme for your theme, then it will be used instead of the default color scheme.

It works this way, you add a new file named gtk-dark.css in the gtk-3.0 directory and define colors in it. It is then automatically picked up by GTK if an application asks for a dark theme.

So if we have the gtk.css file like the one in the previous post, our gtk-dark.css file may look like below,

/* dark colormap */
@define-color theme_bg_color #333;
@define-color theme_fg_color #eee;
@define-color theme_base_color #555;
@define-color theme_text_color #fff;
@define-color theme_selected_bg_color #398ee7;
@define-color theme_selected_fg_color #fff;
@define-color theme_tooltip_bg_color #000;
@define-color theme_tooltip_fg_color #e1e1e1;

/* 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;

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

Now test the dark theme by launching an application like Totem or EOG.

Don’t hesitate to comment below if experience any problems. Happy theming.

Part 1 | Part 2 | Part 4