How to Create Firefox Themes

There are a few different ways to create your own Firefox themes, but the simplest one is the latest solution from Mozilla: Firefox Color. It provides a simple interface to design your own themes, and it lets you package, export, and publish them to the Firefox marketplace.

How to Download the Firefox Color Theme Creator

While you can use Firefox Color on the web, the add-on is the simplest way to make your themes and test them on Firefox in real time.

1. Open Firefox, and go to color.firefox.com.

2. When you arrive, you'll be able to play around with Firefox Color a bit, but your should just get the add-on to start. Select Install Firefox Color in the center of the page to download the add-on.

3. Select Add to Firefox.

How to Use Firefox Color to Create Firefox Themes

Now that you have the add-on, you can start creating and saving your own custom themes. Everything is simple and graphical, so there's no need to get too technical.

1. Return to the Firefox Color website.

2. You'll arrive on a page containing the colors for different elements within your browser window. Changing these will change them in real time, both in the preview and your browser itself.

   If you have something in mind, you can get to work right away. In case you're looking for inspiration, you can upload a background picture through Firefox Color. Try picking colors out of that image.

3. As you fill in each color, you'll see which parts of the window are affected in the preview.  

4. Select the Custom backgrounds tab. Here you can choose between a pattern from Mozilla or you can upload your own background image for your theme.

5. If you do plan to use your own background image, you'll need to cut it down to fit the background on Firefox. Select Or add your own to select your own background image.

   Mozilla hasn't released definite specifications yet for Firefox Color, but 3000px by 650px seems to be a good estimate.

6. After you've added your image, use the positioning controls to adjust the placement of your background in your Firefox window.

7. When you're satisfied with your theme, you can save it to apply automatically any time you want. Select the Heart in the upper right of the window to save your theme.

8. You can also export your theme to share or upload to the Firefox marketplace. Select Export in the upper right of the window to begin the process.

9. Firefox Color will start by letting you know you're going to create a compressed export of your theme. Select Next.

10. You'll be asked to create a descriptive name for your theme. This is what it will be titled under if you upload the theme to the marketplace.

11. Firefox will give you the option of downloading a ZIP file or an XPI file. Select either.

    XPI files can be uploaded to the marketplace or installed directly into Firefox.

12. Congratulations! You can now quickly and easily make and share your own Firefox themes.