Is there a way to darken the icons on the toolbar (bookmarks, history, etc)?
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
Giải pháp được chọn
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.
Đọc câu trả lời này trong ngữ cảnh 👍 1Tất cả các câu trả lời (20)
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.
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.
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.
Được chỉnh sửa bởi ThePillenwerfer vào
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 typeabout: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!
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:
- https://www.userchrome.org/what-is-userchrome-css.html
- https://www.userchrome.org/how-create-userchrome-css.html
- https://www.userchrome.org/firefox-changes-userchrome-css.html
You need to set this pref to true in about:config to enable userChrome.css and userContent.css in Firefox 69+.
- about:config => toolkit.legacyUserProfileCustomizations.stylesheets => true
- https://support.mozilla.org/en-US/kb/about-config-editor-firefox
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)
Được chỉnh sửa bởi cor-el vào
@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.
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.
Được chỉnh sửa bởi ThePillenwerfer vào
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
andjn4zmg07.default
so you may have put thechrome
directory in the wrong one. Find which one it's in a copy it to the other. What you want to end up with isho2ejz5j.default-release\chrome\userChrome.css
andjn4zmg07.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 mychrome
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.
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.
Được chỉnh sửa bởi ThePillenwerfer vào
thepillenwerfer said
Well in that case it should be working. Custom stylesheets enabled — Yes Directory in Profile Directory calledchrome
(all lower case) — Yes File calleduserChrome.css
inchrome
— 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 youruserChrome.css
and looking at Properties just to confirm it isn't actually calleduserChrome.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
Would it be useful if I supplied either the raw data or text to copied in Troubleshooting help?
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'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.
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.
thepillenwerfer said
I've had a thought. Typeabout: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 inabout:config
, which we know it is. Stylesheets are the files it's actually using, in your case justuserChrome.css
. Now, I've seen photographic evidence that you've made the change inabout: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. IfuserChrome.css
isn't listed it means that for all it's there Firefox isn't finding it for some reason.
true & userChrome.css
I'm afraid I've exhausted my limited knowledge so we'll have to hope somebody else can suggest something.
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!
Giải pháp được chọn
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.
Được chỉnh sửa bởi ThePillenwerfer vào
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.