theme 编辑

"theme": {
  "images": {
    "theme_frame": "images/sun.jpg"
  },
  "colors": {
    "frame": "#CF723F",
    "tab_background_text": "#000"
  }
}

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 images for details on the properties that this object can contain.

Mandatory.

A JSON object whose properties represent the colors of various parts of the browser. See colors for details on the properties that this object can contain.

Optional

This object has two properties that affect how the "additional_backgrounds" images are displayed. See properties for details on the properties that this object can contain.

• "additional_backgrounds_alignment": an array of enumeration values defining the alignment of the corresponding "additional_backgrounds": array item.
  The alignment options include: "bottom", "center", "left", "right", "top", "center bottom", "center center", "center top", "left bottom", "left center", "left top", "right bottom", "right center", and "right top". If not specified, defaults to "right top".
  Optional
• "additional_backgrounds_tiling": an array of enumeration values defining how the corresponding "additional_backgrounds": array item repeats, with support for "no-repeat", "repeat", "repeat-x", and "repeat-y". If not specified, defaults to "no-repeat".
  Optional

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

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 theme_frame or headerURL had to be specified before Firefox 60. Note also that in Firefox 60 onwards, any text-shadow applied to the header text is removed if no headerURL is specified (see bug 1404688).

In Firefox for Android, headerURL or theme_frame  must be specified.

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

Optional in desktop Firefox 60 onwards. One of theme_frame or headerURL had to be specified before Firefox 60.

In Firefox for Android, headerURL or theme_frame  must be specified.

The additional_backgrounds property is experimental. It is currently accepted in release versions of Firefox, but its behavior is subject to change. It is not supported in Firefox for Android.

An array of URLs for additional background images to be added to the header area and displayed behind the "theme_frame": image. These images layer the first image in the array on top, the last image in the array at the bottom.

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 "properties":.

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 property instead.

The color of the header area background, displayed in the part of the header not covered or visible through the images specified in "headerURL" and "additional_backgrounds".

"theme": {
  "colors": {
     "accentcolor": "red",
     "tab_background_text": "white"
  }
}

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 frame and frame_inactive or toolbar if you're using that property.

Where icons isn't defined, also ensure good contrast with button_background_active and button_background_hover.

"theme": {
  "colors": {
    "frame": "black",
    "tab_background_text": "white",
    "tab_text": "white",
    "toolbar": "black",
    "bookmark_text": "red"
  }
}

The color of the background of the pressed toolbar buttons.

"theme": {
  "colors": {
     "frame": "black",
     "tab_background_text": "white",
     "button_background_active": "red"
  }
}

The color of the background of the toolbar buttons on hover.

"theme": {
  "colors": {
     "frame": "black",
     "tab_background_text": "white",
     "button_background_hover": "red"
  }
}

The color of toolbar icons, excluding those in the find toolbar.

Ensure the color used contrasts well with those used in frame,  frame_inactive, button_background_active, and button_background_hover.

"theme": {
  "colors": {
     "frame": "black",
     "tab_background_text": "white",
     "icons": "red"
  }
}

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 frame,  frame_inactive, button_background_active, and button_background_hover.

"theme": {
  "colors": {
     "frame": "black",
     "tab_background_text": "white",
     "icons_attention": "red"
  }
}

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

"theme": {
  "colors": {
     "frame": "red",
     "tab_background_text": "white"
  }
}

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

"theme": {
  "colors": {
     "frame": "red",
     "frame_inactive": "gray",
     "tab_text": "white"
  }
}

The new tab page background color.

"theme": {
  "colors": {
     "ntp_background": "red",
     "ntp_text": "white"
  }
}

The new tab page text color.

Ensure the color used contrasts well with that used in ntp_background.

"theme": {
  "colors": {
     "ntp_background": "red",
     "ntp_text": "white"
  }
}

The background color of popups (such as the url bar dropdown and the arrow panels).

"theme": {
  "colors": {
     "frame": "black",
     "tab_background_text": "white",
     "popup": "red"
  }
}

The border color of popups.

