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

Is there a way to darken the icons on the toolbar (bookmarks, history, etc)?

  • 26 iimpendulo
  • 0 inale ngxaki
  • Impendulo yokugqibela ngu T_H_M

more options

When I installed Firefox, I struggled to find a theme that was easy for me to see. So many had dark borders/backgrounds or busy backgrounds or transparent. It appears that I'm using the default at present and am happy with everything but the visibility of those little icons. Is there is a way to make them darker? Thanks

When I installed Firefox, I struggled to find a theme that was easy for me to see. So many had dark borders/backgrounds or busy backgrounds or transparent. It appears that I'm using the default at present and am happy with everything but the visibility of those little icons. Is there is a way to make them darker? Thanks

Isisombulu esikhethiweyo

FOUND IT!

The first line needs to be :root not root.

That's my fault entirely as I must have failed to pick it up when I cut and pasted Cor-el's code before adding my line to it. Sincere apologies.

Funda le mpendulo kwimeko leyo 👍 1

All Replies (20)

more options

I use a theme called Activist – Balanced which I find clear enough.

There are dozens to choose from but I agree that a lot place style ahead of utility. Some are plain silly.

Helpful?

more options

thepillenwerfer said

I use a theme called Activist – Balanced which I find clear enough. There are dozens to choose from but I agree that a lot place style ahead of utility. Some are plain silly.

This is attractive but the icons (customizable ones on the right) are still faint. That's what I wish I could change.

Helpful?

more options

The big trouble is how they are drawn — they are only outlines rather than solid shapes.

I'm not aware of any simple, or relatively simple, way of changing them.

What you can do, which may help, is make everything bigger.

To do that type about:config into the search/URL bar at the top. After acknowledging the warning another screen comes up with a box along the top. Type, or paste, layout.css.devPixelsPerPx into it. It will then show up again below with -1.0 next to it. Double click the -1.0 and you'll be able to change it then press Return. The picture below it unchanged and set to 1.2 (no -). DO NOT put a big number in, certainly nothing above 2.

That will make EVERYTHING bigger. If you then find that the text on web-sites is too big you can reduce that by going to Settings scrolling down to Zoom and lowering that setting.

Ilungisiwe ngu ThePillenwerfer

Helpful?

more options

thepillenwerfer said

The big trouble is how they are drawn — they are only outlines rather than solid shapes. I'm not aware of any simple, or relatively simple, way of changing them. What you can do, which may help, is make everything bigger. To do that type about:config into the search/URL bar at the top. After acknowledging the warning another screen comes up with a box along the top. Type, or paste, layout.css.devPixelsPerPx into it. It will then show up again below with -1.0 next to it. Double click the -1.0 and you'll be able to change it then press Return. The picture below it unchanged and set to 1.2 (no -). DO NOT put a big number in, certainly nothing above 2. That will make EVERYTHING bigger. If you then find that the text on web-sites is too big you can reduce that by going to Settings scrolling down to Zoom and lowering that setting.

You are right about the problem being that they are simple line drawings. And it's the same in Win11 File Explorer. These little icons just need to be darker, at least, and not pale gray. It's interesting that there are ways to enlarge the icons but it's not the size that is the problem. Thanks for taking the time to provide this option, though. Best wishes!

Helpful?

more options

You can try this code in userChrome.css in the chrome folder in the Firefox profile folder to change the CSS variable --toolbarbutton-icon-fill to black.


:root {
  --toolbarbutton-icon-fill: #000 !important;
}

It is not that difficult to create userChrome.css if you have never used it.

The first step is to open the "Help -> Troubleshooting Information" page and find the button to access the profile folder with the random name (xxxxxxxx.default-release).

You can find the button to go to the profile folder under the "Application Basics" section as "Profile Folder -> Open Folder". If you click this button then you open the profile folder in the Windows File Explorer. You need to create a folder with the name chrome in the profile folder with the random name (name is all lowercase). In the chrome folder you need to create a plain text file with the name userChrome.css (name is case sensitive). In this userChrome.css text file you paste the text posted. On Mac you can use the TextEdit utility to create the userChrome.css file as a plain text file.

