Browser Background Color Controller

Change the background color in all web pages to protect your eyes. we map different original color to different new colors automatically to make it looks better than others which only replace the original color with only one color.

2022-06-28 기준 버전입니다. 최신 버전을 확인하세요.

이 스크립트를 설치하려면 Tampermonkey, Greasemonkey 또는 Violentmonkey와 같은 확장 프로그램이 필요합니다.

You will need to install an extension such as Tampermonkey to install this script.

이 스크립트를 설치하려면 Tampermonkey 또는 Violentmonkey와 같은 확장 프로그램이 필요합니다.

이 스크립트를 설치하려면 Tampermonkey 또는 Userscripts와 같은 확장 프로그램이 필요합니다.

이 스크립트를 설치하려면 Tampermonkey와 같은 확장 프로그램이 필요합니다.

이 스크립트를 설치하려면 유저 스크립트 관리자 확장 프로그램이 필요합니다.

(이미 유저 스크립트 관리자가 설치되어 있습니다. 설치를 진행합니다!)

이 스타일을 설치하려면 Stylus와 같은 확장 프로그램이 필요합니다.

이 스타일을 설치하려면 Stylus와 같은 확장 프로그램이 필요합니다.

이 스타일을 설치하려면 Stylus와 같은 확장 프로그램이 필요합니다.

이 스타일을 설치하려면 유저 스타일 관리자 확장 프로그램이 필요합니다.

이 스타일을 설치하려면 유저 스타일 관리자 확장 프로그램이 필요합니다.

이 스타일을 설치하려면 유저 스타일 관리자 확장 프로그램이 필요합니다.

(이미 유저 스타일 관리자가 설치되어 있습니다. 설치를 진행합니다!)

// ==UserScript==
// @name           Browser Background Color Controller
// @namespace      Background Color
// @description    Change the background color in all web pages to protect your eyes. we map different original color to different new colors automatically to make it looks better than others which only replace the original color with only one color.
// @version        2.3
// @include        http*
// @include        ftp
// @exclude
// @license MIT
// @grant    GM_addStyle
// ==/UserScript==

// Threshold
var Rth = 230;
var Gth = 230;
var Bth = 230;
var color = "#FDF6E3" //New color
var renderClasses = ["nH"];


function parseRGB(RGB) {
    if (RGB == undefined) return[0, 0, 0, 0];
    var rgba = RGB.replace(/[rgba\(\)]/g, '');
    var bg = rgba.split(",");
    if (bg < 3) return[0, 0, 0, 0];
    return [parseInt(bg[0]), parseInt(bg[1]), parseInt(bg[2]), parseInt(bg[3])];
}

function adjust(color, amount) {
        return '#' + color.replace(/^#/, '').replace(/../g, color => ('0'+Math.min(255, Math.max(0, parseInt(color, 16) + Math.floor(amount))).toString(16)).substr(-2));
    }

function realBackgroundColor(elem) {
    var transparent = 'rgba(0, 0, 0, 0)';
    if (!elem) return transparent;

    var computed = getComputedStyle(elem);
    if (computed.backgroundImage !== "none") {
        return undefined;
    }

    var bg = computed.backgroundColor;
    if (bg === transparent) {
        return realBackgroundColor(elem.parentElement);
    } else {
        return bg;
    }
}



function changeElementsColor() {
    var allTags = document.getElementsByTagName("*");
    var classes = [];
    var colors = []
    var hover = [].slice.call(document.querySelectorAll( ":hover" ));
    for (var i = 0; i < allTags.length; i++) {
        try{
            if (allTags[i].style.backgroundColor == color || allTags[i].style.bgColorAlreadySet == true) {
                continue;
            }
            allTags[i].style.bgColorAlreadySet = true;
            var rbgcolor = realBackgroundColor(allTags[i]);
            var RGB = parseRGB(rbgcolor);
            if (RGB[0] > Rth && RGB[1] > Gth && RGB[2] > Bth || allTags[i].tagName == "BODY") {
                //console.log(Math.max(-10, (RGB[0] + RGB[1] + RGB[2]) / 3 - 255));
                var acolor = adjust(color, Math.max(-10, (RGB[0] + RGB[1] + RGB[2]) / 3 - 255));
                allTags[i].style.backgroundColor = acolor;
                //console.log(allTags[i].classList.map(x=>`.${x}{background-color: #FDF6E3}\n`))
                //for (var j = 0; j < allTags[i].classList.length; ++j){
                //    classes.push(`.${allTags[i].classList[j]}{background-color: ${acolor}}\n`);
                //}
            }
        }catch(err) {
            console.log(err);
        }
    }
    //console.log(classes);
    //GM_addStyle(classes.join(""));
    //GM_addStyle(renderClasses.map(x=>`.${x}{background-color: ${color}}\n`).join(""));
}

function handleAutoPage() {
    var observer = new window.MutationObserver(function(mutations) {
        var currentLen = document.getElementsByTagName("*").length;
        if (mutations[0].addedNodes) {
                setTimeout(function() {
                    if(document.getElementsByTagName("*").length == currentLen){
                        console.log(document.getElementsByTagName("*").length)
                        changeElementsColor();
                    }
                }, 50);
        }
    });
    observer.observe(document, {
        childList: true,
        subtree: true
    });
}


(function() {
    changeElementsColor();
    handleAutoPage();

})();