{"id":8618,"date":"2019-02-27T09:00:34","date_gmt":"2019-02-27T17:00:34","guid":{"rendered":"http:\/\/blog.mozilla.org\/addons\/?p=8618"},"modified":"2019-03-07T10:33:03","modified_gmt":"2019-03-07T18:33:03","slug":"design-and-create-themes-for-firefox","status":"publish","type":"post","link":"https:\/\/blog.mozilla.org\/addons\/2019\/02\/27\/design-and-create-themes-for-firefox\/","title":{"rendered":"Design and create themes for Firefox"},"content":{"rendered":"

Last September, we announced<\/a> the next major evolution in themes for Firefox. With the adoption of static themes<\/a>, you can now go beyond customizing the header of the browser and easily modify the appearance of the browser\u2019s tabs and toolbar, and choose to distribute your theme publicly or keep it private for your own personal use. If you would like to learn about how to take advantage of these new features or are looking for an updated tutorial on how to create themes, you have come to the right place!<\/p>\n

Designing themes doesn\u2019t have to be complicated. The theme generator<\/a> on AMO allows users to create a theme within minutes. You may enter hex, rgb, or rgba values or use the color selector to pick your preferred colors for the header, toolbar, and text. You will also need to provide an image which will be aligned to the top-right. It may appear to be simple, and that\u2019s because it is!<\/p>\n

\"\"<\/p>\n

If you want to test what your theme will look like before you submit it to AMO, the extension Firefox Color<\/a> will enable you to preview changes in real-time, add multiple images, make finer adjustments, and more. You will also be able to export the theme you create on Firefox Color.<\/p>\n

\"\"<\/p>\n

If you want to create a more detailed theme, you can use the static theme approach<\/a> to create a theme XPI and make further modifications to the new tab background, sidebar, icons, and more. Visit the theme syntax and properties page<\/a> for further details.<\/p>\n

When your theme is generated, visit the Developer Hub<\/a> to upload it for signing. The process of uploading a theme is similar to submitting an extension. If you are using the theme generator<\/a>, you will not be required to upload a packaged file. In any case, you will need to decide whether you would like to share your design with the world on addons.mozilla.org<\/a>, self-distribute it, or keep it for yourself. To keep a theme for yourself or to self-distribute, be sure to select \u201cOn your own\u201d when uploading your theme.<\/p>\n

\"\"<\/p>\n

Whether you are creating and distributing themes for the public or simply creating themes for private enjoyment, we all benefit by having an enhanced browsing experience. With the theme generator<\/a> on AMO and Firefox Color<\/a>, you can easily create multiple themes and switch between them.<\/p>\n","protected":false},"excerpt":{"rendered":"

Last September, we announced the next major evolution in themes for Firefox. With the adoption of static themes, you can now go beyond customizing the header of the browser and … Read more<\/a><\/p>\n","protected":false},"author":1494,"featured_media":8631,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[121],"tags":[],"yoast_head":"\nDesign and create themes for 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\/2019\/02\/27\/design-and-create-themes-for-firefox\/\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Andrew Truong\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/blog.mozilla.org\/addons\/2019\/02\/27\/design-and-create-themes-for-firefox\/\",\"url\":\"https:\/\/blog.mozilla.org\/addons\/2019\/02\/27\/design-and-create-themes-for-firefox\/\",\"name\":\"Design and create themes for Firefox - Mozilla Add-ons Community Blog\",\"isPartOf\":{\"@id\":\"https:\/\/blog.mozilla.org\/addons\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/blog.mozilla.org\/addons\/2019\/02\/27\/design-and-create-themes-for-firefox\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/blog.mozilla.org\/addons\/2019\/02\/27\/design-and-create-themes-for-firefox\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/blog.mozilla.org\/addons\/files\/2019\/02\/pexels-photo-9985871.jpeg\",\"datePublished\":\"2019-02-27T17:00:34+00:00\",\"dateModified\":\"2019-03-07T18:33:03+00:00\",\"author\":{\"@id\":\"https:\/\/blog.mozilla.org\/addons\/#\/schema\/person\/6cfd7f3ceb9f5b752232cdb097c918f5\"},\"breadcrumb\":{\"@id\":\"https:\/\/blog.mozilla.org\/addons\/2019\/02\/27\/design-and-create-themes-for-firefox\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/blog.mozilla.org\/addons\/2019\/02\/27\/design-and-create-themes-for-firefox\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/blog.mozilla.org\/addons\/2019\/02\/27\/design-and-create-themes-for-firefox\/#primaryimage\",\"url\":\"https:\/\/blog.mozilla.org\/addons\/files\/2019\/02\/pexels-photo-9985871.jpeg\",\"contentUrl\":\"https:\/\/blog.mozilla.org\/addons\/files\/2019\/02\/pexels-photo-9985871.jpeg\",\"width\":1280,\"height\":853},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/blog.mozilla.org\/addons\/2019\/02\/27\/design-and-create-themes-for-firefox\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/blog.mozilla.org\/addons\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Design and create themes for 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\/6cfd7f3ceb9f5b752232cdb097c918f5\",\"name\":\"Andrew Truong\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/blog.mozilla.org\/addons\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/22a1a0cdbb9183382ab1e8c755378c1e?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/22a1a0cdbb9183382ab1e8c755378c1e?s=96&d=mm&r=g\",\"caption\":\"Andrew Truong\"},\"description\":\"Add-ons Community Marketing Intern\",\"url\":\"https:\/\/blog.mozilla.org\/addons\/author\/atruong\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Design and create themes for 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\/2019\/02\/27\/design-and-create-themes-for-firefox\/","twitter_misc":{"Written by":"Andrew Truong","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/blog.mozilla.org\/addons\/2019\/02\/27\/design-and-create-themes-for-firefox\/","url":"https:\/\/blog.mozilla.org\/addons\/2019\/02\/27\/design-and-create-themes-for-firefox\/","name":"Design and create themes for Firefox - Mozilla Add-ons Community Blog","isPartOf":{"@id":"https:\/\/blog.mozilla.org\/addons\/#website"},"primaryImageOfPage":{"@id":"https:\/\/blog.mozilla.org\/addons\/2019\/02\/27\/design-and-create-themes-for-firefox\/#primaryimage"},"image":{"@id":"https:\/\/blog.mozilla.org\/addons\/2019\/02\/27\/design-and-create-themes-for-firefox\/#primaryimage"},"thumbnailUrl":"https:\/\/blog.mozilla.org\/addons\/files\/2019\/02\/pexels-photo-9985871.jpeg","datePublished":"2019-02-27T17:00:34+00:00","dateModified":"2019-03-07T18:33:03+00:00","author":{"@id":"https:\/\/blog.mozilla.org\/addons\/#\/schema\/person\/6cfd7f3ceb9f5b752232cdb097c918f5"},"breadcrumb":{"@id":"https:\/\/blog.mozilla.org\/addons\/2019\/02\/27\/design-and-create-themes-for-firefox\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/blog.mozilla.org\/addons\/2019\/02\/27\/design-and-create-themes-for-firefox\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/blog.mozilla.org\/addons\/2019\/02\/27\/design-and-create-themes-for-firefox\/#primaryimage","url":"https:\/\/blog.mozilla.org\/addons\/files\/2019\/02\/pexels-photo-9985871.jpeg","contentUrl":"https:\/\/blog.mozilla.org\/addons\/files\/2019\/02\/pexels-photo-9985871.jpeg","width":1280,"height":853},{"@type":"BreadcrumbList","@id":"https:\/\/blog.mozilla.org\/addons\/2019\/02\/27\/design-and-create-themes-for-firefox\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/blog.mozilla.org\/addons\/"},{"@type":"ListItem","position":2,"name":"Design and create themes for 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\/6cfd7f3ceb9f5b752232cdb097c918f5","name":"Andrew Truong","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/blog.mozilla.org\/addons\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/22a1a0cdbb9183382ab1e8c755378c1e?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/22a1a0cdbb9183382ab1e8c755378c1e?s=96&d=mm&r=g","caption":"Andrew Truong"},"description":"Add-ons Community Marketing Intern","url":"https:\/\/blog.mozilla.org\/addons\/author\/atruong\/"}]}},"_links":{"self":[{"href":"https:\/\/blog.mozilla.org\/addons\/wp-json\/wp\/v2\/posts\/8618"}],"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\/1494"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.mozilla.org\/addons\/wp-json\/wp\/v2\/comments?post=8618"}],"version-history":[{"count":0,"href":"https:\/\/blog.mozilla.org\/addons\/wp-json\/wp\/v2\/posts\/8618\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blog.mozilla.org\/addons\/wp-json\/wp\/v2\/media\/8631"}],"wp:attachment":[{"href":"https:\/\/blog.mozilla.org\/addons\/wp-json\/wp\/v2\/media?parent=8618"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.mozilla.org\/addons\/wp-json\/wp\/v2\/categories?post=8618"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.mozilla.org\/addons\/wp-json\/wp\/v2\/tags?post=8618"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}