| 类型 |
对象
|
|---|---|
| Mandatory | No |
| 范例 |
|
Use the theme key to define a static theme to apply to Firefox.
注意：
If you want to include a theme with an extension, please see the
theme
API。
注意： Since May 2019, themes need to be signed to be installed ( bug 1545109 ). See Signing and distributing your add-on 了解更多细节。
注意： A new version of Firefox for Android, based on GeckoView, is under development. A pre-release version is available. The pre-release version does not support themes.
The following image formats are supported in all theme image properties:
The theme key is an object that takes the following properties:
| 名称 | 类型 | 描述 |
|---|---|---|
图像
|
对象
|
Optional as of Firefox 60. Mandatory before Firefox 60.
A JSON object whose properties represent the images to display in
various parts of the browser. See
|
colors
|
对象
|
Mandatory.
A JSON object whose properties represent the colors of various parts
of the browser. See
|
properties
|
对象
|
可选
This object has two properties that affect how the
|
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
|
字符串
|
警告：
headerURL
has been removed in
Firefox 70. You will begin to get warnings in Firefox 65 and later
if you load a theme that uses this property. Use
theme_frame
代替。
The URL of a foreground image to be added to the header area and anchored to the upper right corner of the header area.
Optional in desktop Firefox from Firefox 60 onwards. One of
In Firefox for Android,
|
theme_frame
|
字符串
|
The URL of a foreground image to be added to the header area and
anchored to the upper right corner of the header area.
注意： Chrome anchors the image to the top left of the header and if the image doesn’t fill the header area tile the 图像。
Optional in desktop Firefox 60 onwards. One of
In Firefox for Android,
|
additional_backgrounds
|
数组
of
字符串
|
警告：
An array of URLs for additional background images to be added to the
header area and displayed behind the
Optional.
By default 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
|
These properties define the colors used for different parts of the browser. They are all optional (but note that
"accentcolor"
and
"textcolor"
were mandatory in Firefox before version 63). How these properties affect the Firefox UI is shown here:
|
注意： Where a component is affected by multiple color properties, the properties are listed in order of precedence.
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_background_text": [ 107 , 99 , 23 ]
.
注意： In Chrome, colors may only be specified as RGB arrays .
In Firefox for Android colors can be specified using:
Colors for Firefox for Android themes cannot be specified using color names.
| 名称 | 描述 |
|---|---|
accentcolor
|
警告：
accentcolor
has been removed
in Firefox 70. You will begin to get warnings in Firefox 65 and
later if you load a theme that uses this property. Use the
frame
特性代替。
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
|
bookmark_text
|
The color of text and icons in the bookmark and find bars. Also, if
tab_text
isn't defined it sets the color of the active
tab text and if
icons
isn't defined the color of the
toolbar icons. Provided as Chrome compatible alias for
toolbar_text
.
注意：
Ensure any color used contrasts well with
those used in
Where
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, excluding those in the find toolbar.
注意：
Ensure the color used contrasts well with
those used in
See example
|
icons_attention
|
The color of toolbar icons in attention state such as the starred
bookmark icon or finished download icon.
注意：
Ensure the color used contrasts well with
those used in
See example
|
frame
|
The color of the header area background, displayed in the part of the
header not covered or visible through the images specified in
"theme_frame"
and
"additional_backgrounds"
.
See example
|
frame_inactive
|
The color of the header area background when the browser window is
inactive, displayed in the part of the header not covered or visible
through the images specified in
"theme_frame"
and
"additional_backgrounds"
.
See example
|
ntp_background
|
The new tab page background color. See example
|
ntp_text
|
The new tab page text color.
注意：
Ensure the color used contrasts well with
that used in
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).
注意：
It's recommended to define
See example
|
popup_highlight_text
|
The text color of items highlighted inside popups.
注意：
Ensure the color used contrasts well with
that used in
See example
|
popup_text
|
The text color of popups.
注意：
Ensure the color used contrasts well with
that used in
See example
|
sidebar
|
The background color of the sidebar. See example
|
sidebar_border
|
The border and splitter color of the browser sidebar
See example
|
sidebar_highlight
|
The background color of highlighted rows in built-in sidebars
See example
|
sidebar_highlight_text
|
The text color of highlighted rows in sidebars.
注意：
Ensure the color used contrasts well with
that used in
See example
|
sidebar_text
|
The text color of sidebars.
注意：
Ensure the color used contrasts well with
that used in
See example
|
tab_background_separator
|
警告：
tab_background_separator
is
not supported starting with Firefox 89.
The color of the vertical separator of the background tabs. See example
|
tab_background_text
|
The color of the text displayed in the inactive page tabs. If
tab_text
or
bookmark_text
isn't specified,
applies to the active tab text.
注意：
Ensure the color used contrasts well with
those used in
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. When not in use selected tab
color is set by
frame
和
frame_inactive
.
See example
|
tab_text
|
From Firefox 59, it represents the text color for the selected tab. If
tab_line
isn't specified, it also defines the color of
the selected tab line.
注意：
Ensure the color used contrasts well with
those used in
From Firefox 55 to 58, it is incorrectly implemented as alias for
See example
|
textcolor
|
警告：
textcolor
has been removed in
Firefox 70. You will begin to get warnings in Firefox 65 and later
if you load a theme that uses this property. Use
tab_background_text
代替。
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.
This also sets the background color of the "Find" bar. 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. This also sets the background color of the Find in page 字段。 See example
|
toolbar_field_border
|
The border color for fields in the toolbar. This also sets the border color of the Find in page 字段。 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_highlight
|
The background color used to indicate the current selection of text in
the URL bar (and the search bar, if it's configured to be separate).
See example
在这里，
|
toolbar_field_highlight_text
|
The color used to draw text that's currently selected in the URL bar
(and the search bar, if it's configured to be separate box).
注意：
Ensure the color used contrasts well with
those used in
See example
在这里，
|
toolbar_field_separator
|
警告：
toolbar_field_separator
is
not supported starting with Firefox 89.
The color of separators inside the URL bar. In Firefox 58 this was
implemented as
See example
In this screenshot,
|
toolbar_field_text
|
The color of text in fields in the toolbar, such as the URL bar. This
also sets the color of text in the
Find in page
字段。
注意：
Ensure the color used contrasts well with
those used in
See example
|
toolbar_field_text_focus
|
The color of text in focused fields in the toolbar, such as the URL
bar.
注意：
Ensure the color used contrasts well with
those used in
See example
|
toolbar_text
|
The color of toolbar text. This also sets the color of text in the
"Find" bar.
注意：
For compatibility with Chrome, use the alias
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 in the bookmarks toolbar. In Firefox 58, it
corresponds to the color of separators inside the URL bar.
See example
|
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.
警告：
Beginning Firefox 70, the following properties are removed:
accentcolor
and
textcolor
。使用
frame
and
tab_background_text
instead. Using these values in themes loaded into Firefox 65 or later will raise warnings.
| 名称 | 别名化的 |
|---|---|
bookmark_text
|
toolbar_text
|
frame
|
accentcolor
|
frame_inactive
|
accentcolor
|
tab_background_text
|
textcolor
|
| 名称 | 类型 | 描述 |
|---|---|---|
additional_backgrounds_alignment
|
数组
of
字符串
|
Optional.
An array of enumeration values defining the alignment of the
corresponding
If not specified, defaults to
|
additional_backgrounds_tiling
|
数组
of
字符串
|
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": {
"theme_frame": "images/sun.jpg"
},
"colors": {
"frame": "#CF723F",
"tab_background_text": "#000"
}
}
Multiple images can be used to fill the header. Before Firefox version 60, use a blank or transparent header image to gain control over the placement of each additional image:
"theme": {
"images": {
"additional_backgrounds": [ "images/left.png" , "images/middle.png", "images/right.png"]
},
"properties": {
"additional_backgrounds_alignment": [ "left top" , "top", "right top"]
},
"colors": {
"frame": "blue",
"tab_background_text": "#ffffff"
}
}
You can also fill the header with a repeated 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": {
"additional_backgrounds": [ "images/logo.png"]
},
"properties": {
"additional_backgrounds_alignment": [ "top" ],
"additional_backgrounds_tiling": [ "repeat" ]
},
"colors": {
"frame": "green",
"tab_background_text": "#000"
}
}
The following example uses most of the different values for
theme.colors
:
"theme": {
"images": {
"theme_frame": "weta.png"
},
"colors": {
"frame": "darkgreen",
"tab_background_text": "white",
"toolbar": "blue",
"bookmark_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 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
In Chrome:
colors/toolbar_text
is not used, use
colors/bookmark_text
代替。
images/theme_frame
anchors the image to the top left of the header and if the image doesn’t fill the header area tile the image.
"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_background_text
required the array form, while other properties required the CSS color form.
最后修改： , 由 MDN 贡献者