1# Linux GTK Theme Integration 2 3The GTK+ port of Chromium has a mode where we try to match the user's GTK theme 4(which can be enabled under Settings -> Appearance -> Use GTK+ theme). 5 6## How Chromium determines which colors to use 7 8GTK3 added a new CSS theming engine which gives fine-tuned control over how 9widgets are styled. Chromium's themes, by contrast, are much simpler: it is 10mostly a list of about 80 colors (see //src/ui/native_theme/native_theme.h) 11overridden by the theme. Chromium usually doesn't use GTK to render entire 12widgets, but instead tries to determine colors from them. 13 14Chromium needs foreground, background and border colors from widgets. The 15foreground color is simply taken from the CSS "color" property. Backgrounds and 16borders are complicated because in general they might have multiple gradients or 17images. To get the color, Chromium uses GTK to render the background or border 18into a 24x24 bitmap and uses the average color for theming. This mostly gives 19reasonable results, but in case theme authors do not like the resulting color, 20they have the option to theme Chromium widgets specially. 21 22## Note to GTK theme authors: How to theme Chromium widgets 23 24Every widget Chromium uses will have a "chromium" style class added to it. For 25example, a textfield selector might look like: 26 27``` 28.window.background.chromium .entry.chromium 29``` 30 31If themes want to handle Chromium textfields specially, for GTK3.0 - GTK3.19, 32they might use: 33 34``` 35/* Normal case */ 36.entry { 37 color: #ffffff; 38 background-color: #000000; 39} 40 41/* Chromium-specific case */ 42.entry.chromium { 43 color: #ff0000; 44 background-color: #00ff00; 45} 46``` 47 48For GTK3.20 or later, themes will as usual have to replace ".entry" with 49"entry". 50 51The list of CSS selectors that Chromium uses to determine its colors is in 52//src/ui/gtk/native_theme_gtk.cc. 53