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
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.
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.
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.
Now You: Do you run custom themes in your browser?
I can see why Chrome became popular, it was minimalist, fast, and apparently what most users wanted. With Quantum I thought maybe Firefox was back on track but again it just keeps piling on features trying to be relevant. The next big browser will probably be like Chrome originally was with a whole lot less Google influence.
It’s a start, I suppose, but the UI is still flat and ugly. No gradients, no text shadows or highlights, no alternative tabs or icons… we’re still very far from Custom Theme Restorer and other legacy extensions.
It’s obvious customization and powerful add-ons aren’t a priority for Mozilla. The necessary APIs aren’t coming anytime soon and the disgruntled extension devs probably won’t be back either. Thankfully Waterfox supports all my add-ons.
well you’ll be surprised to know that the UI customization is still alive !
check Firefox Quantum +FFStyled
https://byfrankell.webnode.com/
@frankell Not for too long: https://bugzilla.mozilla.org/show_bug.cgi?id=1416044
Mozilla Corporation doesn’t want users deviating from their holy “Photon” UI.
yeah that’s why 1 year ago I started my independent project “FFStyled” !
1- I hate .exe
2- I can’t even find the download link..?
3-.. so I can’t verify if it is capable to find my FF portable profile?
4- “many of them orphaned by the legacy addon Stylish”.. ??
4 – https://userstyles.org/users/176916
3 – during the setup browse to > FF portable \ Data \ profile
2 – start with the free ColorsCode> http://wiki.appvisor.org/FFStyled_ColorsCode
then if you are interested please contact me by mail
1 – actually in the early version I used .bat files
@yogaisevil,
Thanks to very useful information!
Before Quantum, the “FT DeepDark” was my favorite. It will be an alternative to it.
In combination with the “Dark Background and Light Text”, I was able to ideally improve the UI of DarkTheme.
On the privacy side, I’d love to know if using this feature adds to the unique fingerprint of the browser and therefore making you more identifiable. Anyone?
This is a good thing, who doesn’t want to easy customization in browser?
In the case for ‘Dark theme’ users with more consistency, we have: https://github.com/overdodactyl/ShadowFox/
As for scrollbars I use this “hack”: https://old.reddit.com/r/firefox/comments/7f6kc4/floating_scrollbar_finally_possible_in_firefox_57/ and the code provided here:
https://old.reddit.com/r/firefox/comments/7f6kc4/floating_scrollbar_finally_possible_in_firefox_57/dqdbx6t/
@yogaisevil,
Thanks to very useful information!
Before Quantum, the “FT DeepDark†was my favorite. It will be an alternative to it.
In combination with the “Dark Background and Light Textâ€, I was able to ideally improve the UI of DarkTheme.
for something similar but differrent check the freeware app “FFColorsCode” for the normal themes
http://wiki.appvisor.org/FFStyled_ColorsCode
Thanks, Martin for letting me know.
I really like one of the themes they offered with as an extra bonus now I have the active tab coloring. Quite handy I think personly! I also saved the theme that I have installed.
Do you know next to the MozBackup how I can back up this theme (and others I have custom made for my self) separately (apart) on a backup disk in case I have to reinstall main o.s. or Firefox?
This is a lot better than the Personas web creator.
This is basically what Chrome and Vivaldi have… lame. Pretty lame.
Firefox is so successfully copying Chrome in every way that after a while the only difference between them will be the name and icon.
Just for the record, I’m not a fan of Chrome either, I was originally a Firefox fan around 2007 when Firefox was all the shit and nothing could stand on its pinky finger, even when it got bloated and slow, its add-ons are what kept it on top, then Chrome appeared with its sheer speed and responsiveness and it stole the cake, but now Firefox stripped its only trump card – the add-ons and is constantly becoming less and less customizable and it’s almost on Chrome’s level of lack of customization. Such a shame – a great browser has fallen to the bottom and competing with the garbage.
Last time I checked it was not possible to change the address bar color, every single theme has the blinding ‘white on black’ address bar regardless if it’s supposed to be a “dark theme”. Firefox as a definitive advantage here.
@yogaisevil
If that’s a joke I will laugh with you, if you’re serious I won’t laugh at you.
No idea what bad spirits inhabit those browsers nowadays, but they are all becoming so terribly ugly that the need for such embellishments becomes more urgent by the day. Not my problem though, as I am sticking to FF39 and New Moon, and satisfied enough with how they look. But since that Google recently massacred video playback in them, I installed Vivaldi so that at least the granddaughters could keep viewing their youtube videos. Equally abominably ugly that one, too.
I did use Nasa Night Launch in FF about a decade ago cos I prefered a dark theme at the time and it looked really nice, but I did not reinstall it at later occasions.
And I do use css, but only to remove unwanted junk from websites, to make too small text more readable, and to reformat frequently visited websites that look made for phones so that they become less irritatingly narrow on a desktop – not for recolouring purposes.
@stilofilos: “No idea what bad spirits inhabit those browsers nowadays”
It’s not just browsers, it’s a vile trend across the entire software industry. Usability and aesthetics aren’t cool anymore, now it’s “minimalism” and ugliness. While it’s not the sole example, a great example of all this is Google’s “Material Design”.
On the bright side, this has all the hallmarks of simply being the current fashion, and I expect that it will, eventually, pass.
@stilofilos,
You might want to try Waterfox. It supports both classic addons as well as WebExtensions. The dev is also working on creating WF’s own addons repository. https://blog.waterfoxproject.org/waterfox-56.2.3-release-download
Try Legibility for the font size problem which I use myself: https://addons.mozilla.org/en-US/firefox/addon/text-legibility/?src=api
@TelV,
Thanks for the reply.
I am actually aware of that, but last time I ckecked out Waterfox, it appeared to have a 64bits version only while my computer (the only working one these days) is still 32bits, the other one (64bits) is broken and will be replaced shortly , and then Waterfox will definitely be installed on it.
About text sizes, multiple zoom things are available indeed, but I don’t need overall text being bigger, just sometimes in some elements, like menus or buttons e.g. in a few sites that are made for lower-resolution monitors than mine and so become unreadable while other elements are just fine, and that’s why I prefer css.
I would be more happy if Mozilla could speed up work with missing APIs.
Nah, adding more useless stuff is more important.
The first thing I do immediately after an upgrade of Firefox Portable is to remove features of course included “Text Pilot Experiment”. I am not a stupid guinea pig.
@Anonymous: how do you remove the “test pilot experiment”?
del /S /Q “D:\PortableApps\FirefoxPortable\App\Firefox64\browser\features\*” + using Pants user.js
@Anonymous: thank you. I also use Firefox portable, and the command worked well, except that for “screenshots” and “webcompat” I get “Access is denied” – do you get that too?
The Panst user.js is a big file. Do you know which specific settings you use to delete or prevent features (getting) installed? If you don’t, no worries.
…and FYI in “Options / General / Performance” I unchecked all boxes and turned “content process limit” to 1
@Anonymous: how does that help privacy? It is just about performance isn’t it?
I said that because 1 can help limiting bugs about processes that could continue to run in background even with Firefox Portable closed, which could cause “Access is denied”?.
OK, clear, once again, many thanks for your help.
“except that for “screenshots†and “webcompat†I get “Access is denied†– do you get that too?”
No, but I use a portable only 64 bit, not the full portableapps version which include the 32 bit also, may be that’s why? if you have both you have to delete the 32 bit features folder too : del /S /Q “D:\PortableApps\FirefoxPortable\App\Firefox\browser\features\*”
“Do you know which specific settings you use to delete or prevent features (getting) installed?”
To avoid headache I use the Pants user.js full and I update it with the “updater.bat”, I just made some modifications using the “user-overrides.js”. Have a look at the /*** 0500: SYSTEM ADD-ONS / EXPERIMENTS, probably there..
@Anonymous: many thanks for your input.
Like you, I only have the 64-bit FF version installed. But with the /***0500 section of user.js I was able to block the 2 that denied access. /**0500 also has a few other settings I found interesting to adjust. Thanks again for your help.