This site will have limited functionality while we undergo maintenance to improve your experience. If an article doesn't solve your issue and you want to ask a question, we have our support community waiting to help you at @FirefoxSupport on Twitter and/r/firefox on Reddit.

Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

How to change the background color and text color of the URL search bar?

  • 4 پاسخ
  • 1 has this problem
  • 1 view
  • آخرین پاسخ توسّط Rhonda

more options

I recently installed a theme that I really like, but the search bar by default is a blinding white color and it contrasts heavily with the dark blue colors in the theme I picked.

Is there a way for me to edit the background color and text color of the search bar to be a different color? I've tried looking at different solutions and most of them make reference to userchrome or something else I have absolutely no idea how to work. Can someone explain to me, in the most simple and hard to get wrong terms as humanly possible, how to change the background and text color in the search bar? Is this something I edit the theme itself for? How do I do that?

Thanks in advance. Attached image shows the part of the browser I'm talking about if it somehow wasn't clear enough. I'd like to turn the white color into, say, dark blue or gray, and change the text color to a light blue or white.

I recently installed a theme that I really like, but the search bar by default is a blinding white color and it contrasts heavily with the dark blue colors in the theme I picked. Is there a way for me to edit the background color and text color of the search bar to be a different color? I've tried looking at different solutions and most of them make reference to userchrome or something else I have absolutely no idea how to work. Can someone explain to me, in the most simple and hard to get wrong terms as humanly possible, how to change the background and text color in the search bar? Is this something I edit the theme itself for? How do I do that? Thanks in advance. Attached image shows the part of the browser I'm talking about if it somehow wasn't clear enough. I'd like to turn the white color into, say, dark blue or gray, and change the text color to a light blue or white.
Attached screenshots

Modified by rrettqt34xc4tv35qby

Chosen solution

Hi to anyone else wondering about this issue- I found a fix that works as of 4/16/2022.

First, get userchrome set up, check the link in Terry's response above.

Then go to about:config, search for userprof, and make sure toolkit.legacyUserProfileCustomizations.stylesheets is set to true- you can change this value by doubleclicking it. If this is not set to true, nothing else will work.

By taking code from different places I managed to create code that changes the background color of your active tab, changes the background color of the search bar, and changes the text color in the search bar. Code is here and you can of course change the colors to whatever you want:

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");

.tab-background[selected="true"] {
      background-color: #393e43 !important;
      background-image: none !important;
    }

@-moz-document url(chrome://browser/content/browser.xul),
               url(chrome://browser/content/browser.xhtml) {
    #urlbar-background{
        background-color: #393e43 !important;
    }
}

#urlbar {
  color: #ffffff !important;
}

You can see what this looks like in the attached image

Read this answer in context 👍 0

All Replies (4)

more options

If you can't edit the theme, userChrome.css is the only method I know. (Please remove the blank space in the link below.) I may be able to provide code otherwise there is the FirefoxCSS sub on Reddit. https://www.userchrome. org/how-create-userchrome-css.html

more options

What theme is this about as this theme might not be compatible ?

Does this also happen with a built-in colorways theme ?

Modified by cor-el

more options

Chosen Solution

Hi to anyone else wondering about this issue- I found a fix that works as of 4/16/2022.

First, get userchrome set up, check the link in Terry's response above.

Then go to about:config, search for userprof, and make sure toolkit.legacyUserProfileCustomizations.stylesheets is set to true- you can change this value by doubleclicking it. If this is not set to true, nothing else will work.

By taking code from different places I managed to create code that changes the background color of your active tab, changes the background color of the search bar, and changes the text color in the search bar. Code is here and you can of course change the colors to whatever you want:

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");

.tab-background[selected="true"] {
      background-color: #393e43 !important;
      background-image: none !important;
    }

@-moz-document url(chrome://browser/content/browser.xul),
               url(chrome://browser/content/browser.xhtml) {
    #urlbar-background{
        background-color: #393e43 !important;
    }
}

#urlbar {
  color: #ffffff !important;
}

You can see what this looks like in the attached image

Modified by cor-el

more options

Dear rrettqt34xc4tv35qby,

Apparently, this solution you have provided must be working for some people. However, I wouldn't even try it. I have no experience in coding let alone taking code from different places and creating your own code to change colors. Isn't this something MOZILLA FIREFOX should be doing? This is their job, and people who will never read your post with this clever workaround will still be asking the same question over and over. By the way, rrettqt34xc4tv35qby has anyone tried your workaround and found it to be helpful? HOW ABOUT IT FIREFOX? If this actually works, then YOU need to FIX it. It sounds like you've been handed the answer on a silver platter.

