The future of themes is here!

Themes have always been an integral part of the add-ons ecosystem andaddons.mozilla.org (AMO). The current generation of themes – also known as lightweight themes and previously known as Personas (long story) – were introduced to AMO in 2009 . There are now over 400 thousand of them available on AMO. Today we’re announcing the AMO launch of the next major step in the evolution of Firefox themes.

If you follow this blog, this shouldn’t come as a surprise. We’vetalked about theme updates a few times before. We actually turned on the new theme submission flow for testing a couple of weeks ago, but didn’t remove the old one. We’ve now flipped the switch and AMO will only accept the new themes.

What’s new about themes

Lightweight themes allowed designers to set a background image for the main browser toolbox, as well as the text color and background color. With this update, themes let you do much more:

• Change other aspects of the browser, like the color of the toolbar icons, the color of the text in the location bar, and the color of the active tab.
• Set multiple background images, with different alignment, and tiling. You no longer need a massive background image, or make guesses about the width and height of the browser toolbox.
• Use color transparency to make interesting color blends.

Here’s an example of one of the recently-submitted themes using some of these new properties:

A detailed list of the supported theme properties can be found inthis MDN article. If you scroll down to the compatibility table, you’ll find many properties that only very recent versions of Firefox support. That’s because Firefox engineers are still adding new theme capabilities, making them more powerful with every release.

How to submit themes now

If you’re a theme designer, the submission flow for themes has changed a bit.

• In theDeveloper Hub, the Submit a New Theme button will take you to the new submission flow, which is the same used for extensions.
• You’ll be able to choose if you want to host your theme on AMO or distribute it yourself. This feature has been available for extensions for years, and it allows you to create files you can host on your website or keep for personal use.More on Distribution.
• On the next step, you can choose to either upload an XPI file or Create a Theme. The outcome of either path is the same.
• These instructions explain how to build a theme XPI. If you prefer using a wizard like the one we had for lightweight themes, click on the Create a Theme button.

• The new wizard supports the theme features of its predecessor, as well as some of the new ones. To take advantage of all new properties, however, you’ll need to upload an XPI.
• The browser preview image at the bottom of the screenshot is what becomes the main image for the theme on your theme page. It better reflects how Firefox will look after you install the theme, instead of just showing the background image.

If you run into any problems with these new tools, please report it here .

What about Personas Plus?

The Personas Plus extension has been a handy companion for theme designers for years. It makes it easy to create themes, preview them, and use them locally. Its successor in the new world of themes isFirefox Color.

Firefox Color is exclusively a development tool for themes, so it doesn’t match all features in Personas Plus. However, it should cover what is needed for easy theme creation.

Migrating Lightweight Themes

What about the 400K+ themes already hosted on AMO? We’re keeping them, of course, but we will transform them to the new format later this year. So, if you’re a theme designer and want your theme to be updated, don’t worry, we got you covered. And please don’t submit duplicate themes!

After the migration is done, we’ll notify you about it. The main difference you’ll notice is the new preview image in the theme page. You’ll then be able to submit new versions of your theme that take advantage of the new theme properties.

You’ll also notice that all new and migrated themes have different editing tools to change their descriptions. They are very similar to the tools we use for extensions. They may take a bit of getting used to, but they provide great benefits over the lightweight theme tools. You’ll be able to set a Contributions URL, so your users can compensate you for your work. Also, you get a detailed stats dashboard so you can learn about your users.

This level of success not guaranteed

This may seem like a small step, but it’s actually been a large undertaking. It’s taken years and over a dozen people on the Firefox and AMO teams to finally get this out the door. I won’t even try to list everyone because I’m sure I’ll forget some (but thank you all anyway!). We’re very excited with about these new themes, and hope they will lead to even more and better Firefox customization.