darkmode

    @@ -4,15 +4,11 @@ * @include http://* * @include https://* * @contributor nanikamado http://let.hatelabo.jp/nanikamado/let/hLHU5aii3YU5 - * @nitpicker noromanba https://noromanba.github.com - * @license Unknown (as-is) + * @nitpicker noromanba http://let.hatelabo.jp/noromanba/let/hJmc5cn7v_h5 + * @license MIT license https://opensource.org/licenses/MIT * @javascript_url */ -// license of modified part -// The MIT license -// https://opensource.org/licenses/MIT - // WIP refactoring // - chaos conditional; do simply // - naming; what is that? @@ -29,27 +25,26 @@ (() => { 'use strict'; - // TODO avoid "God object" - let dark_style = document.body.querySelector('.dark_visited_style'); - const mode = dark_style ? Number(dark_style.getAttribute('mode_stat')) : 0; - const set_color = (nodes) => { nodes.forEach(node => { - const color = window.getComputedStyle(node).getPropertyValue('color'); - const [ r, g, b, ] = [ - Number(color.replace(/rgba?\((\d{1,3}), \d{1,3}, \d{1,3}.*/, '$1')), - Number(color.replace(/rgba?\(\d{1,3}, (\d{1,3}), \d{1,3}.*/, '$1')), - Number(color.replace(/rgba?\(\d{1,3}, \d{1,3}, (\d{1,3}).*/, '$1')), - ]; + // 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(v => Number(v)); // 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 use newline w/ Array#join() or heredoc-like `` and use Space, unreadable + // 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;}'; - // TODO element node only + // element node only const all = document.body.querySelectorAll('*'); const set_color_all = (style = my_style_text) => { @@ -65,19 +60,25 @@ set_color(i_doc.querySelectorAll('*')); i_doc.body.appendChild(Object.assign(i_doc.createElement('style'), { - innerText: 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 and length state + // 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.innerText = my_style_text; + dark_style.textContent = my_style_text; document.body.appendChild(dark_style); dark_style.setAttribute('all_elm_length', all.length); @@ -85,7 +86,7 @@ console.log('0'); break; case 1: - dark_style.innerText = '* { background-color:#000 !important; }'; + dark_style.textContent = '* { background-color: #000 !important; }'; if (Number(dark_style.getAttribute('all_elm_length')) !== all.length) { set_color_all('* { background-color: #000 !important; }'); @@ -95,7 +96,7 @@ console.log('1'); break; case 2: - dark_style.innerText = my_style_text; + dark_style.textContent = my_style_text; if (Number(dark_style.getAttribute('all_elm_length')) !== all.length) { set_color_all();
  • /*
     * @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(v => Number(v));
                // 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;}';
        // 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 です。

History

  1. 2018/05/06 08:38:51 - 2018-05-06
  2. 2018/05/06 08:31:13 - 2018-05-06
  3. 2018/05/05 04:27:33 - 2018-05-05
  4. 2018/05/05 04:27:16 - 2018-05-05