"theme": {
  "colors": {
     "frame": "black",
     "tab_background_text": "white",
     "popup": "black",
     "popup_text": "white",
     "popup_border": "red"
  }
}

The background color of items highlighted using the keyboard inside popups (such as the selected url bar dropdown item).

It's recommended to define popup_highlight_text to override the browser default text color on various platforms.

"theme": {
  "colors": {
     "frame": "black",
     "tab_background_text": "white",
     "popup_highlight": "red",
     "popup_highlight_text": "white"
  }
}

The text color of items highlighted inside popups.

Ensure the color used contrasts well with that used in popup_highlight.

"theme": {
  "colors": {
     "frame": "black",
     "tab_background_text": "white",
     "popup_highlight": "black",
     "popup_highlight_text": "red"
  }
}

The text color of popups.

Ensure the color used contrasts well with that used in popup.

"theme": {
  "colors": {
     "frame": "black",
     "tab_background_text": "white",
     "popup": "black",
     "popup_text": "red"
  }
}

The background color of the sidebar.

"theme": {
  "colors": {
     "sidebar": "red",
     "sidebar_highlight": "white",
     "sidebar_highlight_text": "green",
     "sidebar_text": "white"
  }
}

The border and splitter color of the browser sidebar

"theme": {
  "colors": {
     "sidebar_border": "red"
  }
}

The background color of highlighted rows in built-in sidebars

"theme": {
  "colors": {
     "sidebar_highlight": "red",
     "sidebar_highlight_text": "white"
  }
}

The text color of highlighted rows in sidebars.

Ensure the color used contrasts well with that used in sidebar_highlight.

"theme": {
  "colors": {
    "sidebar_highlight": "pink",
    "sidebar_highlight_text": "red",
  }
}

The text color of sidebars.

Ensure the color used contrasts well with that used in sidebar.

"theme": {
  "colors": {
     "sidebar": "red",
     "sidebar_highlight": "white",
     "sidebar_highlight_text": "green",
     "sidebar_text": "white"
  }
}

The color of the vertical separator of the background tabs.

"theme": {
  "colors": {
     "frame": "black",
     "tab_background_text": "white",
     "tab_background_separator": "red"
  }
}

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 tab_selected or frame and  frame_inactive.

"theme": {
  "colors": {
    "frame": "black",
    "toolbar": "white",
    "tab_background_text": "red"
  }
}

The color of the selected tab line.

"theme": {
  "colors": {
     "frame": "black",
     "tab_background_text": "white",
     "tab_line": "red"
  }
}

The color of the tab loading indicator and the tab loading burst.

"theme": {
  "colors": {
     "frame": "black",
     "tab_background_text": "white",
     "tab_loading": "red"
  }
}

The background color of the selected tab. When not in use selected tab color is set by frame and the frame_inactive.

"theme": {
  "images": {
  "theme_frame": "weta.png"
},
  "colors": {
     "frame": "black",
     "tab_background_text": "white",
     "tab_selected": "red"
  }
}

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 tab_selected or frame and  frame_inactive.

From Firefox 55 to 58, it is incorrectly implemented as alias for "textcolor"

"theme": {
  "images": {
  "theme_frame": "weta.png"
},
  "colors": {
     "frame": "black",
     "tab_background_text": "white",
     "tab_selected": "white",
     "tab_text": "red"
  }
}

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

The color of the text displayed in the header area.

"theme": {
  "colors": {
    "frame": "black",
    "toolbar": "white",
    "textcolor": "red"
  }
}

The background color for the navigation bar, the bookmarks bar, and the selected tab.

This also sets the background color of the "Find" bar.

"theme": {
  "colors": {
    "frame": "black",
    "toolbar": "red",
    "tab_background_text": "white"
  }
}

The color of the line separating the bottom of the toolbar from the region below.

"theme": {
  "colors": {
    "frame": "black",
    "tab_background_text": "white",
    "toolbar_bottom_separator": "red"
  }
}

The background color for fields in the toolbar, such as the URL bar.

This also sets the background color of the Find in page field.

"theme": {
  "colors": {
    "frame": "black",
    "tab_background_text": "white",
    "toolbar_field": "red"
  }
}

