You Got A Question? Ask    GNOME Community!

gtk-theme2
 11313   |  Oct 25
gtk_logo2
 9458   |  Mar 17
arch
 7762   |  Mar 28

Making GTK3 themes – Part 3: The dark side

This post was made with an older stylesheet

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


 
  We can't watch comments unless G+ provides an API or if you send a notification, e.g +World Of Gnome
     Sometimes is better to place your questions on GNOME Community