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

  • @don_crissti edited question – daisy Nov 18 '12 at 13:24

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

  • Good, now I have everything look the same ;-P – daisy Nov 19 '12 at 0:36

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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