{"id":8062,"date":"2017-02-24T11:50:47","date_gmt":"2017-02-24T19:50:47","guid":{"rendered":"http:\/\/blog.mozilla.org\/addons\/?p=8062"},"modified":"2017-02-27T13:11:09","modified_gmt":"2017-02-27T21:11:09","slug":"improving-themes-in-firefox","status":"publish","type":"post","link":"https:\/\/blog.mozilla.org\/addons\/2017\/02\/24\/improving-themes-in-firefox\/","title":{"rendered":"Improving Themes in Firefox"},"content":{"rendered":"

Last year, we started thinking<\/a> about how to improve themes in Firefox. We asked theme designers and developers for their thoughts too, and received over 250 responses<\/a>. After sorting through the responses and a few months of deliberation and experimentation, we have a plan, and would like to share what we\u2019re going to do and why.<\/p>\n

Let\u2019s start with the \u201cwhy.\u201d<\/h3>\n

Currently, Firefox supports two types of themes. Complete Themes and Lightweight Themes (aka LWTs, formerly \u201cPersonas\u201d, and now just \u201cThemes\u201d on addons.mozilla.org).<\/p>\n

Lightweight Themes are very popular. There are currently over 400,000<\/a> such themes on addons.mozilla.org (AMO). They\u2019re extremely simple to create; anyone can create one<\/a> by just uploading an image to AMO. I made my first LWT<\/a> eight years ago, and it still works fine today without any changes. However, LWTs are very limited in what they can do. They can lightly modify the default Firefox appearance with a background image and set a couple of colors, but nothing else. The survey confirmed that there\u2019s a lot of interest in giving LWTs more creative control over how the browser looks. More backgrounds, colors, and icons on more UI elements.<\/p>\n

Complete Themes, the second type of theme, completely replace the default Firefox appearance. Authors must provide all the needed CSS, images, and icons for the entire browser (from scratch!), which makes Complete Themes flexible but difficult to create and maintain. Authors have to understand Firefox\u2019s complex and ever-changing UI internals, and there\u2019s little documentation beyond Firefox\u2019s source code. This leads to a serious compatibility burden, as authors need to invest time to keep their theme working with each Firefox release \u2013 only 60 of the 500<\/a> Complete Themes on AMO are compatible with current Firefox releases. Further, we\u2019re not able to directly fix these issues without limiting our ability to improve Firefox. And since only 0.089% of Firefox users use a Complete Theme (less than 4% of the usage of LWTs), we\u2019re going to focus on improving theming in other ways.<\/p>\n

Firefox extensions (as opposed to themes) can also run into these problems, as there is no JavaScript API to control the appearance of the browser. Legacy add-ons wanting to do this had to directly alter the UI\u2019s internal DOM and CSS. As with Complete Themes, this can give an extension great power, but it comes with a serious price in complexity and compatibility. WebExtensions are unable to access any UI internals, and so are particularly in need of a solution.<\/p>\n

What we\u2019re doing<\/h3>\n

We want to fix Firefox so theming is better for everyone.<\/p>\n

The next generation of Firefox themes will blend LWTs\u2019 ease of authoring with the additional capabilities we see most often used in Complete Themes. At its core is a JSON manifest, mapping defined property names to the underlying UI elements. Theme developers will be able to control a variety of styles on these properties (such as colors, icons, and background images), and Firefox will ensure the manifests are supported in a stable and well-documented way across future releases and UI updates. These themes will be layered on top of the default Firefox appearance, so you can create a trivial theme that just changes one property, or a complex theme that changes all of them.<\/p>\n

The goal is to provide capabilities that enable people to make themes they love and use. We think it\u2019s possible to make themes in Firefox powerful without the previous pitfalls. To get started, we\u2019ll initially support the same properties as Chrome, to make the thousands of Chrome themes more easily available in Firefox. Then we\u2019ll expand the set of properties in our API, so that Firefox themes will be able to do more. We expect to continue adding to this theming framework over time, with your feedback helping to guide what\u2019s needed.<\/p>\n

We also recognize that a property manifest won\u2019t have all the capabilities of direct CSS manipulation, especially during the time we\u2019re expanding coverage to cover the most common use cases. So, for theme authors who need additional capabilities (and are willing to bear the burden of supporting them), we\u2019ll provide an \u201cexperimental\u201d section of the manifest to continue to allow direct CSS manipulation of the Firefox UI. This is similar in spirit to WebExtension Experiments<\/a>, and usage will also be restricted to pre-release versions of Firefox.<\/p>\n

A WebExtensions API<\/h3>\n

Finally, we\u2019re adding a WebExtensions API for theming. It will have the same capabilities as the JSON manifest’s properties, except via a JavaScript API, so add-ons can make dynamic changes at runtime. This will enable add-ons to do things like adjusting colors based on the time of day (e.g. Flux<\/a>), or matching your theme with the weather outside.<\/p>\n

Questions and Feedback<\/h3>\n

For more information on our current work, see our Engineering Plan<\/a>. We\u2019ve just started some of the foundational work, but would welcome your input as we move towards building the first version that will be usable by theme authors. Our goal is to have this in place before Firefox 57 ships in November, which will end support for Complete Themes<\/a>. We currently expect early testing to begin in Nightly over the next few months.<\/p>\n

Please address your questions and feedback to the Dev-Addons list<\/a> at dev-addons@mozilla.org.<\/p>\n

We’re also keeping a list of Frequently Asked Questions<\/a>, check it out to see if it answers your question.<\/p>\n","protected":false},"excerpt":{"rendered":"

Last year, we started thinking about how to improve themes in Firefox. We asked theme designers and developers for their thoughts too, and received over 250 responses. After sorting through … Read more<\/a><\/p>\n","protected":false},"author":11,"featured_media":3419,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[44,121,551],"tags":[],"yoast_head":"\nImproving Themes in Firefox - 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\/2017\/02\/24\/improving-themes-in-firefox\/\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Justin Dolske\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/blog.mozilla.org\/addons\/2017\/02\/24\/improving-themes-in-firefox\/\",\"url\":\"https:\/\/blog.mozilla.org\/addons\/2017\/02\/24\/improving-themes-in-firefox\/\",\"name\":\"Improving Themes in Firefox - Mozilla Add-ons Community Blog\",\"isPartOf\":{\"@id\":\"https:\/\/blog.mozilla.org\/addons\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/blog.mozilla.org\/addons\/2017\/02\/24\/improving-themes-in-firefox\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/blog.mozilla.org\/addons\/2017\/02\/24\/improving-themes-in-firefox\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/blog.mozilla.org\/addons\/files\/2011\/10\/2063019547-1.png\",\"datePublished\":\"2017-02-24T19:50:47+00:00\",\"dateModified\":\"2017-02-27T21:11:09+00:00\",\"author\":{\"@id\":\"https:\/\/blog.mozilla.org\/addons\/#\/schema\/person\/b8ba0d629c02c1e2a1f8a32a6f9b6cd8\"},\"breadcrumb\":{\"@id\":\"https:\/\/blog.mozilla.org\/addons\/2017\/02\/24\/improving-themes-in-firefox\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/blog.mozilla.org\/addons\/2017\/02\/24\/improving-themes-in-firefox\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/blog.mozilla.org\/addons\/2017\/02\/24\/improving-themes-in-firefox\/#primaryimage\",\"url\":\"https:\/\/blog.mozilla.org\/addons\/files\/2011\/10\/2063019547-1.png\",\"contentUrl\":\"https:\/\/blog.mozilla.org\/addons\/files\/2011\/10\/2063019547-1.png\",\"width\":\"158\",\"height\":\"174\",\"caption\":\"A firefox geared up with special tools.\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/blog.mozilla.org\/addons\/2017\/02\/24\/improving-themes-in-firefox\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/blog.mozilla.org\/addons\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Improving Themes in Firefox\"}]},{\"@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\/b8ba0d629c02c1e2a1f8a32a6f9b6cd8\",\"name\":\"Justin Dolske\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/blog.mozilla.org\/addons\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/9433d3c0982bc13568e6b1d98b84f509?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/9433d3c0982bc13568e6b1d98b84f509?s=96&d=mm&r=g\",\"caption\":\"Justin Dolske\"},\"description\":\"Mostly harmless.\",\"sameAs\":[\"https:\/\/dolske.wordpress.com\/\"],\"url\":\"https:\/\/blog.mozilla.org\/addons\/author\/jdolskemozillacom\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Improving Themes in Firefox - 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\/2017\/02\/24\/improving-themes-in-firefox\/","twitter_misc":{"Written by":"Justin Dolske","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/blog.mozilla.org\/addons\/2017\/02\/24\/improving-themes-in-firefox\/","url":"https:\/\/blog.mozilla.org\/addons\/2017\/02\/24\/improving-themes-in-firefox\/","name":"Improving Themes in Firefox - Mozilla Add-ons Community Blog","isPartOf":{"@id":"https:\/\/blog.mozilla.org\/addons\/#website"},"primaryImageOfPage":{"@id":"https:\/\/blog.mozilla.org\/addons\/2017\/02\/24\/improving-themes-in-firefox\/#primaryimage"},"image":{"@id":"https:\/\/blog.mozilla.org\/addons\/2017\/02\/24\/improving-themes-in-firefox\/#primaryimage"},"thumbnailUrl":"https:\/\/blog.mozilla.org\/addons\/files\/2011\/10\/2063019547-1.png","datePublished":"2017-02-24T19:50:47+00:00","dateModified":"2017-02-27T21:11:09+00:00","author":{"@id":"https:\/\/blog.mozilla.org\/addons\/#\/schema\/person\/b8ba0d629c02c1e2a1f8a32a6f9b6cd8"},"breadcrumb":{"@id":"https:\/\/blog.mozilla.org\/addons\/2017\/02\/24\/improving-themes-in-firefox\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/blog.mozilla.org\/addons\/2017\/02\/24\/improving-themes-in-firefox\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/blog.mozilla.org\/addons\/2017\/02\/24\/improving-themes-in-firefox\/#primaryimage","url":"https:\/\/blog.mozilla.org\/addons\/files\/2011\/10\/2063019547-1.png","contentUrl":"https:\/\/blog.mozilla.org\/addons\/files\/2011\/10\/2063019547-1.png","width":"158","height":"174","caption":"A firefox geared up with special tools."},{"@type":"BreadcrumbList","@id":"https:\/\/blog.mozilla.org\/addons\/2017\/02\/24\/improving-themes-in-firefox\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/blog.mozilla.org\/addons\/"},{"@type":"ListItem","position":2,"name":"Improving Themes in Firefox"}]},{"@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\/b8ba0d629c02c1e2a1f8a32a6f9b6cd8","name":"Justin Dolske","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/blog.mozilla.org\/addons\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/9433d3c0982bc13568e6b1d98b84f509?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/9433d3c0982bc13568e6b1d98b84f509?s=96&d=mm&r=g","caption":"Justin Dolske"},"description":"Mostly harmless.","sameAs":["https:\/\/dolske.wordpress.com\/"],"url":"https:\/\/blog.mozilla.org\/addons\/author\/jdolskemozillacom\/"}]}},"_links":{"self":[{"href":"https:\/\/blog.mozilla.org\/addons\/wp-json\/wp\/v2\/posts\/8062"}],"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\/11"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.mozilla.org\/addons\/wp-json\/wp\/v2\/comments?post=8062"}],"version-history":[{"count":0,"href":"https:\/\/blog.mozilla.org\/addons\/wp-json\/wp\/v2\/posts\/8062\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blog.mozilla.org\/addons\/wp-json\/wp\/v2\/media\/3419"}],"wp:attachment":[{"href":"https:\/\/blog.mozilla.org\/addons\/wp-json\/wp\/v2\/media?parent=8062"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.mozilla.org\/addons\/wp-json\/wp\/v2\/categories?post=8062"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.mozilla.org\/addons\/wp-json\/wp\/v2\/tags?post=8062"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}