Barebones GTK Theme

The place to post your Salix wallpapers, screenshots etc.
Post Reply
User avatar
knome
Donor
Posts: 163
Joined: 20. Dec 2012, 19:36
Location: UK

Barebones GTK Theme

Post by knome »

Here is a barebones, minimally configured GTK2/3 theme using the Xfce gtk engine. The GTK2 theme is based on a universal "gradient" and the matching GTK3 theme is based on a "plain" fill. I can't get the two themes to match any better without a lot of extra widget configuration in one or the other so they are as is. I haven't come across any apps where they don't work well but, no doubt, they'll not work for everything.

Xfce-barebones-blue gtkrc for GTK2

Code: Select all

style "default"
{
    xthickness = 2
    ythickness = 2

    base[ACTIVE]      = "#fcfcfb"
    base[INSENSITIVE] = "#fafaf9"
    base[NORMAL]      = "#fcfcfb"
    base[PRELIGHT]    = "#ddeeff"
    base[SELECTED]    = "#ddeeff"

    bg[ACTIVE]        = "#f0f0ef"
    bg[INSENSITIVE]   = "#fcfcfb"
    bg[NORMAL]        = "#fafaf9"
    bg[PRELIGHT]      = "#ddeeff"
    bg[SELECTED]      = "#99ccff"

    fg[ACTIVE]        = "#000000"
    fg[INSENSITIVE]   = "#999998"
    fg[NORMAL]        = "#000000"
    fg[PRELIGHT]      = "#000000"
    fg[SELECTED]      = "#000000"

    text[ACTIVE]      = "#000000"
    text[INSENSITIVE] = "#000000"
    text[NORMAL]      = "#000000"
    text[PRELIGHT]    = "#000000"
    text[SELECTED]    = "#000000"

    engine "xfce"
    {
        smooth_edge = true
        boxfill
        {
            fill_style = gradient
            orientation = auto
            shade_start = 0.90
            shade_end = 1.05
        }
    }
}

style "tooltips" = "default"
{
    bg[NORMAL] = "#ffeedd"
}

widget_class "*"                  style "default"
widget "gtk-tooltip*"              style "tooltips"
Xfce-barebones-blue gtk.css for GTK3

Code: Select all

@define-color fg_active #000000;
@define-color fg_insensitive #999998;
@define-color fg_normal #000000;
@define-color fg_prelight #000000;
@define-color fg_selected #000000;

@define-color bg_active #f0f0ef;
@define-color bg_insensitive #fcfcfb;
@define-color bg_normal #fafaf9;
@define-color bg_prelight #ddeeff;
@define-color bg_selected #99ccff;

@define-color base_active #fcfcfb;
@define-color base_insensitive #fafaf9;
@define-color base_normal #fcfcfb;
@define-color base_prelight #ddeeff;
@define-color base_selected #ddeeff;

@define-color text_active #000000;
@define-color text_insensitive #000000;
@define-color text_normal #000000;
@define-color text_prelight #000000;
@define-color text_selected #000000;

@define-color bg_tooltip #ffeedd;

* {
    engine: xfce;
    -xfce-smooth-edge: true;

    padding: 1px;
    color: @fg_normal;
    background: @bg_normal;
    border-color: darker(@bg_normal);
    border-style: groove;
    border-width: 2px;
}
        
GtkWindow {
    background: @base_normal;   
}
    
*:active {
    color: @fg_active;
    background: @bg_active;
    border-color: darker(@bg_active); 
}

*:insensitive {
    color: @fg_insensitive;
    background: @bg_insensitive;
    border-color: darker(@bg_insensitive);
}

*:hover {
    color: @fg_prelight;
    background: @bg_prelight;
    border-color: darker(@bg_prelight);
}

*:selected {
    color: @fg_selected;
    background: @bg_selected;
    border-color: darker(@bg_selected);
}

.tooltip {
    color: @fg_normal;
    background: @bg_tooltip;
    border-color: darker(@bg_tooltip);
}
Xfce-barebones-purple gtkrc for GTK2

