OLD | NEW |
1 # Linux GTK Theme Integration | 1 # Linux GTK Theme Integration |
2 | 2 |
3 The GTK+ port of Chromium has a mode where we try to match the user's GTK theme | 3 The 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). | 4 (which can be enabled under Settings -> Appearance -> Use GTK+ theme). |
5 | 5 |
6 # GTK3 | 6 # GTK3 |
7 | 7 |
8 At some point after version 57, Chromium will switch to using the GTK3 theme by | 8 At some point after version 57, Chromium will switch to using the GTK3 theme by |
9 default. | 9 default. |
10 | 10 |
11 ## How Chromium determines which colors to use | 11 ## How Chromium determines which colors to use |
12 | 12 |
13 GTK3 added a new CSS theming engine which gives fine-tuned control over how | 13 GTK3 added a new CSS theming engine which gives fine-tuned control over how |
14 widgets are styled. Chromium's themes, by contrast, are much simpler: it is | 14 widgets are styled. Chromium's themes, by contrast, are much simpler: it is |
15 mostly a list of about 80 colors (see //src/ui/native_theme/native_theme.h) | 15 mostly a list of about 80 colors (see //src/ui/native_theme/native_theme.h) |
16 overridden by the theme. Chromium usually doesn't use GTK to render entire | 16 overridden by the theme. Chromium usually doesn't use GTK to render entire |
17 widgets, but instead tries to determine colors from them. | 17 widgets, but instead tries to determine colors from them. |
18 | 18 |
19 There are three types of colors Chromium needs from widgets: | 19 Chromium needs foreground, background and border colors from widgets. The |
20 | 20 foreground color is simply taken from the CSS "color" property. Backgrounds and |
21 * Foreground color: determined by the CSS "color" property | 21 borders are complicated because in general they might have multiple gradients or |
22 * Background color: determined by the CSS "background-color" and "background-ima
ge" properties | 22 images. To get the color, Chromium uses GTK to render the background or border |
23 * Border color: determined by the "border-color", "border-image", | 23 into a 24x24 bitmap and uses the average color for theming. This mostly gives |
24 "border-style", and "border-width" properties | 24 reasonable results, but in case theme authors do not like the resulting color, |
25 | 25 they have the option to theme Chromium widgets specially. |
26 Backgrounds and borders are complicated because in general they might have | |
27 multiple gradients or images. To get the color, Chromium uses GTK to render the | |
28 background or border into a single pixel and uses the resulting color for | |
29 theming. This mostly gives reasonable results, but in case theme authors do not | |
30 like the resulting color, they have the option to theme Chromium widgets | |
31 specially. | |
32 | 26 |
33 ## Note to GTK theme authors: How to theme Chromium widgets | 27 ## Note to GTK theme authors: How to theme Chromium widgets |
34 | 28 |
35 Every widget Chromium uses will have a "chromium" style class added to it. For | 29 Every widget Chromium uses will have a "chromium" style class added to it. For |
36 example, a texfield selector might look like: | 30 example, a textfield selector might look like: |
37 | 31 |
38 ``` | 32 ``` |
39 .window.background.chromium .entry.chromium | 33 .window.background.chromium .entry.chromium |
40 ``` | 34 ``` |
41 | 35 |
42 If themes want to handle Chromium textfields specially, for GTK3.0 - GTK3.19, | 36 If themes want to handle Chromium textfields specially, for GTK3.0 - GTK3.19, |
43 they might use: | 37 they might use: |
44 | 38 |
45 ``` | 39 ``` |
46 /* Normal case */ | 40 /* Normal case */ |
47 .entry { | 41 .entry { |
48 color: #ffffff; | 42 color: #ffffff; |
49 background-color: #000000; | 43 background-color: #000000; |
50 } | 44 } |
51 | 45 |
52 /* Chromium-specific case */ | 46 /* Chromium-specific case */ |
53 .entry.chromium { | 47 .entry.chromium { |
54 color: #ff0000; | 48 color: #ff0000; |
55 background-color: #00ff00; | 49 background-color: #00ff00; |
56 } | 50 } |
57 ``` | 51 ``` |
58 | 52 |
59 For GTK3.20 or later, themes will as usual have to replace ".entry" with | 53 For GTK3.20 or later, themes will as usual have to replace ".entry" with |
60 "entry". | 54 "entry". |
61 | 55 |
62 Additional requirements for border colors to be picked up: | |
63 | |
64 * Must have a border-style that is not none. | |
65 * Must have a border-width that is nonzero. | |
66 | |
67 The list of CSS selectors that Chromium uses to determine its colors is in | 56 The list of CSS selectors that Chromium uses to determine its colors is in |
68 //src/chrome/browser/ui/libgtkui/native_theme_gtk3.cc. | 57 //src/chrome/browser/ui/libgtkui/native_theme_gtk3.cc. |
69 | 58 |
70 # GTK2 | 59 # GTK2 |
71 | 60 |
72 Chromium's GTK2 theme will soon be deprecated, and this section will be removed. | 61 Chromium's GTK2 theme will soon be deprecated, and this section will be removed. |
73 | 62 |
74 ## Describing the previous heuristics | 63 ## Describing the previous heuristics |
75 | 64 |
76 The heuristics often don't pick good colors due to a lack of information in the | 65 The heuristics often don't pick good colors due to a lack of information in the |
(...skipping 112 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
189 | 178 |
190 `MetaFrames` is a class that was used in metacity to communicate color | 179 `MetaFrames` is a class that was used in metacity to communicate color |
191 information to the window manager. During the Hardy Heron days, we slurped up | 180 information to the window manager. During the Hardy Heron days, we slurped up |
192 the data and used it as a key part of our heuristics. At least on my Lucid Lynx | 181 the data and used it as a key part of our heuristics. At least on my Lucid Lynx |
193 machine, none of the GNOME GTK+ themes have `MetaFrames` styling. (As mentioned | 182 machine, none of the GNOME GTK+ themes have `MetaFrames` styling. (As mentioned |
194 above, several of the XFCE themes do, though.) | 183 above, several of the XFCE themes do, though.) |
195 | 184 |
196 Internally to chrome, our `ChromeGtkFrame` class inherits from `MetaFrames` | 185 Internally to chrome, our `ChromeGtkFrame` class inherits from `MetaFrames` |
197 (again, which inherits from `GtkWindow`) so any old themes that style the | 186 (again, which inherits from `GtkWindow`) so any old themes that style the |
198 `MetaFrames` class are backwards compatible. | 187 `MetaFrames` class are backwards compatible. |
OLD | NEW |