theme

Type	`Object`
Mandatory	No
Example	"theme": { "images": { "headerURL": "images/sun.jpg" }, "colors": { "accentcolor": "#CF723F", "textcolor": "#000" } }

Use the theme key to define a static theme to apply to 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.

Image formats

The following image formats are supported in all theme image properties:

JPEG
PNG
APNG
SVG
GIF (animated GIF isn’t supported)

Syntax

The theme key is an object that takes the following properties:

Name Type Description

Name	Type	Description
`images`	`Object`	Mandatory. Has the following properties: `"headerURL":` or (optionally, for Chrome compatibility) `"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. Mandatory. `"additional_backgrounds":` an array of URLs for additional background images to be added to the header area and displayed behind the `"headerURL":` image. These images layer the first image in the array on top, the last image in the array at the bottom. 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":`. Optional. 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.
`colors`	`Object`	Mandatory. Has the following properties: `"accentcolor":` or (optionally, for Chrome compatibility) `"frame":` the color of the header area background, displayed in the header not covered or visible through the images specified in `"headerURL":` and `"additional_backgrounds":`. Mandatory `"textcolor":` or (optionally, for Chrome compatibility) `"tab_text":` the color of the text displayed in the header area. Mandatory `"accentcolor":` and `"textcolor":` can be specified with any valid CSS color code (name, RGB, or hex). `"frame":` and `"tab_text":` are specified using an RGB array, such as `"tab_text": [ 107 , 99 , 23 ]`.
`properties`	`Object`	Optional This object has two properties that affect how the `"additional_backgrounds":` images are displayed: `"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 `"left 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

images

Object

Mandatory.

Has the following properties:

"headerURL": or (optionally, for Chrome compatibility) "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.
Mandatory.
"additional_backgrounds": an array of URLs for additional background images to be added to the header area and displayed behind the "headerURL": image. These images layer the first image in the array on top, the last image in the array at the bottom.
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":.
Optional.

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.

colors

Object

Mandatory.

Has the following properties:

"accentcolor": or (optionally, for Chrome compatibility) "frame": the color of the header area background, displayed in the header not covered or visible through the images specified in "headerURL": and "additional_backgrounds":.
Mandatory
"textcolor": or (optionally, for Chrome compatibility) "tab_text": the color of the text displayed in the header area.
Mandatory

"accentcolor": and "textcolor": can be specified with any valid CSS color code (name, RGB, or hex). "frame": and "tab_text": are specified using an RGB array, such as "tab_text": [ 107 , 99 , 23 ].

properties

Object

Optional

This object has two properties that affect how the "additional_backgrounds": images are displayed:

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

Examples

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

Browser compatibility

	Chrome	Edge	Firefox	Firefox for Android	Opera
Basic support	Yes	No	55	No	No

Chrome compatibility

Firefox property	Chrome property	Notes
`images/headerURL`	`images/frame_frame`	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/frame` only supports RGB color definition.
`colors/textcolor`	`colors/tab_text`	`colors/frame` only supports RGB color definition.
`properties/additional_backgrounds_alignment`	Not supported
`properties/additional_backgrounds_tiling`	Not supported

Image formats

Syntax

Examples

Browser compatibility

Chrome compatibility

Document Tags and Contributors