darkmode Fork

    @@ -33,7 +33,7 @@ // TBD RegExp named capturing const [r, g, b,] = window.getComputedStyle(node).color - .match(/rgba?\((\d+), (\d+), (\d+)/).slice(1).map(v => Number(v)); + .match(/rgba?\((\d+), (\d+), (\d+)/).slice(1).map(Number); // TODO rename; what mean "s" is? const s = 255 - Math.max(r, g, b); node.style.color = `rgb(${r + s}, ${g + s}, ${b + s})`;
    @@ -44,7 +44,7 @@ // - readable; use newline w/ Array#join() or heredoc-like `` and use Space // - rename to "dark_style"; I don't know your 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;}'; - // element node only + // TBD filtering element node only const all = document.body.querySelectorAll('*'); const set_color_all = (style = my_style_text) => {
  • /*
     * @title darkmode
     * @description switchable darkmode
     * @include http://*
     * @include https://*
     * @contributor nanikamado  http://let.hatelabo.jp/nanikamado/let/hLHU5aii3YU5
     * @nitpicker   noromanba   http://let.hatelabo.jp/noromanba/let/hJmc5cn7v_h5
     * @license     MIT license https://opensource.org/licenses/MIT
     * @javascript_url
     */
    
    // WIP refactoring
    // - chaos conditional; do simply
    // - naming; what is that?
    // - readability;
    
    // NOTE mode 0 -> 1 -> 2 -> 1 -> 2...
    // TODO write mode detail
    // level of extremely(?)
    //  | 0
    //  | 1
    //  | 2
    //  v
    
    (() => {
        'use strict';
    
        const set_color = (nodes) => {
            nodes.forEach(node => {
                // Node.ELEMENT_NODE nullable `style`; e.g. <math> try to
                // https://en.wikipedia.org/wiki/RGB_color_model
                if (!node.style) return;
    
                // TBD RegExp named capturing
                const [r, g, b,] = window.getComputedStyle(node).color
                    .match(/rgba?\((\d+), (\d+), (\d+)/).slice(1).map(Number);
                // TODO rename; what mean "s" is?
                const s = 255 - Math.max(r, g, b);
                node.style.color = `rgb(${r + s}, ${g + s}, ${b + s})`;
            });
        };
    
        // TODO
        // - readable; use newline w/ Array#join() or heredoc-like `` and use Space
        // - rename to "dark_style"; I don't know your 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;}';
        // TBD filtering element node only
        const all = document.body.querySelectorAll('*');
    
        const set_color_all = (style = my_style_text) => {
            set_color(all);
    
            document.body.querySelectorAll('iframe[src]').forEach(iframe => {
                if (!iframe.src) return;
    
                // TBD omit base URL
                if ((new URL(iframe.src, location.href)).origin === location.origin ||
                    iframe.src === 'about:blank') {
                    const i_doc = iframe.contentDocument;
                    set_color(i_doc.querySelectorAll('*'));
    
                    i_doc.body.appendChild(Object.assign(i_doc.createElement('style'), {
                        textContent: style,
                    }));
                }
            });
        };
    
        // TODO avoid "God object", is not style
        let dark_style = document.body.querySelector('.dark_visited_style');
        const mode = dark_style ? Number(dark_style.getAttribute('mode_stat')) : 0;
    
        switch (mode) {
            // TODO separate style settings and state setting
            // TBD "mode" to explicit name, not necessary Number
            case 0:
                set_color_all();
                // TODO don't need `dark_style` object
                dark_style = document.createElement('style');
                dark_style.className = 'dark_visited_style';
                dark_style.textContent = my_style_text;
                document.body.appendChild(dark_style);
    
                dark_style.setAttribute('all_elm_length', all.length);
                dark_style.setAttribute('mode_stat', 1);
                console.log('0');
                break;
            case 1:
                dark_style.textContent = '* { background-color: #000 !important; }';
    
                if (Number(dark_style.getAttribute('all_elm_length')) !== all.length) {
                    set_color_all('* { background-color: #000 !important; }');
                    dark_style.setAttribute('all_elm_length', all.length);
                }
                dark_style.setAttribute('mode_stat', 2);
                console.log('1');
                break;
            case 2:
                dark_style.textContent = my_style_text;
    
                if (Number(dark_style.getAttribute('all_elm_length')) !== all.length) {
                    set_color_all();
                    dark_style.setAttribute('all_elm_length', all.length);
                }
                dark_style.setAttribute('mode_stat', 1);
                console.log('2');
                break;
            default:
                console.error('error mode_stat=' + mode);
                break;
        }
    })();
    
    
  • Permalink
    このページへの個別リンクです。
    RAW
    書かれたコードへの直接のリンクです。
    Packed
    文字列が圧縮された書かれたコードへのリンクです。
    Userscript
    Greasemonkey 等で利用する場合の .user.js へのリンクです。
    Loader
    @require やソースコードが長い場合に多段ロードする Loader コミのコードへのリンクです。
    Metadata
    コード中にコメントで @xxx と書かれたメタデータの JSON です。