Take the 2-minute tour ×
Super User is a question and answer site for computer enthusiasts and power users. It's 100% free, no registration required.

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?

share|improve this question
3  
I 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 Aug 27 '10 at 14:56
    
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 Aug 28 '10 at 17:17

13 Answers 13

up vote 16 down vote accepted

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.

share|improve this answer
2  
Forgive my ignorance, but where do I paste this script? (thanks for the trouble) –  Malabarba Aug 27 '10 at 3:31
    
@Bruce: Install Greasemonkey, create a new user script for *, and paste this into the text editor. Save, and refresh the page. –  Hello71 Aug 27 '10 at 14:43
    
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 Aug 28 '10 at 18:17
    
There are scripts ready for download, just scroll down. –  valentt Dec 11 '13 at 9:11

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

alt text

share|improve this answer
    
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 Aug 28 '10 at 17:44
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 May 21 '11 at 14:19
2  
if 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 Apr 30 '12 at 15:41

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);
    }
})();
share|improve this answer
    
Ugh. Painful %20. –  Hello71 Aug 27 '10 at 19:26
    
This turns all element's background black, and all elements (not just text) white. –  Hello71 Aug 27 '10 at 19:28
1  
This 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 Aug 28 '10 at 17:54
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 Aug 30 '10 at 3:14

I have updated a Greasemonkey script to suppress white backgrounds: (firefox) The scripts will work in chrome if you install Tampermonkey

http://userscripts.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 3 variants: Gray: Pink: and Green http://userscripts.org/scripts/show/142767

All of which can be customised:

Search in user scripts for: (as I cant post all the links)

noWhiteBackgroundColor

share|improve this answer
    
Updated link for this script: userscripts.org:8080/scripts/show/142763 –  Monica Cellio May 29 at 17:58

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

More info if you need it here.

share|improve this answer
1  
Changing 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 Aug 27 '10 at 0:17
1  
Firebug 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 Aug 27 '10 at 0:36
1  

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

share|improve this answer

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.

share|improve this answer

In the browser search bar, type about:config

In search field type browser.display.background_color

Double click on the string and change #ffffff(HEX for White) to #000000(HEX for Black) or any other color you wish and click OK. Restart the browser to take effect.

share|improve this answer

I hope someone finds this useful.
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 hex 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 2 years and cannot think of any websites which it has failed to change the white background.

share|improve this answer

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

share|improve this answer

Colorific

https://addons.mozilla.org/en-US/firefox/addon/colorific-1/

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

share|improve this answer

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.

share|improve this answer

Another option is you could 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

share|improve this answer
    
While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. –  Breakthrough May 30 '13 at 1:22

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.