How to change the background color of direct image links (Add-on no longer working)
Some time within the last day, an extension I use to turn direct image link pages white has stopped working. For context, I use the dark theme provided default by Firefox. I need it for almost all other pages. But when it comes to viewing images, almost all are intended to be viewed on a white background so up till now I used the extension "Image Background Color Picker" to force the page to be white. I never had an issue with this until today.
The extension is still functioning, I can see the lines of code its running on the page using inspect element. It has a feature that creates a checkered background instead of a flat color, which does also work if I turn that on. What I realized is that it seems like suddenly Firefox is using a flat .png as a background image for seemingly no reason? If it worked this way before, it did not interfere with extensions until now. When I disable this through the inspect feature the background underneath is white like intended. This is consistent even if I disable all relevant Add-ons. I've attached image examples of this, with no Add-Ons that should be effecting the page running.
How can I get this to go away? Is there a way to go into Firefox's config and disable it through there? I don't want to have to keep installing more and more Add-ons seeing as Firefox can barely handle the ones I do run. I'm unable to use an ad-blocker to block it because they can't detect the .png on their own, presumably because its a Firefox asset instead of a webpage element? I have no clue. I just want to fix this. I can't use the light theme due to eye strain so for now I'm stuck disabling this .png manually every time I open an image.
All Replies (1)
You can add this CSS code to the userContent.css file.
@media not print {
:root {
/* The colors here were chosen to be readable over the corresponding
backgrounds. This is important in case this ImageDocument is for an
image that happens to be corrupt, in which case we'll display a textual
error message over the background, instead of the image itself. */
color: #222 !important;
background-image: unset !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.
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
More info about userContent.css and userChrome.css in case you are not familiar: *https://www.userchrome.org/what-is-userchrome-css.html
Modified by cor-el