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


I have updated a Greasemonkey (Firefox) script to suppress white backgrounds.

The scripts will work in Chrome if you install Tampermonkey.

http://userscripts-mirror.org/scripts/show/142763

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.

Tags:

Colors

Firefox