Mozilla Add-ons Community Blog
Categories: developers themes webextensions

The future of themes is here!

26 responses

Themes have always been an integral part of the add-ons ecosystem and addons.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’ve talked 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:

Orange theme

A detailed list of the supported theme properties can be found in this 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 the Developer 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.

Themes Creation Wizard

  • 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 is Firefox 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.

uBlock Statistics Dashboard

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.

26 comments on “The future of themes is here!”

  1. Mike wrote on

    Not very impressive, comparing to “full themes” features. :/

    1. Adam wrote on

      uncomparable to full enterprise version, what to compare for?

  2. Weilan wrote on

    Welcome to Vivaldi and Chrome’s club of limited customization. xD

    1. Moses wrote on

      I’d like to see you create a userChrome.css file and place it into Chrome. Firefox is vastly superior to Chrome in terms of customizability simply because of userChrome and userContent.

      1. Truth wrote on

        Yep and double yep.

      2. Weilan wrote on

        Why would I want a custom chrome.css? If it’s not included in the built-in GUI options, it’s not worth my time.

        Firefox before Quantum had real themes, now all it can do (with this here) is customize CSS colors like Vivaldi and Chrome. Big deal.

  3. chamilet wrote on

    So where will I find Holiday pictures and Fandom themes like I used to love with Personas before you messed it up?

    1. Jorge Villalobos wrote on

      Can you elaborate on how you’re having trouble finding things?

  4. Andreas wrote on

    I think I read that you were planning on taking away the ability to hover over a theme to preview it. Is this still true?

    1. Jorge Villalobos wrote on

      That was removed a while ago for performance reasons.

  5. happysurf wrote on

    This is a great news but I have a suggestion, like in Firefox Color the active Tab Line color, must be the same of text color or independent to customize.
    In the new Theme Generator the inactive tabs text color, paint also the Tab Line of active tab and this is absurd.

  6. Kim Gwaltney wrote on

    I hope this also means that I can FINALLY remove my inaccessible themes that were “Disabled by Mozilla”… which, by the way, no explanation was EVER given. 🙁

    1. Jorge Villalobos wrote on

      Can you email amo-admins AT mozilla DOT org with more details? We can help you figure out what happened and how to remove them if necessary.

  7. Matthew wrote on

    Great, though I’ll probably just stick to the official dark theme like I have been since it was introduced. That’s all I want out of themes, a pleasantly simple one.

    Now get a dark theme on the Firefox for Android app!

    1. Browningate wrote on

      While they’re at it, they could try to make it render and zoom pages competently.

  8. MaDonna wrote on

    I am currently not able to submit one of my theme designs on Firefox Color. I am currently in total “frustration” trying to figure all this out. I am going on 80 and change is not a good thing for us elderly. I am sure I will eventually learn all of this but this is not making it any easier! I am receiving emails about this so apparently I am not the only one! Will I be able to submit my theme designs using Firefox Color eventually? I have other questions but don’t want to submit too many at once!

    1. Jorge Villalobos wrote on

      Firefox Color at the moment doesn’t allow you to submit to AMO.

  9. John “Smokey” Hatzimichaels wrote on

    Change is inevitable. As with any change, comes bumps in the road…while I may miss some features from Personas Plus, I am sure I’ll adjust to the new format. Give it some time!

  10. Caroline/Maven wrote on

    How do you get one of these new themes to work on Android Firefox? I just uploaded a theme on this new system today (my very first one, with my last theme on the old system being just three weeks ago), and I am having an absolutely frustrating time getting it to also work on Android Firefox. The theme comes up blank when you have it installed, and sometimes the theme’s listing does not say anything about not being compatible with Firefox Android, and sometimes it does. I have done everything I know to do for the time being, including uploading an XPI file of the theme and checking off the box that SHOULD get it to work on Android Firefox as it does on the other platforms. What makes this all the more exasperating is that the theme I am trying to get to work on all platforms is technically a lightweight one, since I only did the background and foreground lettering and nothing else. I understand the new system otherwise, and when the Firefox Android problem is hopefully solved soon, I do not have any other issues. Thank you in advance for any and all help and advice.

    1. Jorge Villalobos wrote on

      Firefox for Android doesn’t support the new system, though there are efforts to add support. AMO should tell you that they aren’t compatible.

      1. Anthony wrote on

        Is there someplace where we could make a theme for mobile still?

  11. Jefferson “jscher2000” Scher wrote on

    Hi MaDonna, don’t despair! When you are viewing one of your Firefox Colors themes, the page has a box with the numeric values you need to submit your theme either through the Wizard or as an XPI (although that might not be needed unless you want to tweak a lot of colors).

    To see the data, move your mouse to the lower right corner of the window and a blue buttons labeled “Show Logger” should slide into view. When you click that, you’ll see various properties with r, g, b, a values below them. These are the components of the colors. For example:

    “accentcolor”: {
    “r”: 211,
    “g”: 235,
    “b”: 248,
    “a”: 1
    }

    On the Wizard, that corresponds to:

    Header area background => rgba(211, 235, 248, 1)

    In an XPI manifest.json file, that corresponds to:

    “accentcolor”: “rgba(211, 235, 248, 1)”

    Obviously transcribing all of that so you can copy/paste it somewhere else is a hassle. It could be extracted out to a more usable format using a script. You can run scripts against the displayed page using a variety of methods, such as (A) the Web Console (one of Firefox’s built-in developer tools), (B) a bookmarklet (a script you save on your Bookmarks Toolbar or Bookmarks Menu for quick access), (C) a user script (a script you apply using an extension like Greasemonkey, Tampermonkey, or Violentmonkey), or (D) a full-blown extension.

    Do you want to get in touch with me so I can put something together for you? I have email links on my extension pages, for example, https://addons.mozilla.org/firefox/addon/switch-to-previous-active-tab/

  12. MaDonna wrote on

    Thank you, Jefferson…I am not currently using Firefox Color to make my designs. I am still using Personas Plus to test new designs when I am making them. But I am aware that PP will be going away sometime in Nov. I am not looking forward to that. So apparently I will have to do all my testing through Firefox Colors, is this correct?

  13. Aaron Priest wrote on

    You can’t add a footer.jpg now, that’s unfortunate. A theme looks very incomplete with a bright white bar for the search tab where we used to be able to choose a footer image as well. Please bring this feature back.

  14. Anthony wrote on

    This doesn’t seem to be compatible with Firefox mobile. I am able to download it on mobile, but when I try to apply it, all nothing changes. If I play with a few buttons, such as enabling and disabling, at best, it goes back to the default white theme even if it is enabled.

    I have tried with various color configurations, and even left everything default and just added the bar image with no luck.

    Any word on when this might work with mobile?

  15. MaDonna wrote on

    How do we upload an XPI? I noticed I had one in my extensions and removed it because I knew I had never installed one. Or didn’t know I did.