The border color for fields in the toolbar.

This also sets the border color of the Find in page field.

"theme": {
  "colors": {
    "frame": "black",
    "toolbar": "black",
    "tab_background_text": "white",
    "toolbar_field": "black",
    "toolbar_field_text": "white",
    "toolbar_field_border": "red"
  }
}

The focused border color for fields in the toolbar.

"theme": {
  "colors": {
    "frame": "black",
    "toolbar": "black",
    "tab_background_text": "white",
    "toolbar_field": "black",
    "toolbar_field_text": "white",
    "toolbar_field_border_focus": "red"
  }
}

The focused background color for fields in the toolbar, such as the URL bar.

"theme": {
  "colors": {
    "frame": "black",
    "toolbar": "black",
    "tab_background_text": "white",
    "toolbar_field": "black",
    "toolbar_field_text": "white",
    "toolbar_field_focus": "red"
  }
}

"theme": {
  "colors": {
    "toolbar_field": "rgba(255, 255, 255, 0.91)",
    "toolbar_field_text": "rgb(0, 100, 0)",
    "toolbar_field_highlight": "rgb(180, 240, 180, 0.9)",
    "toolbar_field_highlight_text": "rgb(0, 80, 0)"
  }
}

Here, the toolbar_field_highlight field specifies that the highlight color is a light green, while the text is set to a dark-to-medium green using 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 toolbar_field_highlight.

"theme": {
  "colors": {
    "toolbar_field": "rgba(255, 255, 255, 0.91)",
    "toolbar_field_text": "rgb(0, 100, 0)",
    "toolbar_field_highlight": "rgb(180, 240, 180, 0.9)",
    "toolbar_field_highlight_text": "rgb(0, 80, 0)"
  }
}

Here, the toolbar_field_highlight_text field is used to set the text color to a dark medium-dark green, while the highlight color is  a light green.

The color of separators inside the URL bar. In Firefox 58 this was implemented as toolbar_vertical_separator.

"theme": {
  "colors": {
    "frame": "black",
    "toolbar": "black",
    "tab_background_text": "white",
    "toolbar_field_separator": "red"
  }
}

In this screenshot, "toolbar_vertical_separator" is the white vertical line in the URL bar dividing the Reader Mode icon from the other icons.

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

Ensure the color used contrasts well with those used in toolbar_field.

"theme": {
  "colors": {
    "frame": "black",
    "toolbar": "black",
    "tab_background_text": "white",
    "toolbar_field": "black",
    "toolbar_field_text": "red"
  }
}

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

"theme": {
  "colors": {
    "frame": "black",
    "toolbar": "black",
    "tab_background_text": "white",
    "toolbar_field": "black",
    "toolbar_field_text": "white",
    "toolbar_field_text_focus": "red"
  }
}

The color of toolbar text. This also sets the color of  text in the "Find" bar.

For compatibility with Chrome, use the alias bookmark_text.

"theme": {
  "colors": {
    "frame": "black",
    "tab_background_text": "white",
    "toolbar": "black",
    "toolbar_text": "red"
  }
}

The color of the line separating the top of the toolbar from the region above.

"theme": {
  "colors": {
    "frame": "black",
    "tab_background_text": "white",
    "toolbar": "black",
    "toolbar_top_separator": "red"
  }
}

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.

"theme": {
  "colors": {
    "frame": "black",
    "tab_background_text": "white",
    "toolbar": "black",
    "toolbar_vertical_separator": "red"
  }
}

Array of String

Optional.

An array of enumeration values defining the alignment of the corresponding "additional_backgrounds": array item.
The alignment options include:

• "bottom"
• "center"
• "left"
• "right"
• "top"
• "center bottom"
• "center center"
• "center top"
• "left bottom"
• "left center"
• "left top"
• "right bottom"
• "right center"
• "right top".

If not specified, defaults to "right top".

Array of String

Optional.

An array of enumeration values defining how the corresponding "additional_backgrounds": array item repeats. Options include:

• "no-repeat"
• "repeat"
• "repeat-x"
• "repeat-y"

If not specified, defaults to "no-repeat".