| 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 |