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