Change element's background color that is too bright to a light green.
// ==UserScript==
// @name NoBrighter
// @namespace https://github.com/henix/userjs/NoBrighter
// @description Change element's background color that is too bright to a light green.
// @author henix
// @version 20160608.1
// @include http://*
// @include https://*
// @exclude http://boards.4chan.org/*
// @exclude https://boards.4chan.org/*
// @license MIT License
// @grant none
// ==/UserScript==
/**
* ChangeLog:
*
* see https://github.com/henix/userjs/commits/master/NoBrighter.js
*
* 2013-12-4 henix
* changeTransparent should be called on <html> tag, because it can set background-color. fix #1
* Provided other colors, you can uncomment them to use. The number after them is brightness.
*
* 2013-6-17 henix
* The latest version of TamperMonkey don't support "*", change to "http://*" and "https://*"
*
* 2012-8-16 henix
* Change transparent body only when in top frame.
*
* There could be a transparent iframe in a dark parent frame, in which case the old logic will do wrong.
*
* 2012-7-19 henix
* Remove prependSheet because it may clash with <body bgcolor="XX">
*
* 2012-7-15 henix
* Exclude boards.4chan.org
*
* Because users could choose their own style from 4chan which loads after NoBrighter
*
* 2012-7-14 henix
* Add changeTransparent()
*
* 2012-7-14 henix
* Use css stylesheet to set body's default background-color
*
* 2012-7-12 henix
* Version 0.1
*/
// ========== Config ========== //
// Uncomment to use, number after is its brightness
/* Green */
// var targetColor = '#C7EDCC'; // 93
var targetColor = '#C1E6C6'; // 90
/* Wheat */
// var targetColor = '#E6D6B8'; // 90
// var targetColor = '#E3E1D1'; // 89
var Brightness_Threshold = 0.94; // a number between 0 and 1
// For websites updating their contents via ajax, NoBrighter can run in background and convert background color periodically.
var longRunSites = [
'mail.google.com',
'docs.google.com',
'plus.google.com',
'groups.google.com',
'twitter.com',
'github.com',
'www.coursera.org',
'class.coursera.org',
'weibo.com',
'www.weibo.com',
'www.renren.com',
'feedly.com',
'reader.aol.com',
];
var $minHeight = 6;
// ========== End of config ========== //
function isTransparent(color) {
return color === 'transparent' || color.replace(/ /g, '') === 'rgba(0,0,0,0)';
}
function changeBgcolor(elem) {
if (elem.nodeType !== Node.ELEMENT_NODE) {
return;
}
var bgcolor = window.getComputedStyle(elem, null).backgroundColor;
if (bgcolor && !isTransparent(bgcolor) && elem.clientHeight >= $minHeight) {
var arRGB = bgcolor.match(/\d+/g);
var r = parseInt(arRGB[0], 10);
var g = parseInt(arRGB[1], 10);
var b = parseInt(arRGB[2], 10);
// we adopt HSL's lightness definition, see http://en.wikipedia.org/wiki/HSL_and_HSV
var brightness = (Math.max(r, g, b) + Math.min(r, g, b)) / 255 / 2;
if (brightness > Brightness_Threshold) {
elem.style.backgroundColor = targetColor;
}
return true;
} else {
return false;
}
}
function changeTransparent(elem) {
var bgcolor = window.getComputedStyle(elem, null).backgroundColor;
if (!bgcolor || isTransparent(bgcolor)) {
elem.style.backgroundColor = targetColor;
}
}
var alltags = document.getElementsByTagName("*");
var bodyChanged = false;
function changeAll() {
var len = alltags.length;
for (var i = 0; i < len; i++) {
var changed = changeBgcolor(alltags[i]);
var tagName = alltags[i].tagName.toUpperCase();
if (changed && (tagName === "BODY" || tagName === "HTML")) {
bodyChanged = true;
}
}
}
changeAll();
if (window.top == window) {
// change transparent only when in top frame
if (!bodyChanged) {
changeTransparent(document.body.parentNode);
}
}
for (var i = 0; i < longRunSites.length; i++) {
if (location.hostname === longRunSites[i]) {
console.info('make NoBrighter runs forever...');
setInterval(changeAll, 2000); // convert every 2s
break;
}
}
/*document.body.addEventListener('DOMNodeInserted', function(e) {
changeBgcolor(e.target);
}, false);*/