├── LICENSE └── README.md /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2017 Sam Bostock 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Google Chrome Theme Guide 2 | 3 | ## Introduction 4 | 5 | I wanted to make a simple Chrome Theme. The docs sucked, so I decided to make my own. 6 | 7 | ## Overview 8 | 9 | _Themes_ are basically just _Extensions_ which don't package in any HTML or JavaScript. All you need is a directory with a `manifest.json` file (describing the theme), and an optional `/images` subdirectory. The whole thing gets packaged up as a glorified _ZIP_ file. 10 | 11 | ## Boilerplate 12 | 13 | There are a couple values which need to be included in `manifest.json`: 14 | 15 | ```javascript 16 | { 17 | "manifest_version": 2, // Manifest format version 18 | "version": "0.1", // Theme version 19 | 20 | "name": "My Awesome Theme" 21 | "description": "An awesome theme, for awesome people", 22 | 23 | // ... 24 | } 25 | ``` 26 | 27 | ## Colors 28 | 29 | Colors for various portions of the UI are described under the `colors` property: 30 | 31 | ```javascript 32 | { 33 | // ... 34 | "colors": { 35 | "frame_incognito_inactive": [0, 123, 255] 36 | } 37 | // ... 38 | } 39 | ``` 40 | 41 | Property | Source ID Constant | Notes 42 | --- | --- | -- 43 | `frame` | `ThemeProperties::COLOR_FRAME` | 44 | `frame_inactive` | `ThemeProperties::COLOR_FRAME_INACTIVE` | 45 | `frame_incognito` | `ThemeProperties::COLOR_FRAME_INCOGNITO` | 46 | `frame_incognito_inactive` | `ThemeProperties::COLOR_FRAME_INCOGNITO_INACTIVE` | 47 | `toolbar` | `ThemeProperties::COLOR_TOOLBAR` | 48 | `tab_text` | `ThemeProperties::COLOR_TAB_TEXT` | 49 | `tab_background_text` | `ThemeProperties::COLOR_BACKGROUND_TAB_TEXT` | 50 | `bookmark_text` | `ThemeProperties::COLOR_BOOKMARK_TEXT` | 51 | `ntp_background` | `ThemeProperties::COLOR_NTP_BACKGROUND` | 52 | `ntp_text` | `ThemeProperties::COLOR_NTP_TEXT` | 53 | `ntp_link` | `ThemeProperties::COLOR_NTP_LINK` | 54 | `ntp_header` | `ThemeProperties::COLOR_NTP_HEADER` | 55 | `button_background` | `ThemeProperties::COLOR_BUTTON_BACKGROUND` | Appears unused 56 | 57 | ## Images 58 | 59 | Images can be used for certain portions of the UI. Their paths can be specified under the `images` property: 60 | 61 | ```javascript 62 | { 63 | // ... 64 | "images": { 65 | "theme_frame" : "images/theme_frame.png", 66 | } 67 | // ... 68 | } 69 | ``` 70 | 71 | Property | Source ID Constants | Notes 72 | --- | --- | --- 73 | `theme_frame` | `PRS_THEME_FRAME`, `IDR_THEME_FRAME` | 74 | `theme_frame_inactive` | `PRS_THEME_FRAME_INACTIVE`, `IDR_THEME_FRAME_INACTIVE` | 75 | `theme_frame_incognito` | `PRS_THEME_FRAME_INCOGNITO`, `IDR_THEME_FRAME_INCOGNITO` | 76 | `theme_frame_incognito_inactive` | `PRS_THEME_FRAME_INCOGNITO_INACTIVE`, `IDR_THEME_FRAME_INCOGNITO_INACTIVE` | 77 | `theme_toolbar` | `PRS_THEME_TOOLBAR`, `IDR_THEME_TOOLBAR` | 78 | `theme_tab_background` | `PRS_THEME_TAB_BACKGROUND`, `IDR_THEME_TAB_BACKGROUND` | 79 | `theme_tab_background_incognito` | `PRS_THEME_TAB_BACKGROUND_INCOGNITO`, `IDR_THEME_TAB_BACKGROUND_INCOGNITO` | Unsupported on macOS 80 | `theme_tab_background_v` | `PRS_THEME_TAB_BACKGROUND_V`, `IDR_THEME_TAB_BACKGROUND_V` | 81 | `theme_ntp_background` | `PRS_THEME_NTP_BACKGROUND`, `IDR_THEME_NTP_BACKGROUND` | 82 | `theme_frame_overlay` | `PRS_THEME_FRAME_OVERLAY`, `IDR_THEME_FRAME_OVERLAY` | 83 | `theme_frame_overlay_inactive` | `PRS_THEME_FRAME_OVERLAY_INACTIVE`, `IDR_THEME_FRAME_OVERLAY_INACTIVE` | 84 | `theme_button_background` | `PRS_THEME_BUTTON_BACKGROUND`, `IDR_THEME_BUTTON_BACKGROUND` | 85 | `theme_ntp_attribution` | `PRS_THEME_NTP_ATTRIBUTION`, `IDR_THEME_NTP_ATTRIBUTION` | 86 | `theme_window_control_background` | `PRS_THEME_WINDOW_CONTROL_BACKGROUND`, `IDR_THEME_WINDOW_CONTROL_BACKGROUND` | 87 | 88 | ## Properties 89 | 90 | Some UI elements accept additional properties, specified under the `properties` property: 91 | 92 | ```javascript 93 | { 94 | // ... 95 | "properties": { 96 | "ntp_background_repeat": true 97 | } 98 | // ... 99 | } 100 | ``` 101 | 102 | Property | Source ID Constant 103 | --- | --- 104 | `ntp_background_alignment` | `ThemeProperties::NTP_BACKGROUND_ALIGNMENT` 105 | `ntp_background_repeat` | `ThemeProperties::NTP_BACKGROUND_TILING` 106 | `ntp_logo_alternate` | `ThemeProperties::NTP_LOGO_ALTERNATE` 107 | 108 | ## Tints 109 | 110 | Tints can be applied to some UI elements, and are specified under the `tints` property, in _Hue-Saturation-Lightness_ format: 111 | 112 | ```javascript 113 | { 114 | // ... 115 | "tints": { 116 | "frame_incognito_inactive": [0, 0.5, 0.5] 117 | } 118 | // ... 119 | } 120 | ``` 121 | 122 | Property | Source ID Constant 123 | --- | --- 124 | `buttons` | `ThemeProperties::TINT_BUTTONS` 125 | `frame` | `ThemeProperties::TINT_FRAME` 126 | `frame_inactive` | `ThemeProperties::TINT_FRAME_INACTIVE` 127 | `frame_incognito` | `ThemeProperties::TINT_FRAME_INCOGNITO` 128 | `frame_incognito_inactive` | `ThemeProperties::TINT_FRAME_INCOGNITO_INACTIVE` 129 | `background_tab` | `ThemeProperties::TINT_BACKGROUND_TAB` 130 | --------------------------------------------------------------------------------