[Let] darkmode

nanikamado — 2018-06-19T12:24:26Z

/*
 * @title darkmode
 * @description サイトの背景色を黒にし、文字色を明るくします。詳しい説明はソースコード内の先頭のコメントを見てください。
 * @include http://*
 * @include https://*
 * @contributor noromanba   http://let.hatelabo.jp/noromanba/let/hJmc5cn7v_h5
 * @license     MIT license https://opensource.org/licenses/MIT
 * @javascript_url
 */


// 背景の色を黒にします。ただし、背景が透明の場合は変更しません。
// 文字色の彩度を最大にします。
// 訪問したことのあるリンクの色を紫にします。
// 稀に色を変えられないこともあります。仕様です。
// 画像の色は変わりません。
// 一度実行した状態でもう一度実行すると、もとに戻ります。
// 'use strict'の次の行の、bgcolorに入れる値を変更することで、背景色を変えることができます。
// http://let.hatelabo.jp/nanikamado/let/hLHU5aii3YU5  の改良版です。


(() => {
    'use strict';
    let bgcolor = 'rgb(22,22,22)';
    let time = {
        all: Date.now()
    };
    const computedStyleMap = new WeakMap();
    const formatColorCode = bgcolor => {
            if (bgcolor.slice(0, 1) === '#')
                return 'rgb(' +
                    (bgcolor.length === 4 ? bgcolor.slice(1, 4).split('').map(st => st + st) : bgcolor.slice(1, 7).match(/../g))
                    .map(_bgc => parseInt(_bgc, 16)).join(",") + ')';
            if (bgcolor.slice(0, 3) !== 'rgb') {
                let _cDiv = document.createElement('div');
                _cDiv.style.setProperty('color', bgcolor, 'important');
                if (!_cDiv.style.color) { console.log('color code is invalid'); return };
                document.body.appendChild(_cDiv);
                let color = window.getComputedStyle(_cDiv).color;
                _cDiv.remove();
                return color;
            }
            console.error('bgcolor=' + bgcolor);
        },
        setColor = (node, ignoreDCStyle) => {
            let dCStyle;
            let nodeStyleText = node.style.cssText;
            if (!ignoreDCStyle && (dCStyle = node.getAttribute('darkComputedStyle'))) {
                if (!~nodeStyleText.indexOf(dCStyle)) node.style.cssText = dCStyle;
                return;
            };
            if (node.getAttribute('darkBeforeStyle') === null) node.setAttribute('darkBeforeStyle', nodeStyleText);
            let CS_C, CS_BC, CS_BI, CS;
            if (computedStyleMap.has(node)) {
                let sCS = computedStyleMap.get(node);
                CS_C = sCS.C;
                CS_BC = sCS.BC;
                CS_BI = sCS.BI;
                CS = sCS.CS;
            } else {
                CS = window.getComputedStyle(node);
                CS_C = CS.color;
                CS_BC = CS.backgroundColor;
                CS_BI = CS.backgroundImage;
            };
            if (!CS_C) return;
            const [r, g, b] = CS_C.match(/\d+/g).slice(0, 3).map(Number);
            const s = 255 - Math.max(r, g, b);
            //color
            node.style.setProperty('color', `rgb(${r+s},${g+s},${b+s})`, node.tagName === 'A' ? '' : 'important');
            //backgroundColor
            if (CS_BC !== 'rgba(0, 0, 0, 0)') {
                if (CS_BC.slice(3, 4) !== 'a') {
                    node.style.setProperty('background-color', bgcolor, 'important');
                } else {
                    if (bgcolor.slice(0, 3) !== 'rgb') {
                        bgcolor = formatColorCode(bgcolor);
                    }
                    node.style.setProperty('background-color', bgcolor.replace('rgb', 'rgba').replace(')', ',') +
                        CS_BC.replace(/[^,]*,[^,]+,[^,]+,[^,\d]*(\d?.?\d+)/, '$1'), 'important');
                }
            }
            //backgroundImage gradient
            if (CS_BI.indexOf('gradient') !== -1)
                node.style.backgroundImage = CS_BI
                .replace(/[^,]*gradient\((?:[^\(\)]*\((?:[^\(\)]*\([^\(\)]*\))*[^\(\)]*[^\(\)]*\))*[^\(\)]*\),?/gi, '') || 'none';

            node.setAttribute('darkComputedStyle', node.style.cssText.split(';').filter(cssplo => {
                switch (cssplo.split(':')[0].replace(' ', '')) {
                    case 'background-color':
                    case 'color':
                        return true;
                    default:
                        return false;
                }
            }).join(';'));
        },
        allElm = () => {
            let all = [document.body, document.body.parentNode, ...document.body.querySelectorAll('*')];
            document.body.querySelectorAll('iframe').forEach(iframe => {
                if ((new URL(iframe.src, location.href)).origin === location.origin || !iframe.src || iframe.src === 'about:blank') {
                    all.push(...[
                        ...iframe.contentDocument.body.querySelectorAll('*'),
                        iframe.contentDocument.body
                    ]);
                };
            });
            return all;
        },
        setColorAll = () => {
            allElm().forEach(setColor);
            document.body.style.setProperty('background-color', bgcolor, 'important');
            document.body.querySelectorAll('A').forEach(node => {
                if (getComputedStyle(node).color !== node.style.color) node.style.setProperty('color', node.style.color, 'important');
            });
        },
        main = () => {
            let darkVisitedStyle = document.body.querySelector('.darkVisitedStyle');
            if (darkVisitedStyle) { //even times
                allElm().forEach(node => {
                    if (!node.style) return;
                    const style = node.getAttribute('darkBeforeStyle');
                    if (style === null) return;
                    node.style.cssText = style;
                });
                darkVisitedStyle.remove();
                console.log('1');
            } else { //odd times
                allElm().forEach(node => {
                    const CS = window.getComputedStyle(node);
                    computedStyleMap.set(node, {
                        C: CS.color,
                        BC: CS.backgroundColor,
                        BI: CS.backgroundImage,
                        CS: CS
                    });
                });
                let elmsSetedStyle = [];
                const observer = new MutationObserver(maa => {
                    if (!document.body.querySelector('.darkVisitedStyle')) {
                        observer.disconnect();
                        return;
                    };
                    maa.forEach(ma => {
                        if (ma.type === 'childList') {
                            ma.addedNodes.forEach(addedNode => {
                                if (addedNode.nodeType !== 1) return;
                                [addedNode, ...addedNode.querySelectorAll('*')].forEach(setColor);
                            });
                        } else {
                            const darkComputedStyle = ma.target.getAttribute('darkComputedStyle') || '';

                            if (~ma.target.style.cssText.indexOf(darkComputedStyle)) {
                                console.log('return cssText===DCS');
                                return
                            };
                            let DCStyleOb = {};
                            for (const styleProp of darkComputedStyle.split(';')) {
                                const s = styleProp.split(':');
                                DCStyleOb[s[0].replace(' ', '')] = s[1].replace('!important', '').replace(/ /g, '');
                            };
                            if ((!DCStyleOb['color'] || DCStyleOb['color'] === ma.target.style.color.replace(/ /g, '')) &&
                                (!DCStyleOb['background-color'] || DCStyleOb['background-color'] === ma.target.style.backgroundColor.replace(/ /g, ''))) {
                                console.log('return DCSColor===color&&DCSBackgroundColor===backgroundcolor');
                                return
                            };

                            let ind;
                            if ((ind = elmsSetedStyle.map(e => e.elm).indexOf(ma.target)) >= 0) {
                                if (++elmsSetedStyle[ind].num >= 10) {
                                    console.log({
                                        0: 'avoided infinite loop =>',
                                        num: elmsSetedStyle[ind].num,
                                        color: ma.target.style.color.replace(/ /g, ''),
                                        bgcolor: ma.target.style.backgroundColor.replace(/ /g, '')
                                    });
                                    return;
                                }
                            } else elmsSetedStyle.push({
                                elm: ma.target,
                                num: 0
                            });
                            setColor(ma.target, true);
                        }
                    });
                    console.log('Mutation');
                });

                let resizeTimer;
                const resizeListener = () => {
                    console.log('resizing');
                    if (resizeTimer) clearTimeout(resizeTimer);
                    resizeTimer = setTimeout(() => {
                        if (document.body.querySelector('.darkVisitedStyle')) setColorAll();
                        else window.removeEventListener('resize', resizeListener);
                    }, 500);
                };
                window.addEventListener('resize', resizeListener);

                const darkStyle = document.createElement('style');
                darkStyle.textContent = `a:visited{color:#b553ff!important}
                *{text-shadow:none!important}:after,:before{background-color:transparent!important}
                ::-webkit-scrollbar{overflow:hidden;width:.8rem;background:#000}
                ::-webkit-scrollbar-thumb{overflow:hidden;border-radius:.4rem;background:#ddd}`;
                darkStyle.className = 'darkVisitedStyle';
                document.body.appendChild(darkStyle);

                setColorAll();
                observer.observe(document.body, {
                    childList: true,
                    subtree: true,
                    attributeFilter: ['style'],
                    attributes: true,
                });
                console.log('0');
            };
        };
    if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', main);
    else main();
    time.all = Date.now() - time.all;
    console.log(time);
})();