In Windows saving the file is usually the only time things get more complicated because Windows can silently add a .txt or .css file extension and you end up with a file like userChrome.css.txt or userChrome.css.css. To avoid this, you need to make sure to select "All files" in the "Save File" dialog in the text editor.

You need to close (Quit/Exit) and restart Firefox when you create or modify the userChrome.css file.

More info about userChrome.css/userContent.css in case you are not familiar:

You need to set this pref to true in about:config to enable userChrome.css and userContent.css in Firefox 69+.

Helpful?

more options

I mistakenly thought the icons were black but were so spindly that they appeared to be grey.

Cor-el's code certainly makes an improvement and could be expanded to:—

:root {
  --toolbarbutton-icon-fill: #000 !important;
  --toolbar-bgcolor: #ffffff !important;
}

which is black on white so as good as it gets. Below is what it looks like with the stock Light theme.

I must say I was shocked that Firefox doesn't have any sort of accessibility settings, or none that I can find; I've never previously looked as I'm personally fortunate enough to not need them. I have raised the lack of such on Mozilla Connect.

LATER EDIT: Anybody reading this in the future please note that the first line of the above code should be :root not root.

(fixed the code, note that leading ':' is a formatting code - c)

Ilungisiwe ngu cor-el

Helpful?

more options

@cor-el and @thepillenwerfer Have I done something wrong? I've restarted Firefox but the icons are still pale gray. See screen shots from FireExplorer plus results.

Helpful?

more options

Everything looks fine on your screenshots but they are too heavily cropped to fully see what's what.

What I can see is that you seem to have two profile directories: ho2ejz5j.default-release and jn4zmg07.default so you may have put the chrome directory in the wrong one. Find which one it's in a copy it to the other.

What you want to end up with is ho2ejz5j.default-release\chrome\userChrome.css and jn4zmg07.default\chrome\userChrome.css. You only need it in the profile directory you use but it won't hurt to have it both.

If that doesn't work click into one of the Profile directories and post a screenshot of the content. Mine is below but is in a different place because I'm on Linux. There's also eight items in my chrome directory whereas yours will only have one.

Ilungisiwe ngu ThePillenwerfer

Helpful?

more options

thepillenwerfer said

Everything looks fine on your screenshots but they are too heavily cropped to fully see what's what. What I can see is that you seem to have two profile directories: ho2ejz5j.default-release and jn4zmg07.default so you may have put the chrome directory in the wrong one. Find which one it's in a copy it to the other. What you want to end up with is ho2ejz5j.default-release\chrome\userChrome.css and jn4zmg07.default\chrome\userChrome.css. You only need it in the profile directory you use but it won't hurt to have it both. If that doesn't work click into one of the Profile directories and post a screenshot of the content. Mine is below but is in a different place because I'm on Linux. There's also eight items in my chrome directory whereas yours will only have one.

The profile to which I added the chrome folder looks like yours.

As for the other profile, I did not realize it was no longer necessary (with sync running) to copy the Firefox data from the Roaming folder to the new computer before installing Firefox, which I did, so that may have caused the odd profile. I remember getting odd popups about this.

The 2nd profile only has two files in it: parent.lock, times.json.

Helpful?

more options

Well in that case it should be working.

Custom stylesheets enabled — Yes Directory in Profile Directory called chrome (all lower case) — Yes File called userChrome.css in chrome — Yes* userChrome.css correctly written — Yes

* I'm clutching at straws but I know Windows Explorer can not show file extensions so it may be worth right-clicking your userChrome.css and looking at Properties just to confirm it isn't actually called userChrome.css.txt.

Hopefully Cor-el will be along later as he knows more about this than I do.

Ilungisiwe ngu ThePillenwerfer

Helpful?

more options

thepillenwerfer said

