How to style Firefox (with Firefox Color version 2)

Mozilla released Firefox Color in early June 2018 to the public. The Test Pilot Experiment enables Firefox users to change the appearance of interface elements of the browser.

Firefox users needed to install the Firefox Color extension in the browser to get started. The configuration itself happens on the official Firefox Color website where users could select one of the preset themes or create a custom theme for the browser instead.

Theme creation was a matter of selecting one of the supported interface elements and a color or texture for that interface element. Firefox would be updated automatically to reflect the change, and users of Firefox Color could make the custom theme the default in the browser or share it with others.

Firefox Color version 2.0

https://www.ghacks.net/wp-content/up...ersion-2.0.png

Firefox Color was, and still is to a degree limited, when it comes to the elements that you may modify. Mozilla published an update recently that introduces new capabilities to Firefox Color.

First thing that you may notice is that the layout of the Firefox Color site changed. All interface elements that users can change are displayed in list form now underneath the preview area. Firefox users had to click on interface elements in the previous version to change those; now, with version 2.0 of Firefox Color, users select an interface element in the list to change the color.

The site highlights the element in the preview so that you know which interface element you will change. The new interface looks cleaner but it is not as easy anymore in the beginning to find the right interface element to change.

https://www.ghacks.net/wp-content/up...efox-theme.png

That's just temporary though and if you plan to change all elements, not a big issue.

The new version introduces new elements that you may change. There are the new popup background and popup text elements that you may customize after installing the new version. Popup refers to the menu that opens when you click on the main Firefox menu.

Firefox Color supported background patterns from the get-go but version 2.0 introduces an option to select your own pattern. Just click on "or add your own" button to select an image for the pattern that you have on your local device.

https://www.ghacks.net/wp-content/up...efox-color.png

Firefox Color supports jpg, png, and bmp images with a maximum size of 1 Megabyte. The images remain local and are not uploaded to the cloud according to the website.

You can save and share themes that you have created just like before and may notice the new random button at the top when you do. Random picks random colors for all interface elements.

As you can imaging, there is quite a range of possible outcomes. Many don't work too well, for instance those where the background color and text color are too close to each other so that text becomes difficult or even outright impossible to read. Others look quite nice.

Mozilla needs to work on the random feature a bit more. I suggest that it implements a routine to check for text readability and an option to pick a base color for the theme that the random theme is based on.

Closing Words

Firefox Color is a handy feature to customize the look and feel of the Firefox browser without installing themes uploaded to Mozilla AMO.

Firefox Color is still limited, especially when you compare it to the now-retired full themes that Firefox supported in the past. There is still work to be done; the right-click context menu displays in the default colors still even after installing Firefox Colors.