[Let] 黒背景

nanikamado — 2018-05-05T01:32:53Z

黒背景

/*
 * @title 黒背景
 * @description サイトの背景を黒に、文字色を、元々の色の彩度を最大にしたものにします。 2種類モードがあり、実行するたび切り替わります:1.一番下の背景色が透明に、その他の要素の背景色が透明になります。 2.ほぼすべての要素の背景色が黒になります。 1より見た目は悪いです。
 * @javascript_url
 * @license  The MIT license
 */
(()=>{
    let my_style,
        all = document.querySelectorAll('*'),
        mode = (my_style = document.querySelector('.dark_visited_style')) ? Number(my_style.getAttribute('mode_stat')) : 0,
        set_color = elm => {
            elm.forEach((v) => {
                let c = window.getComputedStyle(v).getPropertyValue('color'),
                    c_ob = {
                        r: Number(c.replace(/rgba?\((\d{1,3}), \d{1,3}, \d{1,3}.*/, '$1')),
                        g: Number(c.replace(/rgba?\(\d{1,3}, (\d{1,3}), \d{1,3}.*/, '$1')),
                        b: Number(c.replace(/rgba?\(\d{1,3}, \d{1,3}, (\d{1,3}).*/, '$1')),
                    };
                let s = 255 - Math.max(c_ob.r, c_ob.g, c_ob.b);
                v.style.color = `rgb(${c_ob.r+s}, ${c_ob.g+s}, ${c_ob.b+s})`;
            });
        },
        set_color_all = (style = my_style_text) => {
            set_color(all);
            document.querySelectorAll('iframe').forEach((v) => {
                if (v.src && (new URL(v.src, location)).origin == location.origin || v.src == 'about:blank') {
                    set_color(v.contentDocument.querySelectorAll('*'));
                    let my_style = v.contentDocument.createElement("style");
                    my_style.innerText = style;
                    v.contentDocument.body.appendChild(my_style);
                }
            })
        };
    const my_style_text = 'a:visited{color:#b553ff!important;}:not(html){background-color:transparent!important}html{background-color:#000!important}::-webkit-scrollbar{overflow:hidden;width:.8rem;background:#000;}::-webkit-scrollbar-thumb{overflow:hidden;border-radius:.4rem;background:#ddd;}';
    switch (mode) {
        case 0:
            set_color_all();
            my_style = document.createElement("style");
            my_style.className = 'dark_visited_style';
            my_style.innerText = my_style_text;
            document.body.appendChild(my_style);
            my_style.setAttribute('all_elm_length', all.length);
            my_style.setAttribute('mode_stat', 1);
            console.log('0');
            break;
        case 1:
            my_style.innerText = '*{background-color:#000!important}';
            if (my_style.getAttribute('all_elm_length') != all.length) {
                set_color_all('*{background-color:#000!important}');
                my_style.setAttribute('all_elm_length', all.length);
            }
            my_style.setAttribute('mode_stat', 2);
            console.log('1');
            break;
        case 2:
            my_style.innerText = my_style_text;
            if (my_style.getAttribute('all_elm_length') != all.length) {
                set_color_all();
                my_style.setAttribute('all_elm_length', all.length);
            }
            my_style.setAttribute('mode_stat', 1);
            console.log('2');
            break;
        default:
            alert('error  mode_stat=' + mode);
            break;
    }
})()

Bookmarklets from nanikamado

[Let] darkmode

[Let] 黒背景