{"id":8557,"date":"2018-09-20T09:43:28","date_gmt":"2018-09-20T16:43:28","guid":{"rendered":"http:\/\/blog.mozilla.org\/addons\/?p=8557"},"modified":"2018-09-20T09:43:28","modified_gmt":"2018-09-20T16:43:28","slug":"future-themes-here","status":"publish","type":"post","link":"https:\/\/blog.mozilla.org\/addons\/2018\/09\/20\/future-themes-here\/","title":{"rendered":"The future of themes is here!"},"content":{"rendered":"<p>Themes have always been an integral part of the add-ons ecosystem and <a href=\"https:\/\/addons.mozilla.org\/?utm_source=blog.mozilla.org&amp;utm_medium=post&amp;utm_campaign=2018-09-themes\">addons.mozilla.org<\/a> (AMO). The current generation of themes &#8211; also known as lightweight themes and previously known as Personas (long story) &#8211; <a href=\"https:\/\/blog.mozilla.org\/addons\/2009\/10\/21\/personas-now-on-amo\/\">were introduced to AMO in 2009<\/a>. There are now <a href=\"https:\/\/addons.mozilla.org\/themes\/?utm_source=blog.mozilla.org&amp;utm_medium=post&amp;utm_campaign=2018-09-themes\">over 400 thousand of them<\/a> available on AMO. Today we\u2019re announcing the AMO launch of the next major step in the evolution of Firefox themes.<\/p>\n<p>If you follow this blog, this shouldn\u2019t come as a surprise. We\u2019ve <a href=\"https:\/\/blog.mozilla.org\/addons\/2017\/02\/24\/improving-themes-in-firefox\/\">talked<\/a> <a href=\"https:\/\/blog.mozilla.org\/addons\/2018\/03\/08\/theme-api-update\/\">about<\/a> <a href=\"https:\/\/blog.mozilla.org\/addons\/2018\/07\/12\/upcoming-changes-for-themes\/\">theme<\/a> updates a few times before. We actually turned on the new theme submission flow for testing a couple of weeks ago, but didn\u2019t remove the old one. We\u2019ve now flipped the switch and AMO will only accept the new themes.<\/p>\n<h3>What\u2019s new about themes<\/h3>\n<p>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:<\/p>\n<ul>\n<li>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.<\/li>\n<li>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.<\/li>\n<li>Use color transparency to make interesting color blends.<\/li>\n<\/ul>\n<p><a href=\"https:\/\/addons.mozilla.org\/addon\/roses-orange\/?utm_source=blog.mozilla.org&amp;utm_medium=post&amp;utm_campaign=2018-09-themes\">Here\u2019s an example<\/a> of one of the recently-submitted themes using some of these new properties:<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter size-large wp-image-8559\" src=\"https:\/\/blog.mozilla.org\/addons\/files\/2018\/09\/orange-theme-600x44.png\" alt=\"Orange theme\" width=\"600\" height=\"44\" srcset=\"https:\/\/blog.mozilla.org\/addons\/files\/2018\/09\/orange-theme-600x44.png 600w, https:\/\/blog.mozilla.org\/addons\/files\/2018\/09\/orange-theme-252x18.png 252w, https:\/\/blog.mozilla.org\/addons\/files\/2018\/09\/orange-theme-768x56.png 768w, https:\/\/blog.mozilla.org\/addons\/files\/2018\/09\/orange-theme.png 1986w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><\/p>\n<p>A detailed list of the supported theme properties can be found in <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Mozilla\/Add-ons\/WebExtensions\/manifest.json\/theme\">this MDN article<\/a>. If you scroll down to the compatibility table, you\u2019ll find many properties that only very recent versions of Firefox support. That\u2019s because Firefox engineers are still adding new theme capabilities, making them more powerful with every release.<\/p>\n<h3>How to submit themes now<\/h3>\n<p>If you\u2019re a theme designer, the submission flow for themes has changed a bit.<\/p>\n<ul>\n<li>In the <a href=\"https:\/\/addons.mozilla.org\/developers\/?utm_source=blog.mozilla.org&amp;utm_medium=post&amp;utm_campaign=2018-09-themes\">Developer Hub<\/a>, the Submit a New Theme button will take you to the new submission flow, which is the same used for extensions.<\/li>\n<li>You\u2019ll 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. <a href=\"https:\/\/developer.mozilla.org\/en-US\/Add-ons\/Distribution\">More on Distribution<\/a>.<\/li>\n<li>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.<\/li>\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Mozilla\/Add-ons\/Themes\/Theme_concepts#Static_themes\">These instructions<\/a> 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.<\/li>\n<\/ul>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter wp-image-8558 size-large\" src=\"https:\/\/blog.mozilla.org\/addons\/files\/2018\/09\/nerrrrd-600x630.png\" alt=\"Themes Creation Wizard\" width=\"600\" height=\"630\" srcset=\"https:\/\/blog.mozilla.org\/addons\/files\/2018\/09\/nerrrrd-600x630.png 600w, https:\/\/blog.mozilla.org\/addons\/files\/2018\/09\/nerrrrd-252x264.png 252w, https:\/\/blog.mozilla.org\/addons\/files\/2018\/09\/nerrrrd-768x806.png 768w, https:\/\/blog.mozilla.org\/addons\/files\/2018\/09\/nerrrrd.png 1494w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><\/p>\n<ul>\n<li>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\u2019ll need to upload an XPI.<\/li>\n<li>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.<\/li>\n<\/ul>\n<p>If you run into any problems with these new tools, please <a href=\"https:\/\/github.com\/mozilla\/addons\/issues\">report it here<\/a>.<\/p>\n<h3>What about Personas Plus?<\/h3>\n<p>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 <a href=\"https:\/\/color.firefox.com\/?utm_source=blog.mozilla.org&amp;utm_medium=post&amp;utm_campaign=2018-09-themes\">Firefox Color<\/a>.<\/p>\n<p>Firefox Color is exclusively a development tool for themes, so it doesn\u2019t match all features in Personas Plus. However, it should cover what is needed for easy theme creation.<\/p>\n<h3>Migrating Lightweight Themes<\/h3>\n<p>What about the 400K+ themes already hosted on AMO? We\u2019re keeping them, of course, but we will transform them to the new format later this year. So, if you\u2019re a theme designer and want your theme to be updated, don\u2019t worry, we got you covered. And please don\u2019t submit duplicate themes!<\/p>\n<p>After the migration is done, we\u2019ll notify you about it. The main difference you\u2019ll notice is the new preview image in the theme page. You\u2019ll then be able to submit new versions of your theme that take advantage of the new theme properties.<\/p>\n<p>You\u2019ll 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\u2019ll 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.<\/p>\n<div id=\"attachment_8560\" style=\"width: 610px\" class=\"wp-caption aligncenter\"><img aria-describedby=\"caption-attachment-8560\" decoding=\"async\" loading=\"lazy\" class=\"size-large wp-image-8560\" src=\"https:\/\/blog.mozilla.org\/addons\/files\/2018\/09\/ublock-stats-600x313.png\" alt=\"uBlock Statistics Dashboard\" width=\"600\" height=\"313\" srcset=\"https:\/\/blog.mozilla.org\/addons\/files\/2018\/09\/ublock-stats-600x313.png 600w, https:\/\/blog.mozilla.org\/addons\/files\/2018\/09\/ublock-stats-252x132.png 252w, https:\/\/blog.mozilla.org\/addons\/files\/2018\/09\/ublock-stats-768x401.png 768w, https:\/\/blog.mozilla.org\/addons\/files\/2018\/09\/ublock-stats.png 1846w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><p id=\"caption-attachment-8560\" class=\"wp-caption-text\">This level of success not guaranteed<\/p><\/div>\n<p>This may seem like a small step, but it\u2019s actually been a large undertaking. It\u2019s taken years and over a dozen people on the Firefox and AMO teams to finally get this out the door. I won\u2019t even try to list everyone because I\u2019m sure I\u2019ll forget some (but thank you all anyway!). We\u2019re very excited with about these new themes, and hope they will lead to even more and better Firefox customization.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Themes have always been an integral part of the add-ons ecosystem and addons.mozilla.org (AMO). The current generation of themes &#8211; also known as lightweight themes and previously known as Personas &hellip; <a class=\"go\" href=\"https:\/\/blog.mozilla.org\/addons\/2018\/09\/20\/future-themes-here\/\">Read more<\/a><\/p>\n","protected":false},"author":173,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[44,551,278886],"tags":[17,278873,278876,278875,6743,278871],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v22.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>The future of themes is here! - Mozilla Add-ons Community Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/blog.mozilla.org\/addons\/2018\/09\/20\/future-themes-here\/\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jorge Villalobos\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/blog.mozilla.org\/addons\/2018\/09\/20\/future-themes-here\/\",\"url\":\"https:\/\/blog.mozilla.org\/addons\/2018\/09\/20\/future-themes-here\/\",\"name\":\"The future of themes is here! - Mozilla Add-ons Community Blog\",\"isPartOf\":{\"@id\":\"https:\/\/blog.mozilla.org\/addons\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/blog.mozilla.org\/addons\/2018\/09\/20\/future-themes-here\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/blog.mozilla.org\/addons\/2018\/09\/20\/future-themes-here\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/blog.mozilla.org\/addons\/files\/2018\/09\/orange-theme-600x44.png\",\"datePublished\":\"2018-09-20T16:43:28+00:00\",\"dateModified\":\"2018-09-20T16:43:28+00:00\",\"author\":{\"@id\":\"https:\/\/blog.mozilla.org\/addons\/#\/schema\/person\/a098261b4b5510d408ff31f492606925\"},\"breadcrumb\":{\"@id\":\"https:\/\/blog.mozilla.org\/addons\/2018\/09\/20\/future-themes-here\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/blog.mozilla.org\/addons\/2018\/09\/20\/future-themes-here\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/blog.mozilla.org\/addons\/2018\/09\/20\/future-themes-here\/#primaryimage\",\"url\":\"https:\/\/blog.mozilla.org\/addons\/files\/2018\/09\/orange-theme.png\",\"contentUrl\":\"https:\/\/blog.mozilla.org\/addons\/files\/2018\/09\/orange-theme.png\",\"width\":1986,\"height\":144,\"caption\":\"Orange theme\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/blog.mozilla.org\/addons\/2018\/09\/20\/future-themes-here\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/blog.mozilla.org\/addons\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"The future of themes is here!\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/blog.mozilla.org\/addons\/#website\",\"url\":\"https:\/\/blog.mozilla.org\/addons\/\",\"name\":\"Mozilla Add-ons Community Blog\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/blog.mozilla.org\/addons\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/blog.mozilla.org\/addons\/#\/schema\/person\/a098261b4b5510d408ff31f492606925\",\"name\":\"Jorge Villalobos\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/blog.mozilla.org\/addons\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/6d1966118f16e4b99a6e3ad07883be33?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/6d1966118f16e4b99a6e3ad07883be33?s=96&d=mm&r=g\",\"caption\":\"Jorge Villalobos\"},\"description\":\"Jorge is the Product Manager for addons.mozilla.org\",\"url\":\"https:\/\/blog.mozilla.org\/addons\/author\/jvillalobosmozilla-com\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"The future of themes is here! - Mozilla Add-ons Community Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/blog.mozilla.org\/addons\/2018\/09\/20\/future-themes-here\/","twitter_misc":{"Written by":"Jorge Villalobos","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/blog.mozilla.org\/addons\/2018\/09\/20\/future-themes-here\/","url":"https:\/\/blog.mozilla.org\/addons\/2018\/09\/20\/future-themes-here\/","name":"The future of themes is here! - Mozilla Add-ons Community Blog","isPartOf":{"@id":"https:\/\/blog.mozilla.org\/addons\/#website"},"primaryImageOfPage":{"@id":"https:\/\/blog.mozilla.org\/addons\/2018\/09\/20\/future-themes-here\/#primaryimage"},"image":{"@id":"https:\/\/blog.mozilla.org\/addons\/2018\/09\/20\/future-themes-here\/#primaryimage"},"thumbnailUrl":"https:\/\/blog.mozilla.org\/addons\/files\/2018\/09\/orange-theme-600x44.png","datePublished":"2018-09-20T16:43:28+00:00","dateModified":"2018-09-20T16:43:28+00:00","author":{"@id":"https:\/\/blog.mozilla.org\/addons\/#\/schema\/person\/a098261b4b5510d408ff31f492606925"},"breadcrumb":{"@id":"https:\/\/blog.mozilla.org\/addons\/2018\/09\/20\/future-themes-here\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/blog.mozilla.org\/addons\/2018\/09\/20\/future-themes-here\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/blog.mozilla.org\/addons\/2018\/09\/20\/future-themes-here\/#primaryimage","url":"https:\/\/blog.mozilla.org\/addons\/files\/2018\/09\/orange-theme.png","contentUrl":"https:\/\/blog.mozilla.org\/addons\/files\/2018\/09\/orange-theme.png","width":1986,"height":144,"caption":"Orange theme"},{"@type":"BreadcrumbList","@id":"https:\/\/blog.mozilla.org\/addons\/2018\/09\/20\/future-themes-here\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/blog.mozilla.org\/addons\/"},{"@type":"ListItem","position":2,"name":"The future of themes is here!"}]},{"@type":"WebSite","@id":"https:\/\/blog.mozilla.org\/addons\/#website","url":"https:\/\/blog.mozilla.org\/addons\/","name":"Mozilla Add-ons Community Blog","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/blog.mozilla.org\/addons\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/blog.mozilla.org\/addons\/#\/schema\/person\/a098261b4b5510d408ff31f492606925","name":"Jorge Villalobos","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/blog.mozilla.org\/addons\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/6d1966118f16e4b99a6e3ad07883be33?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/6d1966118f16e4b99a6e3ad07883be33?s=96&d=mm&r=g","caption":"Jorge Villalobos"},"description":"Jorge is the Product Manager for addons.mozilla.org","url":"https:\/\/blog.mozilla.org\/addons\/author\/jvillalobosmozilla-com\/"}]}},"_links":{"self":[{"href":"https:\/\/blog.mozilla.org\/addons\/wp-json\/wp\/v2\/posts\/8557"}],"collection":[{"href":"https:\/\/blog.mozilla.org\/addons\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.mozilla.org\/addons\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.mozilla.org\/addons\/wp-json\/wp\/v2\/users\/173"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.mozilla.org\/addons\/wp-json\/wp\/v2\/comments?post=8557"}],"version-history":[{"count":0,"href":"https:\/\/blog.mozilla.org\/addons\/wp-json\/wp\/v2\/posts\/8557\/revisions"}],"wp:attachment":[{"href":"https:\/\/blog.mozilla.org\/addons\/wp-json\/wp\/v2\/media?parent=8557"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.mozilla.org\/addons\/wp-json\/wp\/v2\/categories?post=8557"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.mozilla.org\/addons\/wp-json\/wp\/v2\/tags?post=8557"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}