Modifying menu color of a gtk 3.0 theme

Question

I'm trying to integrate a GTK3.0 theme with xfwm4 theme,

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?

EDIT

Faience GTK3.0 theme

ZukiMac xfwm4 theme

Answer 1

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: