Change the white background in webpages to another color

Question

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 super-user 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?

Answer 1

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.

Answer 2

This is not a perfect solution but you can do this whenever you visit the sites you want to change the background.

In Firefox, go to Tools > Options > Content and click on Colours button.

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".

Answer 3

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);}})();

Answer 4

In the URL bar type about:config and navigate to this setting: browser.display.background_color

More info if you need it here.

Answer 5

I discover lately this firefox addon Stylish. This will do what you want & much more !

Answer 6

I can't post this as a comment to Mehper C. Palavuzlar's answer, but if you use Firefox option like it's described there, it's recommended to use addon like "No Color" to quickly switch it on/off (because changing colors will cause various bugs on many sites). Alternatively, use Pentadactyl addon to be able to assign any action to any key (including any Firefox option toggling).