Add-ons

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

ChromeEdgeFirefoxFirefox for AndroidOpera
Basic supportYesNo55NoNo

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  

Document Tags and Contributors

Tags: 
 Contributors to this page: rebloor
 Last updated by: rebloor,