// ==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
