Change the white background in webpages to another color

47

17

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?

Malabarba

Posted 2010-08-26T23:34:13.320

Reputation: 7 588

Various addons can do sort of do this - e.g. https://addons.mozilla.org/En-us/firefox/addon/blank-your-monitor-easy-readin/

– Wilf – 2016-01-10T18:02:23.890

5I would recommend against this, most websites use lots of different classes and CSS for text styling. What happens when you have a black background AND black text, as per styled on the web page? What OS do you use out of interest? – danixd – 2010-08-27T14:56:54.147

Windows 7 mostly, though a platform independent solution would be better 'cause I also use ubuntnu at work. I know it might cause some awkward behavior with some sites, and the background would have to be some light grey instead of black so the text is readable. But this thing's been bothering me to the point that I'm willing to experiment. – Malabarba – 2010-08-28T17:17:17.640

Answers

21

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.

Hello71

Posted 2010-08-26T23:34:13.320

Reputation: 7 636

4Forgive my ignorance, but where do I paste this script? (thanks for the trouble) – Malabarba – 2010-08-27T03:31:35.293

@Bruce: Install Greasemonkey, create a new user script for *, and paste this into the text editor. Save, and refresh the page. – Hello71 – 2010-08-27T14:43:49.130

Ok, this method works best so far. It doesn't change the background of textboxes and a couple other stuff, but other than that it's good. I guess any solution will leave a few white boxes lying around anyway. thanks – Malabarba – 2010-08-28T18:17:05.847

There are scripts ready for download, just scroll down. – valentt – 2013-12-11T09:11:15.890

14

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

Mehper C. Palavuzlar

Posted 2010-08-26T23:34:13.320

Reputation: 51 093

This doesn't override background color when one is specified – Vlad – 2015-12-12T12:39:46.713

This one deserves a vote up for being the easiest. It works on almost every site. It forces you to change the text color though, and that makes it slightly inferior to a couple other methods. – Malabarba – 2010-08-28T17:44:59.127

2@Bruce Connor: True. On the other hand, in may cases if you change the bg color, you will have to change fg color as well, to get reasonable contrast. So in practice having to change the text color may not be a big drawback. – sleske – 2011-05-21T14:19:55.117

2if you use Firefox option like it's described here, 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). – corvinus – 2012-04-30T15:41:54.213

11

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.

howardsmith

Posted 2010-08-26T23:34:13.320

Reputation: 111

Works perfectly - this should be the answer – Mr_and_Mrs_D – 2015-07-10T14:18:55.587

4

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

Pierre Watelet

Posted 2010-08-26T23:34:13.320

Reputation: 4 269

4

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

Dour High Arch

Posted 2010-08-26T23:34:13.320

Reputation: 1 037

Ugh. Painful %20. – Hello71 – 2010-08-27T19:26:08.917

This turns all element's background black, and all elements (not just text) white. – Hello71 – 2010-08-27T19:28:11.710

1This really works well. I changed black to lightgrey, and removed the part that changes the text color, so the text is still black. And the result is actually pretty good. The only issue is that it changes the background of absolutely everything, not just what is white, so a lot of stuff get hidden (like the vote buttons here in SU). Is there a way to fix that? – Malabarba – 2010-08-28T17:54:46.733

1@hello71, somehow when I pasted this in my browser it changed all the spaces to %20. These have been removed. I said it changed all backgrounds black, I have edited it to now change only text backgrounds black, try again. – Dour High Arch – 2010-08-30T03:14:57.130

4

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

Canabliss

Posted 2010-08-26T23:34:13.320

Reputation: 41

3

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

More info if you need it here.

jer.salamon

Posted 2010-08-26T23:34:13.320

Reputation: 758

1Changing this variable only works on webpages that don't specify a background color. I could only get it to work on google.com/firefox and on blank tabs. – Malabarba – 2010-08-27T00:17:44.317

1Firebug will allow you to change pages but you would have to do it each time you visited the site. Change only white backgrounds is kinda tough. – jer.salamon – 2010-08-27T00:36:28.253

1https://addons.mozilla.org/en-US/firefox/addon/1843/ – jer.salamon – 2010-08-27T00:37:31.670

3

I 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: http://www.colorpicker.com
                // 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.

The Bahamunt

Posted 2010-08-26T23:34:13.320

Reputation: 31

Great script! Now if only it would work for the internal pages in Firefox like about:addons, about:config, about:newtab, view-source:*.. You might add a metadata section at the top for easier importing. I'm using this script in combination with the Color Toggle addon. – jk7 – 2016-09-18T22:47:43.977

2

https://addons.mozilla.org/en-US/firefox/addon/blank-your-monitor-easy-readin/

I found this one useful. It lets you choose your own colour on text and background. Just hit the hot-key predefined.

erihanse

Posted 2010-08-26T23:34:13.320

Reputation: 100

2

Colorific

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

FFuser

Posted 2010-08-26T23:34:13.320

Reputation: 21

Unfortunately not availble for FF v57 and above. – KERR – 2018-03-05T04:49:11.417

1

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

José

Posted 2010-08-26T23:34:13.320

Reputation: 11

0

The add-on http://addons.mozilla.org/en-US/firefox/addon/black-background-white-text 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 ToolsAdd-onsBlack background and white textDefault method of changing page coloursInvert.

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 ToolsOptionsContentColors → 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:

BlackFirefox

Badr Elmers

Posted 2010-08-26T23:34:13.320

Reputation: 121

The link is broken (Page not found). – Peter Mortensen – 2018-05-25T19:39:44.037

0

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.

Everett

Posted 2010-08-26T23:34:13.320

Reputation: 5 425

-1

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.

BlackRaider

Posted 2010-08-26T23:34:13.320

Reputation: 1