How to Customize and Add New Firefox Themes

Firefox, like other browsers, has alternative themes you can add to it. These add backgrounds to the tab and toolbar. As such, themes are one of the best things to customize Firefox with. This is how you can add new themes to the browser and customize them.

Adding New Themes to Firefox

To find and add new themes to Firefox, open this page on the Mozilla site. That includes an extensive gallery of themes for you to choose. Click a theme there and press the + Add button. That will add the theme to the tab bar and toolbar as shown below.

Note that those are only basic themes. Open this website page for more complete themes that also alter the address bar, toolbar buttons window and tab frames. Choose a theme from there, press the + Add to Firefox button, click Install and restart the browser to add it.

You can remove or switch Firefox themes by clicking Open menu > Add-ons. Then click Appearance to open the theme list below. Press the Enable button beside a theme to switch to it.

Customizing the Themes

You can further customize those themes with Firefox extensions. One of the best is Personas Expression, which gives you a variety of extra customization options for Firefox’s themes. Open the Personas Expression page here, press the green button and then restart the browser to add it to Firefox.

Then the toolbar will include a Personas Expression button. Press that button to open the sidebar shown in the shot below. That includes numerous customization options for the theme.

At the very top of the sidebar there is a Modify text color option. With that you can alter the theme’s text colors. Click the option and then the Color box to open the palette in the snapshot below. There you can choose an alternative text color for the tabs.

Just below that option you can select a Modify text shadow checkbox. Click that to open the Color bar as below. Drag that bar further to the right to increase the shadow effect for the tab text. You can also choose alternative shadow colors by clicking the palette box beside the bar.

Further down the sidebar are toolbar and tab options. There, there is a Draw title bar shadow option for you to select. That adds a shadow effect to the tab bar. Click that option and the Active bar palette to choose a color for the shadow. Then you can adjust the width of the shadow effect by dragging the Width bar.

There is also a Modify tab color checkbox on the sidebar. With that you can customize the active (selected) tab color as shown below. Click the Active color box to choose a color and then drag that bar to configure the color.

Below that there are further active window options. For example, adjust the background color of the tab bar and toolbar with the Draw background color option. Select that option and click the Color box beside the drag bar to choose a background color from the palette. Then drag the bar further right to increase the new background color.

The Draw background texture option below that adds textures such as dots, grid and slanting lines to the tab bar and toolbar. Click that option and then select the Pattern drop-down list to choose a texture. Then you can select a texture for the color by clicking the Color palette box below that. Drag the Scale bar further right to increase the texture’s scale.

Why not add a transparency effect to the theme? Firefox users can do just that by selecting the Transparent foreground option. Then drag the Strength bar further right to add more transparency to Firefox’s toolbar.

Personas Expression also has options to customize the inactive window’s theme. To try these options out, just drag a tab in the Firefox browser window out from the tab bar into an empty space on desktop. That will then open a second Firefox window with the tab in it.

The selected window is the active one. Now you can customize the theme in the inactive window. To customize the inactive window’s theme color, select the Draw background color option and click its palette box. Choose a color from there and drag the bar to adjust the color settings for inactive window as shown below.

In addition, Firefox users can also select Transparent foreground and Draw background texture options for inactive windows. They are exactly the same options as those included for active windows, except they’ll customize the textures and transparency for the inactive windows.

Add Solid Color Themes to Firefox

To set up your own solid color theme for Firefox, check out Lightweight Themes Manager. This is another Firefox add-on with theme customization options. With that you can add a solid color theme to the browser.

Open the extension’s page and press the + Add to Firefox button to install it. In addition, you’ll also need to restart the browser. Open Firefox’s Add-on page, select Extensions, click More under Lightweight Themes Manager and then press the Open button to open the tab below.

There you can select alternative Firefox themes to switch to or remove them. Furthermore, you can set up new solid color themes by pressing the Options button at top right of tab and then selecting Solid Color Themes from the menu. That will open the tab in shot below.

Now click the Background color box to open a palette. You can choose a color for the theme from that palette. Click the Text color box to select tab font colors the theme.

Press Install Theme and then Allow buttons to add the solid color theme to Firefox as below. You can further customize that theme with the Personas Expression sidebar.

So those are two great add-ons Firefox users can further customize Firefox’s themes with. With new themes, and those additional extensions, you can transform the browser’s tab bar and toolbar with new styles. Open this TechJunkie page for some more Firefox customization tips.