Take the 2-minute tour ×
Unix & Linux Stack Exchange is a question and answer site for users of Linux, FreeBSD and other Un*x-like operating systems.. It's 100% free, no registration required.

I'm trying to integrate a GTK3.0 theme with xfwm4 theme, enter image description here

Now I need to change the menu background color, so I get the color value with gcolor and tried to grep for that value, nothing found under the gtk-3.0 folder.

What's the right way of doing it?


Faience GTK3.0 theme

ZukiMac xfwm4 theme

share|improve this question
Could you post the link to the said GTK+3 theme ? –  don_crissti Nov 18 '12 at 12:30
@don_crissti edited question –  warl0ck Nov 18 '12 at 13:24

1 Answer 1

up vote 3 down vote accepted

The right way is to read the gtk-*.css files and figure it out... Gtk+3 theming allows you to play with colors in various ways:

You can either use the hex, rgb or rgba values to represent colors, or you can use the symbolic colors which are defined in the gtk.css file prefixed by a @ symbol. You can also manipulate the colors using alpha, shade, mix etc. for adding transparency, darkening the color and mixing two colors respectively.

So, in your particular case - Faience GTK, the files in question are gtk-main.css and gtk-widgets.css (the latter usually references colors defined in the former).
In gtk-widgets.css line 994 (the menubar section) you have:

background-color: @toolbar_gradient_start;

means the menu background color is toolbar_gradient_start defined in gtk-main.css line 44:

@define-color toolbar_gradient_start shade (@theme_bg_color, 0.85);

So toolbar_gradient_start is a shade of theme_bg_color, defined on line 2 as #eeeeee. If you open gcolor2 and enter #eeeeee you'll get the rgb code (238,238,238). As per the above color definition, 0.85 shade means rgb (203,203,203) which in hex is #CBCBCB which is exactly what gcolor2 reports if I use the color picker on the menubar in your screenshot.

So basically, the color you are after is a shade of the main gtk theme background color defined in gtk-main.css. Altering the color definition would change the color, e.g. (I commented out the original code):

@define-color toolbar_gradient_start #f05959;
@define-color toolbar_gradient_end #e9a2a2;
/* @define-color toolbar_gradient_start shade (@theme_bg_color, 0.85);
@define-color toolbar_gradient_end shade (@theme_bg_color, 0.75); */

would make the menubar look like this:

enter image description here

share|improve this answer
Good, now I have everything look the same ;-P –  warl0ck Nov 19 '12 at 0:36

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.