Skip to content

Latest commit

 

History

History
152 lines (131 loc) · 3.73 KB

web-extension-themes.md

File metadata and controls

152 lines (131 loc) · 3.73 KB
description
How to create themes using WebExtensions.

WebExtension Themes

A WebExtension Theme is a Thunderbird add-on that allows you to change cosmetic elements much like the old lightweight themes, but with more functionality.

It typically consists of two files, zipped up with a .xpi extension just as any other add-on:

  • manifest.json
  • image.png or .jpg

Use a manifest.json file

You must prepare a JSON manifest, named "manifest.json" just as with other Web Extensions. Below is a basic example:

{
  "manifest_version":2,
  "applications":{
    "gecko":{
      "id":"[email protected]",
      "strict_min_version":"60.0"
    }
  },
  "name":"Thunderbird ExampleTheme",
  "description":"Static theme version of an example Thunderbird theme.",
  "version":"1.0",
  "theme":{
    "images":{
      "theme_frame":"thunderbirdimage.jpg"
    },
    "colors":{
      "frame":"#000000",
      "tab_background_text":"#ffffff"
    }
  }
}
  • manifest_version is always 2.
  • id is a unique GUID for your theme.

{% hint style="danger" %} Although not required by Firefox, Thunderbird requires an applications object with an id set for the add-on! Because we don't sign add-ons, themes will not install without it. {% endhint %}

Additional color properties

Although the above theme will work as-is, there are other properties which can be added.

For the colors object, there are many options. Those known to work are listed below:

  • bookmark_text
  • frame
  • frame_inactive
  • popup
  • popup_text
  • popup_border
  • popup_highlight
  • popup_highlight_text
  • popup_border
  • sidebar
  • sidebar_text
  • sidebar_highlight
  • sidebar_highlight_text
  • sidebar_border
  • tab_text
  • tab_line
  • tab_loading
  • tab_background_text
  • toolbar_field
  • toolbar_field_text
  • toolbar_field_highlight
  • toolbar_field_highlight_text
  • toolbar_field_border
  • toolbar_field_focus
  • toolbar_field_text_focus
  • toolbar_field_border_focus
  • toolbar_top_separator
  • toolbar_bottom_separator
  • toolbar_vertical_separator

Icons

You can add an icon for your theme, like other types of add-ons, with the following code:

  "icons": {
    "16": "icon.png"
  },

Don't forget to put the icon.png file in your add-on as well.

A complete example

Here is a manifest.json from a Theme that uses all the above features, thanks to Paenglab:

{
  "manifest_version": 2,
  "name": "Nuvola WebExtension theme",
  "version": "1.1",
  "applications": {
    "gecko": {
      "id": "[email protected]",
      "strict_min_version": "60.0"
    }
  },
  "description": "Light theme with some gradients.",
  "icons": {
    "16": "icon.png"
  },
  "theme": {
    "colors": {
      "frame": "#e7e8ec",
      "tab_text": "#000",
      "tab_line": "#1f9afd",
      "tab_loading": "#1f9afd",
      "tab_background_text": "#000",
      "bookmark_text": "#333",
      "toolbar_field": "#f2f2f2",
      "toolbar_field_text": "#444",
      "toolbar_field_highlight": "#1f9afd",
      "toolbar_field_highlight_text": "#fff",
      "toolbar_field_border": "#999",
      "toolbar_field_focus": "#f2f2f2",
      "toolbar_field_text_focus": "#000",
      "toolbar_field_border_focus": "#1f9afd",
      "toolbar_top_separator": "#aaa",
      "toolbar_bottom_separator": "#888",
      "toolbar_vertical_separator": "#888",
      "sidebar": "#fbfbfb",
      "sidebar_text": "#000",
      "sidebar_highlight": "rgba(11,113,220,.6)",
      "sidebar_highlight_text": "#fff",
      "sidebar_border": "#999",
      "popup": "#e6e8ef",
      "popup_text": "#000",
      "popup_border": "#666",
      "popup_highlight": "#1f9afd",
      "popup_highlight_text": "#fff"
    },
    "images": {
      "theme_frame": "background.png"
    }
  }
}