Introduction

Dynamic themes have access to the full power of the theme API and can be integrated into a browser extension to change the appearance of Firefox. Dynamic themes can also change based on user requests or dynamic information, such as the time of day or what website the user is accessing.

Creating dynamic themes

To create a dynamic theme, start by creating the manifest.json for a new browser extension and request the theme permission.

Next, you build a JSON object containing the same information you would use in a static theme’s manifest.json, Finally, pass the JSON object in a theme.update() call.

For example, the following code, from the dynamic theme example defines the content for the day and night elements of the dynamic theme:

const themes = {
  'day': {
    images: {
     theme_frame: 'sun.jpg',
    },
    colors: {
     frame: '#CF723F',
     tab_background_text: '#111',
    }
  },
  'night': {
    images: {
     theme_frame: 'moon.jpg',
    },
    colors: {
     frame: '#000',
     tab_background_text: '#fff',
    }
  }
};

The theme.Theme object is then passed to theme.update() to change the header theme, as in this code snippet from the same example:

function setTheme(theme) {
  if (currentTheme === theme) {
    // No point in changing the theme if it has already been set.
    return;
  }
  currentTheme = theme;
  browser.theme.update(themes[theme]);
}

Learn more about dynamic themes and see an additional example in the following video:

Publishing dynamic themes

The workflow for publishing dynamic themes follows the same path as publishing browser extensions for Firefox. You can read an overview of the process in the Publish section of Firefox Etension Workshop.

First, you will need to package your dynamic theme. Then, you will need to submit it to addons.mozilla.org (AMO) for signing. If you would like to to distribute your dynamic theme on AMO, follow the instructions for Listing on AMO in the Submitting an add-on article. If you do not want to list your dynamic theme on AMO, follow the instructions for Self-distribution.