Change the white background in webpages to another color

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.


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

alt text