WHY, is everything in Firefox Browser so difficult to manage? After this last update 99. something, I can't find my previous colors and the white background is about to burn out my eyeballs but on the other hand, there are pages that are BLACK. I have so many different colors on Firefox Browser that I'm about ready to go somewhere else. My THEME is still the same, which is about the ONLY thing that is still the same. The Zoom changes randomly, I set it at 110% and now it's 120%, I set it back to 110 it changes to 120. So I changed it to 133%, I don't know, does this type look like a 133%

My icons such as AD Blocker are a muted Mauve color and Grammarly has changed from its light green to a forest green. Since I would NEVER use Forest Green or Mauve I'm not sure how that happened and, when Grammarly wants to show me an error in spelling for example that notification is PINK. Some of these colors are colors I use for Microsoft and I have ALWAYS used these colors in Microsoft. Now what's going on? I clicked on B for Bold in this message, the first thing it did was to show me this, bold text, just the words . After I typed the word TYPED, highlighted it clicked on Bold and you can see how useful that was. NOT working. Many links I have tried to open are not working.

Please see the attachment entitle Connected Services. Why are there so many and so many with my name in different formats? This has not changed for several updates. I'm not sure why I would use so many different "Connected Services" using my name in different formats. I deleted one of them, or so I thought but it didn't go anywhere.

Why do some of the searches I attempt to put into BOOKMARKS end up on the top row with other icons? For example, instead of "Find and open File Explorer" ending up in my BookMarks it is sitting next to my link for Outlook. See the little bitty horizontal attachment.

The answers that Firefox/Mozilla provide are useless to me. AS I have stated before you need to speak in everyday language NOT computereze. I don't want WORKAROUNDS, I want Firefox to WORK in the first place. Since when does an everyday user like me sitting at home using my computer for basics, need to understand what is being said in the "workaround" instructions.

Under "Language and Appearance" what is this: I want Arial but you have several categories and I don't understand why we have Fonts for Latin or your choosing, Proportional Arial, Sans Serif, Serif, MonoSpace? AND, my all-time favorite: Colors, What are visited links, and Unvisited links? And, as you can see there is that lovely Forest Green. I did change the Background to Grey and it is Grey in some areas but it's still Black in other areas. But then so many pages in white. I just don't understand.

I thought Firefox was supposed to be more secure, which is why I chose it in the first place, and secondly, easier to use. It Is NOT easier to use. What is this: Applications? See attachment. I don't have a clue what these applications are or why I need to choose anything, HELP would be appreciated. FYI: Not one of the "Learn More" links opens. I'm sure it's something I must have done, maybe. If you can't see the "Learn More" it's because of that lovely color.

I Saw the following link from another user's question:

"Hello, I was just wondering where I might find the cheat sheet or or visual explanation of the Advanced Colors section in Firefox Color. I've searched for it on the support page but cannot find it (I want to change the website url color in the search bar from grey to pink but I cannot remember which setting that applies to without the cheat sheet). Thanks for your help! All Replies (3) cor-el cor-el

Top 10 Contributor
   Moderator

Kat Debrev 4/11/22, 9:55 AM 4/11/22, 2:38 PM

Maybe this helps:

   "https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/theme#colors" 

Looks like it could be of help if only I could read it. Print is very tiny, I moved Zoom up to 133% which made a bit of difference. Is this something I, a stay-at-home grandmother can figure out without wondering what all of the computereze words mean?

FYI: Not one of the "Learn More" links opens. I'm sure it's something I did, maybe. If you can't see the "Learn More" it's because of that lovely color.

And, please explain to me why I HAVE TO GO BACK TO PREVIOUS UPDATES and delete them or some similar suggestion, then everything will be GREAT? I don't want to HAVE TO DO that. When you Mozilla Firefox, update It should be a GIVEN that everything is ready to go. I completely understand the many messages I have read in support and help from people asking if they can disable updates.

One last suggestion: I understand your company is not for profit that you use volunteers for your projects and fixes because you are always asking for donations. I have received non-sensical answers in a completely foreign language to questions and I wonder if your volunteers really know what they are doing. SUGGESTION: I would love to be able to speak with someone on the telephone who can access my computer and see ALL of the problems that happen especially after each update.

I desperately need help or I'm going to have to use MS Edge and I do not want to use Edge.