Tech: Adding depth to Firefox rendered pages by over-riding white backgrounds with alpha channel

This is one of those interesting but accidental things.  I was intending to figure out a way to get translucency on Firefox with OS X so that my Tron background theme would show through web pages in the same way it does for my Terminal windows.  That brought me to some interesting discussion about ways to override the background through user scripts.  Specifically a script credited to "Howard Smith" with no OP URL*

// ==UserScript==
// @name        tronBG
// @namespace   hightidetech
// @description change the default bgcolor of websites
// @version     1
// @grant       none
// ==/UserScript==
(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="rgba( " +red_needed+ ", " +green_needed+ ", " +blue_needed+ ", " +opacity+ ")"; // the background-color you want 
                   }
                }
            }
        var allElements=document.getElementsByTagName("*");  // get all elements on a page
        for(var i=0; i
            changeBackgroundColor(allElements[i]);}
    }
    window.addEventListener("DOMContentLoaded",noWhiteBackgroundColor, false); 
})() ;

Once loaded up in to greasemonkey this will essentially turn all of your white background pages to a spiffy shade of lavender.  So, I tried to due the same thing for Tron blue** by changing the RGB values in the variable declarations to:

                var red_needed   = 24;
                var green_needed = 202;
                var blue_needed  = 230;

The results were pretty interesting but way too bright for my taste, possibly even a worse contrast of the white on black.  However, moving from RGB to RGBA which has a way to specify opacity, the rendered results are much more interesting depending on how the original page is styled.  To do this, simply add another variable and change the method call below it to use rgba.

                var red_needed   = 24;
                var green_needed = 202;
                var blue_needed  = 230;
                var opacity      = 0.5;
                ...
                x.style.backgroundColor="rgba( " +red_needed+ ", " +green_needed+ ", " +blue_needed+ ", " +opacity+ ")";

Although there is still some white blockiness here and there, the result is much more interesting providing a layering effect to many of today's most frequently visited web sites; and of course if you don't like Tron blue feel free to try something else more to your taste.

*http://superuser.com/a/808537
**http://www.colourlovers.com/color/18CAE6/Tron_Blue