Well in that case it should be working. Custom stylesheets enabled — Yes Directory in Profile Directory called chrome (all lower case) — Yes File called userChrome.css in chrome — Yes* userChrome.css correctly written — Yes * I'm clutching at straws but I know Windows Explorer can not show file extensions so it may be worth right-clicking your userChrome.css and looking at Properties just to confirm it isn't actually called userChrome.css.txt. Hopefully Cor-el will be along later as he knows more about this than I do.

userChrome.css ... without .txt Attaching the text file. Is the spacing wrong (enlarged and bolded the text to make it easier for you to see). I

Helpful?

more options

Would it be useful if I supplied either the raw data or text to copied in Troubleshooting help?

Helpful?

more options

That looks absolutely fine. Spacing doesn't matter and things are only laid out as they are so it's easy for people to read rarther than computers. It's a mystery to me why it's not working.

Helpful?

more options

I've had a thought.

Type about:support into the Address Bar. When that opens scroll down to "Legacy User Stylesheets" and see what it says.

Active True or False is whether it's switched on in about:config, which we know it is. Stylesheets are the files it's actually using, in your case just userChrome.css.

Now, I've seen photographic evidence that you've made the change in about:config but there have been reports of such settings failing to 'stick' and reverting when Firefox is restarted, which you've obviously done to test your stylesheet, so confirming that will do no harm. If userChrome.css isn't listed it means that for all it's there Firefox isn't finding it for some reason.

Helpful?

more options

thepillenwerfer said

That looks absolutely fine. Spacing doesn't matter and things are only laid out as they are so it's easy for people to read rarther than computers. It's a mystery to me why it's not working.

I thought so but, like you with the file extension, grasping at straws.

I do wonder, though would dread doing so, if I need to do a "refresh". Have to wonder if the copy & paste of Roaming data is the culprit. I deleted the 2nd profile to no effect.

Helpful?

more options

thepillenwerfer said

I've had a thought. Type about:support into the Address Bar. When that opens scroll down to "Legacy User Stylesheets" and see what it says. Active True or False is whether it's switched on in about:config, which we know it is. Stylesheets are the files it's actually using, in your case just userChrome.css. Now, I've seen photographic evidence that you've made the change in about:config but there have been reports of such settings failing to 'stick' and reverting when Firefox is restarted, which you've obviously done to test your stylesheet, so confirming that will do no harm. If userChrome.css isn't listed it means that for all it's there Firefox isn't finding it for some reason.

true & userChrome.css

Helpful?

more options

I'm afraid I've exhausted my limited knowledge so we'll have to hope somebody else can suggest something.

Helpful?

more options

thepillenwerfer said

I'm afraid I've exhausted my limited knowledge so we'll have to hope somebody else can suggest something.
Thanks for caring and trying to solve the mystery!

Helpful?

more options

Isisombululo esiKhethiweyo

FOUND IT!

The first line needs to be :root not root.

That's my fault entirely as I must have failed to pick it up when I cut and pasted Cor-el's code before adding my line to it. Sincere apologies.

Ilungisiwe ngu ThePillenwerfer

Helpful?

more options

thepillenwerfer said

FOUND IT! The first line needs to be :root not root. That's my fault entirely as I must have failed to pick it up when I cut and pasted Cor-el's code before adding my line to it. Sincere apologies.

Indeed you did! Awesome!

Back just before PC's were introduced, I became an accidental programmer at a children's hospital. I took many courses at the SAS Institute and really can't say that I'm a true programmer but I managed to get the hospital's admissions and patient records into a database- Vax Mini at first and then when PC's were introduced used SAS FSP (Full Screen Product for PCs) to create a user interface that enabled doctors to enter their notes directly into the medical records database while simultaneously creating the hard copy used in the medical records dept. This was back before the official internet (though I did exchange data and chit chat with some universities in Australia and New Zealand. Anyway, I know from experience about how a simple little typo can cause havoc.

Anyway, this is a definite improvement but I do wish that the Firefox developers would consider beefing up those little icons. Thanks again.

Helpful?

  1. 1
  2. 2
Buza umbuzo

You must log in to your account to reply to posts. Please start a new question, if you do not have an account yet.