Need to change background color of about:blank page
For years I've set the background display color in about:config to a medium gray, #CCCCCC. Main purpose was to change the background color of the about:blank page, which is my home page and my new tab page.
Note I am not overriding colors; #CCCCCC only showed up as the bgcolor for about:blank. Occasionally websites which forgot to specify a background color would show up with a medium gray background, a minor inconvenience and a hint their coding was not so great.
Just realized my background color selection for about:blank isn't working anymore. The background color of the about:blank page is white. Not sure when it changed. I failed to notice when the medium gray disappeared because I have been reflexively pressing the dim screen button. I have vision issues and need to avoid a white screen.
There was a question in 2021 about the about:blank page bgcolor turning white which was archived but does not look resolved.
https://support.mozilla.org/en-US/questions/1344438
Does about:blank now specify a bgcolor, overriding my about:config setting? I still have browser.display.background_color set to #CCCCCC. Do I need to change another value for about:blank now? Thanks for your help.
Using Firefox 105.0.1 64-bit on a Windows 10 Toshiba laptop.
All Replies (11)
I don't know why that preference would no longer work. If you are willing to install Greasemonkey, there is a user script called No Brighter which would help. Otherwise, you can create a file userContent.css to change the background colour of about:blank (and other pages). If either of those possibilities is of any interest, I will provide further information.
https://addons.mozilla.org/en-US/firefox/addon/greasemonkey/
Add CSS code to the userContent.css file in the chrome folder in the Firefox profile folder.
/* about:blank */
@-moz-document url-prefix(about:blank){html,body{background-color:#eee!important}}
It is not that difficult to create userContent.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 userContent.css (name is case sensitive). In this userContent.css text file you paste the text posted. On Mac you can use the TextEdit utility to create the userContent.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 file extension and you end up with a file named userContent.css.txt. To avoid this you need to make sure to select "All files" in the dialog to save the file in the text editor using "Save File as".
You need to close (Quit/Exit) and restart Firefox when you create or modify the userContent.css file.
More info about userContent.css and userChrome.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
In Firefox 69 and later you need to set this pref to true on the about:config page to enable userChrome.css and userContent.css in the chrome folder.
- about:config => toolkit.legacyUserProfileCustomizations.stylesheets = true
- https://support.mozilla.org/en-US/kb/about-config-editor-firefox
Somewhere along the way, the "Use system colors" feature got enabled by default. Perhaps this was around the time of all those theming changes. Anyway, "Use system colors" overrides your personal text/background color selections, so you need to untick that box:
I checked "use system colors" and changed the bgcolor from #cccccc to the lurid color you see there during troubleshooting. Neither were set that way before. Going back to my original settings, "use system colors" unchecked, and bgcolor #cccccc (restarting my laptop every time just for the heck of it) have not resolved the about:blank page having a white background problem for me. I wish it had been that easy.
Terry said
I don't know why that preference would no longer work. If you are willing to install Greasemonkey, there is a user script called No Brighter which would help. Otherwise, you can create a file userContent.css to change the background colour of about:blank (and other pages). If either of those possibilities is of any interest, I will provide further information. https://addons.mozilla.org/en-US/firefox/addon/greasemonkey/
I've used Greasemonkey in the past (to hide the tab bar when only one tab is open) so I'm willing to give it another shot. Thank you!
cor-el said
Add CSS code to the userContent.css file in the chrome folder in the Firefox profile folder.
/* about:blank */ @-moz-document url-prefix(about:blank){html,body{background-color:#eee!important}}
It is not that difficult to create userContent.css if you have never used it.
I am going to try the Greasemonkey solution and if that doesn't pan out I'll alter the .css file. Thank you!
CLARMAP said
I checked "use system colors" and changed the bgcolor from #cccccc to the lurid color you see there during troubleshooting. Neither were set that way before. Going back to my original settings, "use system colors" unchecked, and bgcolor #cccccc (restarting my laptop every time just for the heck of it) have not resolved the about:blank page having a white background problem for me. I wish it had been that easy.
Yes, you need "Use system colors" unchecked if you want to set your own text and background colors.
All other website colors are appearing normally? Any difference between the built-in System and Light themes?
The No Brighter user script link.
Good news and bad news.
The good news is the "about:blank page being white" issue is no longer happening. The browser.display.background_color I specify in about:config (#CCCCCC or similar) is now the about:config background color.
The bad news is I do not know why it happened or what fixed it.
I have tried to recreate the problem by --checking and unchecking "use system colors" --changing browser.display.background_color through about:config --changing the background color instead through Settings=>Color by clicking on the color box and selecting from the color menu --every possible combination of the above
The problem stopped after I changed the background color through Settings=>Color but I don't know if that was the resolution. Doubt it. When I change the bgcolor through about:config it changes the color in Settings=>Color, and vice versa.
Thank you all for your help. Wish I knew why it happened.
Terry said
The No Brighter user script link. https://greasyfork.org/en/scripts/979-nobrighter
Thanks so much for the tip. It is super easy to add colors and alter brightness levels in the script. I love it.
Windows: go to %appdata%/mozilla/firefox/profiles and open the folder in there. On Linux the equivalent is ~/.mozilla/firefox/RANDOM_TEXT.default/ ... look for the chrome folder. In that folder, find userContent-example. ... Add this line to the file @-moz-document url-prefix(about:blank) {*{background-color:#000000;}}
Hope You Find This Useful, Peter