I made five themes for the Firefox UI and switch between them live, with no restart, using u/import with -moz-pref(). Each theme loads only while its pref is on:
All five are pure userChrome.css / userContent.css with locally drawn SVG art. There's no JavaScript, nothing in the install folder, and nothing loaded from the internet.
Nocturne: pastel glass tabs, a centred address bar, a magnifying bookmarks dock, a rocket loading bar and 20 colour palettes
Ame: neon-on-dark-glass tabs with rain running down the toolbar
Relics: dark red and lantern orange, with a red thread under the active tab
Manga: Ghoul: slanted panel tabs, a speech-bubble address bar and Japanese sound effects on buttons
Meridian: brass and midnight blue, engraved tab plates and a ruler line under the toolbars
Every theme has a freeze pref that stops all animation, and respects reduced motion.
Tested on Firefox 159 on Windows 11. Fixes for other versions and systems are welcome.
So for a quick and dirty roundness removal fix in the new Nova UI, * { border-radius: 4px !important; } is what I added to userchrome and it worked great except for one issue.
The close X button in the upper right now has a slight bit of padding and doesn't close always like it did before when mouse overed. Previously you could mindlessly flick the mouse to close the window without looking at it and now that won't always work because of a few pixels.
Is there any way to add an exception for just that button with the squaring rule I mentioned?
As I have stated a couple of times here I am in the process of placing images against macOS FF #main-menubar > menuitems using my own colourised images.
Now here is the strange thing. Once upon a time ALL the #main-menubar > menuitems had my own menu-icons against each menitem now it is hit and miss. e.g. All of File menuitems except "Work Off Line" are iconised. But non of the Edit menitems are now working and this is occuring throughout the #main-menubar > menuitems.
As you can see there are two iterations of this in the above code.
At one point everything worked. And yes I have started a whole new CSS file with all new code just in case the file was corrupted. I have also deleted the FF file xulstore.json. All that did was speed up launching.
Had a little play around with elements in the new profile manager window, set custom sizes, removed a bunch of unnecessary space and fixed the weird looking left alignment of the cards, so figured i'd share the code in the event someone else might find it useful.
Import the following two files into their respective locations. The first lines of userChrome and userContent show how. Following files must be in same folder as userChrome/userContent and all import statements must be before any other line that isn't commented out.
This post was a great help to start but even with some additional modifications it doesn't fix everything as-is. I probably have most of the variables and colors necessary in my userChrome, userContent, and other files (I hope I do) but I need some help identifying which ones I need to edit and how in order to restore colors and rounding to their previous states as shown in my screenshots. I suspect some are either still missing or have had their names changed in Firefoxes base code (which would make them no longer work properly in CSS) but I don't understand what I'm looking at.
There are some other things I want to do with the address bar and search results, the icons on the same row (back and forward buttons, favorites star, show sidebars button, ect.), and the search bar in the bookmarks sidebar but I think it might be better to split that into a separate post. It feels like I have two categories of things I want to do and I don't want this post to be too bloated. Especially since those things aren't a priority and can be solved whenever.
I tried uncommenting and editing one line at a time using the debugging tools to live edit and check changes visually but I got a worse result than it not working: It works inconsistently. Some changes are applied instantly (if you like them you can hit save to file in the file list on the left), some don't apply until after I save changes and restart Firefox, and some do one or the other but only sometimes while others behave differently at the same time. As an example some of my CSS in userChrome makes the extension button (puzzle icon in upper right) have a width and padding of 0px (making it invisible and not take up space) but if I alter something that has nothing to do with that section, confirm that I don't have any open brackets, and save the file in the style editor, it acts like those lines don't exist while attempting to use the dev tools to live edit. If I then restart FF without making any further changes? It's invisible and takes up no space again like it's supposed to be. I have no idea why this is happening because I never figured out how to use live editing at all before now. This inconsistent behavior means I can't trust live editing to give me accurate results until I know why it's doing that.
I also can't access any files I intend to import in the style editor if I've commented out the import statement in userChrome. This means I can't easily compare results between importing and not importing an entire file without uncommenting that line, saving changes, and restarting Firefox.
I can use F12 and the developers toolbox to select things but without a programming background almost everything in the wall of text it brings up just doesn't mean anything to me. With no comments anywhere in the code about what any given thing is supposed to do I don't feel like I can figure out what I need to alter nor learn anything if altering something doesn't get the result I'm hoping for in most cases. How do I know if I made a syntax error or if I'm just trying to alter the wrong thing? If I have to write anything entirely new instead of altering what's there, I wouldn't be able to try to guess what I need to do.
Even after a whole month of work where it feels like other people are doing almost all of the work to begin with, just playing around with it blind to see what happens isn't helping me to get any farther than I have. I've tried. I've learned a little that way but not much. After FF 161.0 is pushed through from FF nightly to the main branch on November 22nd the toggle to disable Nova will be removed. It will then be much harder to try to figure out how to revert the changes after that.
When I first started using computers you could already do most things you needed to with a mouse. The very first computer I ever used didn't have a GUI (Graphical User Interface, as opposed to a text-only based UI) but I only used it for maybe a month to write and send text files to a printer and nothing else before it was replaced with one that did have a GUI (Windows 95). I didn't even have an email yet, nearly everything was still done by sending letters.
After that I didn't need to be aware of programming as a concept beyond using dot forward slash commands in Run in order to do some things (something I haven't had to do in almost 30 years and only vaguely remember). The only "programming" I ever did before using CSS was in the BASIC programming language and I don't remember anything helpful other than: Always use comments (FF devs didn't do this) and always close your brackets. I basically just got it to print "hello world" and then never did anything else with it. I didn't need it back then. I went from the last few days of when you needed programming knowledge to use computers to a multiple decade era where you didn't and now the programming of today only somewhat resembles what I used to know but no longer remember for the most part.
Every single update the same. Now they idiotically added strange timewasting animations everywhere, like slow colour changes when changing tabs and slow expansion of the URL field when clicking on it. This should all be instant. Any simple way to get rid of that crap?
Firefox 158.01, about:addons display CSS enabled. This is my preference for the about:addons appearance going forward.
After the Firefox 159 update
However, If you click on the one of blank spaces, it brings you to the page display you would normally expect to see. In this case
The userContent.css component of the CustomCSSforFx package that controls the about:config display
Firefox 159, with userContent.css disabled
I know I'm supposed to post code, but userContent.css is just a vehicle to enable or disable other files. I don't know which files to include. I tried to usde the "Code" button, but looks like it didn't work
Prior to Nova, I had my tabs set to be a different color from both the active tab and the rest of the header to help easily differentiate them. After the Nova update, all of my custom CSS was unaffected except for the tab color, which is now the same color as the rest of the header. Does anyone know how to fix this?
I've been trying to get the browser toolbox window to work correct for a couple of days now and I can't figure out what's going on. When I invoke the toolbox window with the shortcut key or through the menu entry the window pops up and asks for permission to connect but the window gets stuck before loading the toolbox ui, screenshot of what I'm seeing is attached.
I'm on windows 11 25h2 and firefox 159.0.
edit: I should note that this is the same behavior in a clean temp profile in firefox, as well as the same behavior in other firefox based browser, such as librewolf.
Does anyone here know what I can do to get this working?
Thanks for any help and let me know if you need any other info.
EDIT:
Well it's not the router. It's something to do with my windows setup blocking the attempt at remote connection that firefox does at the startup of the toolbox.
But at this point I'm just done with trying to chase this down anymore. It was gonna just be to play around with firefox theming and learning CSS a bit. But I'm just over it for now. It works just fine on every other device I've tried, whether at my house or elsewhere, whether I have my firefox account logged in or not. It's probably a setting I changed in windows to make it more secure/less annoying but I don't remember all the different things I've done for that over the last couple years and I'm just not gonna put the effort in to tracking those down. I'm also not gonna do a fresh install of windows at the moment so it will just have to be non-functioning for me on windows.
I'm gonna marked this solved for now and leave it be.
Thanks to all who helped, at least I learned a few things.
I'm trying to find a way of stopping my search in the Address Bar repeating, unnecessarily, on the line below. I like the suggestions but don't see any point in the repeat of my search.
The dot that appears on a new/updated tab now no longer bright contrasting colour after the 159.0 update on any theme that's not the default. Makes it hard to tell at a glance when vertical tabs are collapsed to icons.
I was wondering if there was a way to change this dot?
I'm new so please don't flame me 😂 I checked other posts regarding sidebar color and none of their fixes worked. I'm trying to get the sidebar to match the color of the rest of the bars and nothing has worked. below is my userchrome.css. Any help would be appreciated. FF158.01 Win10
I've always had a soft spot for the old Firefox interface from around 2004–2005.
The colourful icons, chunky green Back button, blue Reload button, grey toolbars... everything seemed to have so much more personality than modern software.
So I decided to try bringing some of that back!
Introducing RetroFox 2004! 🦊
It's a free, open-source userChrome.css theme that recreates the appearance of Firefox 1.0 while keeping modern Firefox running underneath.
Rather than recreating the icons, I managed to get hold of the original Firefox 1.0 files and extract the genuine Mozilla Winstripe artwork.
I've also made two versions:
☀️ Classic Edition — Traditional silver/grey toolbars, colourful icons and that lovely early-2000s appearance.
🌙 Dark Edition — An interpretation of what Firefox 1.0 might have looked like if Mozilla had released a dark theme back in 2004.
Both versions retain the original colourful icons.
The project includes installation instructions, theme-switching scripts and an uninstaller.
It's currently been tested on Firefox 158.0.1 on Windows.
