I'm currently using a dark theme in Firefox. It looks really nice, but many webpages use a plain white background. The resulting contrast is a little unpleasant and sometimes hurts the eye when I switch from a dark tab to a white tab.
Is there a way to make firefox replace white backgrouns everywhere with some other color (light gray, for instance)? It could be a Stylish script, a userChrome.css hack, or anything that works (preferably as light as possible).
To make myself clear: after I achieve my objective, the background color whenever I visit the Superuser site should be light-grey instead of white, and the same should happen to any other site with a white background (google sites, tech crunch, etc).
Is there a way to do that?
315 Answers
I just wrote a quick Greasemonkey script that checks the computed style of the body element and changes it to black (you probably want to choose a different colour):
(function () { if (window.getComputedStyle(document.body, null).getPropertyValue("background-color") == "rgb(255, 255, 255)") { console.log("Setting new background color..."); document.body.setAttribute("style", "background-color: #000000;"); }
})();The problem with these types of things is that unless websites are designed extremely well, there will be blotches of white on black.
4This is not a perfect solution but you can do this whenever you visit the sites you want to change the background.
In Firefox below 38, go to Tools > Options > Content and click on Colours button. In Firefox 38 and higher, go to Edit > Preferences > Content and there click Colors.
Select grey for the "Background", and clear the checkboxes near "Allow pages to choose their own colours, instead of my selections above" and "Use system colours".
I have updated a Greasemonkey (Firefox) script to suppress white backgrounds.
The scripts will work in Chrome if you install Tampermonkey.
This changes all white backgrounds to gray(ish) with some shading. You can configure and set your own base colour from the generic code. Shades of white are also rendered.
I have three variants: Gray, Pink, and Green - all of which can be customized.
Search in user scripts for noWhiteBackgroundColor.
1In the browser search bar, type about:config.
In the search field, type browser.display.background_color.
Double click on the string and change #FFFFFF(hexadecimal code for white) to #000000 (hexadecimal code for black) or any other color you wish and click OK. Restart the browser for it to take effect.
I discover lately this firefox addon Stylish. This will do what you want & much more !
The following Javascript will override the CSS and HTML background elements with white and the text elements with black on the current page, just paste it into your location or browser field:
javascript:(function(){ var newSS,styles='* {background-color:black !important;color:white !important} :link,:link *{color:#99C0EB !important} :visited,:visited *{color:#C398EB !important}'; if(document.createStyleSheet){ document.createStyleSheet("javascript:'"+styles+"'"); }else{ newSS=document.createElement('link'); newSS.rel='stylesheet'; newSS.href='data:text/css,'+escape(styles); document.getElementsByTagName("head")[0].appendChild(newSS); }
})();In the URL bar type about:config and navigate to this setting: browser.display.background_color
More info if you need it here.
3I recently replaced my old computer and needed to set up Firefox again. One of the main things I wished to reinstate was a Greasemonkey script which changed the background colour of any website.
I was therefore a little annoyed that I couldn't find the one I'd used before. Long story short - here is the one from my old PC.
This script is not my own work
All credit must go to Howard Smith. This was originally posted on Userscripts.org which now appears to be unavailable.
Simply create a new user script in Greasemonkey and paste the following in:
(function () { function noWhiteBackgroundColor() { function changeBackgroundColor(x) { // Auto change colors too close to white var backgroundColorRGB = window.getComputedStyle(x, null).backgroundColor; // Get background-color if(backgroundColorRGB != "transparent") { // Convert hexadecimal color to RGB color to compare var RGBValuesArray = backgroundColorRGB.match(/\d+/g); // Get RGB values var red = RGBValuesArray[0]; var green = RGBValuesArray[1]; var blue = RGBValuesArray[2]; // ============================================================================ // Set the base colors you require: // Use: // to find the RGB values of the base colour you wish to // suppress white backgrounds with: // Default gray provided: // ============================================================================ var red_needed = 220; var green_needed = 220; var blue_needed = 255; if (red>=220 && green>=220 && blue>=220) { // White range detection if (red>=250 && red<=255 && green>=250 && green<=255 && blue>=250 && blue<=255) { red_needed += 0; green_needed += 0; } else if (red>=240 && red<=255 && green>=240 && green<=255 && blue>=240 && blue<=255) { red_needed += 6; green_needed += 3; } else if (red>=230 && red<=255 && green>=230 && green<=255 && blue>=230 && blue<=255) { red_needed += 10; green_needed += 5; } else if (red>=220 && red<=255 && green>=220 && green<=255 && blue>=220 && blue<=255) { red_needed += 14; green_needed += 7; } x.style.backgroundColor = "rgb( " + red_needed + ", " + green_needed + ", " + blue_needed + ")"; // The background-color you want } } } var allElements=document.getElementsByTagName("*"); // Get all elements on a page for(var i=0; i<allElements.length; i++) { changeBackgroundColor(allElements[i]);} } window.addEventListener("DOMContentLoaded",noWhiteBackgroundColor, false);
})();I have been using this for almost two years and cannot think of any websites which it has failed to change the white background.
1I found this one useful. It lets you choose your own colour on text and background. Just hit the hot-key predefined.
I use it.
Colorize web pages by means of advanced controls for hue, saturation, lightness and opacity. White-list web domains for automatic colorization (optional!).
NEW: Use drag-and-drop to copy themes as text and to freely group color properties.
P.S.: plus dark Firefox theme
1Install the "Dark Background and Light Text" extension in Firefox. There is a similar one for FF and Chrome, called "Dark Reader"
Though not exactly what you're after... I use a piece of software coupled with a little script in OS X. The software is called Nocturne. The script finds out what time sunrise and sunset are in my geographic location. Then it activates Nocturne at sundown, and switches it off at sunrise. Not specific to Firefox I know, but it sure is nice as it works on any browser, and most other software.
Click on the bar with the left mouse button and customize and you will see a green tree, put it in the bar and click on it. The colors will change and you can still create your own colors in the Edit --> preference --> content --> colors menu item.
Disable: use system colors and allow pages
Another option is to just use Ring of Topaz to change the background colours or remove the back.
Once you go to the site, enter the URL of the website, and choose a background/font color combination that is more readable to you.
0The add-on has a different method for the black colors. It inverts the colors and background images only (inverting colors will not destroy the page design like in CSS or JavaScript methods). You will love it, you feel like if you are in the white mode, and you don't have to install any theme.
After installing, change the default method from "simple css" to "invert" in: menu Tools → Add-ons → Black background and white text → Default method of changing page colours → Invert.
NB: If you have changed the Windows mode to black too, then you will find it better to disable the default Firefox color management and let the add-on do all the work, do this: menu Tools → Options → Content → Colors → uncheck "Use system colors" and select "Never" in "Override the colors specified by the page with my selections above".
Then restart Firefox!
Tip: The add-on put a button in your bar to disable or change the modes from "invert" method to the "CSS" method or "JavaScript" method.
Here is the result:
