Updated: September 29, 2025
With every Firefox update, Mozilla introduces some cosmetic changes, small or large. For the most part, in the past decade or even longer, these changes have mostly been anti-ergonomic. This has been the case with all browsers, with so-called "modern" interfaces, but since I use primarily use Firefox, this is where my focus is. Indeed, I've already shown you numerous times how to tweak the UI layout for optimized contrast and usability in this modern era of drab, flat, soulless pseudo-minimalistic interfaces that have no place on the desktop.
Come Firefox 143, the address bar tweak no longer works. Namely, I have changed the pointless gray background to white, so there's more contrast between the URL text and the canvas on which it is written. The whole gray on gray nonsense is exactly that. But alas, Mozilla decided to make my life harder, and based on the emails in my inbox, yours too. Well, we shall rectify this. Let me show you the code you need to introduce to your CSS to tweak the address bar background color to anything you like. After me.
From identifier to class
Previously, as outlined in the tutorial above, the declaration in your userChrome.css file that changes the background color was:
#urlbar-background {
background-color: white !important;
border: 1px solid rgba(10, 132, 255, 0.3) !important;
}
Please note the specific choice of color for the background, the border color and thickness are entirely mine. You may choose any other settings you like. For the sake of this guide, the example stands.
Well, I had to enable debugging in Firefox, launch the browser toolbox, and examine the different elements to see what has changed. As it turns out, the change is tiny but significant. Mozilla has turned the urlbar declarations into a class. Thus, all you need to do is:
.urlbar-background {
background: white !important;
border: 1px solid rgba(130, 130, 130, 0.5) !important;
}
Essentially, replace # with . for this and/or any other urlbar-related declarations you may have in your CSS file. Once you relaunch the browser, your desired tweaks will take effect. And that's all there is to get rid of the stupid gray background.
Look at the example before and now. Compare the text to background contrast. Yup. And that gray text is also stupid. And with pale gray text on gray background, you have a capital crime in ergonomics. Indeed.
Conclusion
Once upon a time, Mozilla did their best to make the URL look the part. Then, copying Google, they started stripping useful information out. The protocol prefix, the color for the certificate padlock, the text color, and now the background, too. The idea is to "hide" this address field from the common ape, because the common ape does not understand the Internet. This does nothing to educate or help the masses, but it does everything to ruin the scientifically established foundations of usability.
If you're not keen on using your browser in monochrome depression-chic mode, you can spice things up with color, and improve your experience. Better contrast, less eye strain, more attention to detail, how it should be. Luckily, Firefox actually allows you to do this. You can edit the UI. This is why, despite all this uttermost nonsense, plus the fact it lets you use amazing Manifest V2 extensions like UBlock Origin (UBO), Firefox should be your primary and perhaps only browser, if possible. Despite all its failings, and many they be, this is still the one truly okay browser out there. So there, you've been warned. And you know how to fix the address bar color, too. Mission accomplished.
Cheers.