Code: Select all

style "default"
{
    xthickness = 2
    ythickness = 2

    base[ACTIVE]      = "#fbfcfb"
    base[INSENSITIVE] = "#f9faf9"
    base[NORMAL]      = "#fbfcfb"
    base[PRELIGHT]    = "#eeddff"
    base[SELECTED]    = "#eeddff"

    bg[ACTIVE]        = "#eff0ef"
    bg[INSENSITIVE]   = "#fbfcfb"
    bg[NORMAL]        = "#f9faf9"
    bg[PRELIGHT]      = "#eeddff"
    bg[SELECTED]      = "#cc99ff"

    fg[ACTIVE]        = "#000000"
    fg[INSENSITIVE]   = "#989998"
    fg[NORMAL]        = "#000000"
    fg[PRELIGHT]      = "#000000"
    fg[SELECTED]      = "#000000"

    text[ACTIVE]      = "#000000"
    text[INSENSITIVE] = "#000000"
    text[NORMAL]      = "#000000"
    text[PRELIGHT]    = "#000000"
    text[SELECTED]    = "#000000"

    engine "xfce"
    {
        smooth_edge = true
        boxfill
        {
            fill_style = gradient
            orientation = auto
            shade_start = 0.90
            shade_end = 1.05
        }
    }
}

style "tooltips" = "default"
{
    bg[NORMAL] = "#ffeedd"
}

widget_class "*"                  style "default"
widget "gtk-tooltip*"              style "tooltips"
Xfce-barebones-purple gtk.css for GTK3

Code: Select all

@define-color fg_active #000000;
@define-color fg_insensitive #989998;
@define-color fg_normal #000000;
@define-color fg_prelight #000000;
@define-color fg_selected #000000;

@define-color bg_active #eff0ef;
@define-color bg_insensitive #fbfcfb;
@define-color bg_normal #f9faf9;
@define-color bg_prelight #eeddff;
@define-color bg_selected #cc99ff;

@define-color base_active #fbfcfb;
@define-color base_insensitive #f9faf9;
@define-color base_normal #fbfcfb;
@define-color base_prelight #eeddff;
@define-color base_selected #eeddff;

@define-color text_active #000000;
@define-color text_insensitive #000000;
@define-color text_normal #000000;
@define-color text_prelight #000000;
@define-color text_selected #000000;

@define-color bg_tooltip #ffeedd;

* {
    engine: xfce;
    -xfce-smooth-edge: true;

    padding: 1px;
    color: @fg_normal;
    background: @bg_normal;
    border-color: darker(@bg_normal);
    border-style: groove;
    border-width: 2px;
}
        
GtkWindow {
    background: @base_normal;   
}
    
*:active {
    color: @fg_active;
    background: @bg_active;
    border-color: darker(@bg_active); 
}

*:insensitive {
    color: @fg_insensitive;
    background: @bg_insensitive;
    border-color: darker(@bg_insensitive);
}

*:hover {
    color: @fg_prelight;
    background: @bg_prelight;
    border-color: darker(@bg_prelight);
}

*:selected {
    color: @fg_selected;
    background: @bg_selected;
    border-color: darker(@bg_selected);
}

.tooltip {
    color: @fg_normal;
    background: @bg_tooltip;
    border-color: darker(@bg_tooltip);
}
To install them create /gtk-2.0/gtkrc and /gtk-3.0/gtk.css in a suitably named folder either in your home .themes folder and/or in usr/share/themes.

Screenshot showing Thunar(GTK2), Geany(GTK2) and Brasero(GTK3)...

Image
Image
User avatar
gapan
Salix Wizard
Posts: 6236
Joined: 6. Jun 2009, 17:40

Re: Barebones GTK Theme

Post by gapan »

I had overlooked this until a spammer posted in this thread and I had to clean it up. :D

Not bad at all. Thanks!
Image
Image
Post Reply