How to Create Firefox Themes

Use a simple tool to make your own themes

Create Firefox themes

There are a few different ways to create your own Firefox themes, but the simplest one is the latest solution straight from Mozilla themselves: Firefox Color. Not only does it provide a simple interface to design your own themes, it lets you easily 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.

    Install the Firefox Color add-on
  3. Firefox will ask if you're sure that you want to install the add-on. Confirm.

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. Either select the new Firefox Color icon in the upper right of your browser, or return to the Firefox Color website. They take you to the same place.

  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.  

    Select the colors for your Firefox theme
  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.

    Adjust your Firefox theme's background image
  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.

    Save your Firefox Color 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.

    Export your Firefox theme
  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.

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

    Download your Firefox theme

    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.