Note that you can't yet submit static WebExtension-based themes to addons.mozilla.org. The work to support this is tracked in https://github.com/mozilla/addons/issues/501. If you want to share a theme with other users, you'll need to make it either a lightweight theme or a dynamic theme.
型 | Object |
---|---|
必須 | いいえ |
例 |
|
theme キーを使って Firefox に適用する静的なテーマを定義します。
If your manifest.json file includes the theme key, the extension is assumed to be a theme and any other WebExtension keys are ignored. If you want to include a theme with an extension, please see the theme
API.
画像フォーマット
下記の画像フォーマットはすべての画像プロパティでサポートされています:
- JPEG
- PNG
- APNG
- SVG (アニメSVG は Firefox 59からサポートされています)
- GIF (アニメ GIF はサポートされません)
構文
theme キーは次のプロパティを取るオブジェクトです:
名前 | 型 | 説明 |
---|---|---|
images |
Object |
Firefox 60 以降ではオプション。Firefox 60より前では必須。 A JSON object whose properties represent the images to display in various parts of the browser. See |
colors |
Object |
必須。 A JSON object whose properties represent the colors of various parts of the browser. See |
properties |
Object |
オプション This object has two properties that affect how the
|
images
All URLs are relative to the manifest.json file and cannot reference an external URL.
Images should be 200 pixels high to ensure they always fill the header space vertically.
名前 | 型 | 説明 |
---|---|---|
headerURL |
String |
Fully optional from Firefox 60 onwards. One of theme_frame or headerURL had to be specified before Firefox 60. Note also that in Firefox 60 onwards, any The URL of a foreground image to be added to the header area and anchored to the upper right corner of the header area. |
theme_frame |
String |
Fully optional from Firefox 60 onwards. One of theme_frame or headerURL had to be specified before Firefox 60. Alias for |
additional_backgrounds |
Array of String |
オプション An array of URLs for additional background images to be added to the header area and displayed behind the 既定では all images are anchored to the upper right corner of the header area, but their alignment and repeat behavior can be controlled by properties of |
colors
These properties define the colors used for different parts of the browser. They are all optional except "accentcolor"
and "textcolor"
where either those properties or their chrome counterparts have to be specified.
All these properties can be specified as either a string containing any valid CSS color string (including hexadecimal), or an RGB array, such as "tab_text": [ 107 , 99 , 23 ]
. But note that in Chrome, colors may only be specified as an RGB array.
See the example screenshot below to understand the parts of the browser UI that are affected by these properties.
名前 | 説明 |
---|---|
accentcolor |
The color of the header area background, displayed in the part of the header not covered or visible through the images specified in See example
|
button_background_active |
The color of the background of the pressed toolbar buttons. See example
|
button_background_hover |
The color of the background of the toolbar buttons on hover. See example
|
icons |
The color of toolbar icons. See example
|
icons_attention |
The color of toolbar icons in attention state such as the starred bookmark icon or finished download icon. See example
|
popup |
The background color of popups (such as the url bar dropdown and the arrow panels). See example
|
popup_border |
The border color of popups. See example
|
popup_highlight |
The background color of items highlighted using the keyboard inside popups (such as the selected url bar dropdown item). See example
|
popup_highlight_text |
The text color of items highlighted using the keyboard inside popups. See example
|
popup_text |
The text color of popups. See example
|
tab_line |
The color of the selected tab line. See example
|
tab_loading |
The color of the tab loading indicator and the tab loading burst. See example
![]() |
tab_selected |
The background color of the selected tab. See example
|
tab_text |
From Firefox 59, it represents the text color for the selected tab. From Firefox 55 to 58, it is the same as See example
|
textcolor |
The color of the text displayed in the header area. See example
|
toolbar |
The background color for the navigation bar, the bookmarks bar, and the selected tab. See example
|
toolbar_bottom_separator |
The color of the line separating the bottom of the toolbar from the region below. See example
|
toolbar_field |
The background color for fields in the toolbar, such as the URL bar. See example
|
toolbar_field_border |
The border color for fields in the toolbar. See example
|
toolbar_field_border_focus |
The focused border color for fields in the toolbar. See example
|
toolbar_field_focus |
The focused background color for fields in the toolbar, such as the URL bar. See example
|
toolbar_field_text |
The color of text in fields in the toolbar, such as the URL bar. See example
|
toolbar_field_text_focus |
The color of text in focused fields in the toolbar, such as the URL bar. See example
|
toolbar_field_separator |
The color of separators inside the URL bar. In Firefox 58 this was implemented as See example
In this screenshot, |
toolbar_text |
The color of toolbar text. See example
|
toolbar_top_separator |
The color of the line separating the top of the toolbar from the region above. See example
|
toolbar_vertical_separator |
The color of the separator next to the application menu icon. In Firefox 58, it corresponds to the color of separators inside the URL bar. See example
|
Aliases
Additionally, this key accepts various properties that are aliases for one of the properties above. These are provided for compatibility with Chrome. If an alias is given, and the non-alias version is also given, then the value will be taken from the non-alias version.
名前 | Alias for |
---|---|
bookmark_text |
toolbar_text |
frame |
accentcolor |
frame_inactive |
accentcolor |
tab_background_text |
textcolor |
properties
名前 | 型 | 説明 |
---|---|---|
additional_backgrounds_alignment |
|
Optional. An array of enumeration values defining the alignment of the corresponding
If not specified, defaults to |
additional_backgrounds_tiling |
|
Optional. An array of enumeration values defining how the corresponding
If not specified, defaults to |
例
A basic theme must define an image to add to the header, the accent color to use in the header, and the color of text used in the header:
"theme": {
"images": {
"headerURL": "images/sun.jpg"
},
"colors": {
"accentcolor": "#CF723F",
"textcolor": "#000"
}
}
Multiple images can be used to fill the header, using a blank/transparent header image to gain control over the placement of each visible image:
"theme": {
"images": {
"headerURL": "images/blank.png",
"additional_backgrounds": [ "images/left.png" , "images/middle.png", "images/right.png"]
},
"properties": {
"additional_backgrounds_alignment": [ "left top" , "top", "right top"]
},
"colors": {
"accentcolor": "blue",
"textcolor": "#ffffff"
}
}
You can also fill the header with a repeating image, or images, in this case a single image anchored in the middle top of the header and repeated across the rest of the header:
"theme": {
"images": {
"headerURL": "images/blank.png",
"additional_backgrounds": [ "images/logo.png"]
},
"properties": {
"additional_backgrounds_alignment": [ "top" ],
"additional_backgrounds_tiling": [ "repeat" ]
},
"colors": {
"accentcolor": "green",
"textcolor": "#000"
}
}
The following example uses most of the different values for theme.colors
:
"theme": {
"images": {
"headerURL": "weta.png"
},
"colors": {
"accentcolor": "darkgreen",
"textcolor": "white",
"toolbar": "blue",
"toolbar_text": "cyan",
"toolbar_field": "orange",
"toolbar_field_border": "white",
"toolbar_field_text": "green",
"toolbar_top_separator": "red",
"toolbar_bottom_separator": "white",
"toolbar_vertical_separator": "white"
}
}
It will give you a browser that looks something like this:
In this screenshot, "toolbar_vertical_separator"
is the white vertical line in the URL bar dividing the Reader Mode icon from the other icons.
ブラウザー実装状況
BCD tables only load in the browser
The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Chrome compatibility
Firefox property | Chrome property |
---|---|
images/headerURL |
In Chrome, the image is anchored to the top left of the header and tiled if it doesn’t fill the header area. |
images/additional_backgrounds |
Not supported |
colors/accentcolor |
colors/frame |
colors/textcolor |
Incorrectly implemented as colors/tab_text from Firefox 55 to 58, fixed as colors/tab_background_text from Firefox 59 onward |
colors/toolbar_text |
colors/bookmark_text |
properties/additional_backgrounds_alignment |
Not supported |
properties/additional_backgrounds_tiling |
Not supported |
In Chrome, all colors must be specified as an array of RGB values, like this:
"theme": {
"colors": {
"frame": [255, 0, 0],
"tab_background_text": [0, 255, 0],
"bookmark_text": [0, 0, 255]
}
}
From Firefox 59 onward, both the array form and the CSS color form are accepted for all properties. Before that, colors/frame
and colors/tab_text
required the array form, while other properties required the CSS color form.