Excellent. There are a lot of extensions do injection for domain. But this injects to all pages, every page. Awesome.
Here is my darkener, I just dont want to see white anymore.
function rgb2hsl(rgbArr){
var r1 = rgbArr[0] / 255;
var g1 = rgbArr[1] / 255;
var b1 = rgbArr[2] / 255;
var alpha = rgbArr[3] ? rgbArr[3] : 1;
var maxColor = Math.max(r1,g1,b1);
var minColor = Math.min(r1,g1,b1);
//Calculate L:
var L = (maxColor + minColor) / 2 ;
var S = 0;
var H = 0;
if(maxColor != minColor){
//Calculate S:
if(L < 0.5){
S = (maxColor - minColor) / (maxColor + minColor);
}else{
S = (maxColor - minColor) / (2.0 - maxColor - minColor);
}
//Calculate H:
if(r1 == maxColor){
H = (g1-b1) / (maxColor - minColor);
}else if(g1 == maxColor){
H = 2.0 + (b1 - r1) / (maxColor - minColor);
}else{
H = 4.0 + (r1 - g1) / (maxColor - minColor);
}
}
L = L * 100;
S = S * 100;
H = H * 60;
if(H<0){
H += 360;
}
var result = [H, S, L, alpha];
return result;
}
function hslToRgb(h, s, l, a) {
var r, g, b;
if (s == 0) {
r = g = b = l; // achromatic
} else {
function hue2rgb(p, q, t) {
if (t < 0) t += 1;
if (t > 1) t -= 1;
if (t < 1/6) return p + (q - p) * 6 * t;
if (t < 1/2) return q;
if (t < 2/3) return p + (q - p) * (2/3 - t) * 6;
return p;
}
var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
var p = 2 * l - q;
r = hue2rgb(p, q, h + 1/3);
g = hue2rgb(p, q, h);
b = hue2rgb(p, q, h - 1/3);
}
return [ r * 255, g * 255, b * 255, a];
}
function hexToRGB(hex, alpha) {
var r, g, b;
if(hex.length < 5){
r = parseInt(hex.slice(1, 2), 16),
g = parseInt(hex.slice(2, 3), 16),
b = parseInt(hex.slice(3, 4), 16);
}else{
r = parseInt(hex.slice(1, 3), 16),
g = parseInt(hex.slice(3, 5), 16),
b = parseInt(hex.slice(5, 7), 16);
}
if (alpha) {
return "rgba(" + r + ", " + g + ", " + b + ", " + alpha + ")";
} else {
return "rgb(" + r + ", " + g + ", " + b + ")";
}
}
function parseRGB(str){
return str.replace(/[^\d,]/g, '').split(',');
}
function bgcToHSL(bgc, type){
var rgba, hsla;
if(type == 'hex'){
rgba = hexToRGB(bgc,1);
rgba = parseRGB(bgc);
if(rgba.length == 3) rgba.push(1);
}
if(type == 'rgb'){
rgba = parseRGB(bgc);
if(rgba.length == 3) rgba.push(1);
}
if(type == 'hsl'){
hsla = parseRGB(bgc);
if(hsla.length == 3) hsla.push(1);
}
hsla = rgb2hsl(rgba);
hsla.forEach((e,i)=>{hsla[i] = Math.round(e);});
return hsla;
}
function _darkit(e){
if(e.getAttribute('data-darkened')) return;
e.setAttribute('data-darkened', true);
var style = window.getComputedStyle(e);
var bgc = style.getPropertyValue('background-color');
var bgct;
var clr = style.getPropertyValue('color');
var bg = style.getPropertyValue('background-image');
if(bgc == '' || bgc == 'initial' || bgc == 'inherit' || bgc == 'transparent') return
if(bg.indexOf('gradient') !== -1) console.log(bg);
if(bgc.indexOf('rgb') !== -1) bgct = 'rgb';
if(bgc.indexOf('hsl') !== -1) bgct = 'hsl';
if(bgc.indexOf('#') !== -1) bgct = 'hex';
var bgHsl = bgcToHSL(bgc, bgct);
//var newRgb = hslToRgb(bgHsl[0], bgHsl[1], bgHsl[2], bgHsl[3]);
var lightness = bgHsl[2] > 40 ? bgHsl[2] - 20 : bgHsl[2] / 2;
var newBgc = `hsla(${bgHsl[0]}, ${bgHsl[1]}%, ${lightness}%, ${bgHsl[3]})!important`;
//console.log(newBgc);
// e.style.background = 'none';
var existingStyle = e.getAttribute('style');
e.setAttribute('style', existingStyle + ';background-color:' + newBgc);
//e.style.color = '#ccc';
//e.style.borderColor = '#555';
}
_darkit(document.querySelector('body'));
document.querySelectorAll('body *').forEach(e=>{
_darkit(e);
});
document.addEventListener('DOMNodeInserted', (e)=>{
document.querySelectorAll('body *').forEach(e=>{
_darkit(e);
});
});
