黒背景

  • /*
     * @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;
        }
    })()
  • Permalink
    このページへの個別リンクです。
    RAW
    書かれたコードへの直接のリンクです。
    Packed
    文字列が圧縮された書かれたコードへのリンクです。
    Userscript
    Greasemonkey 等で利用する場合の .user.js へのリンクです。
    Loader
    @require やソースコードが長い場合に多段ロードする Loader コミのコードへのリンクです。
    Metadata
    コード中にコメントで @xxx と書かれたメタデータの JSON です。

History

  1. 2018/05/05 10:32:53 - 2018-05-05
  2. 2018/05/05 10:31:33 - 2018-05-05
  3. 2018/05/05 10:25:12 - 2018-05-05
  4. 2018/05/04 20:03:32 - 2018-05-04
  5. 2018/05/04 20:00:25 - 2018-05-04
  6. 2018/05/04 19:59:57 - 2018-05-04
  7. 2018/05/04 19:59:17 - 2018-05-04
  8. 2018/05/04 19:58:10 - 2018-05-04
  9. 2018/05/04 19:57:36 - 2018-05-04
  10. 2018/05/04 19:56:42 - 2018-05-04
  11. 2018/05/04 18:53:11 - 2018-05-04
  12. 2018/05/04 18:52:48 - 2018-05-04
  13. 2018/05/04 18:51:44 - 2018-05-04
  14. 2018/05/04 18:49:58 - 2018-05-04
  15. 2018/05/04 18:46:17 - 2018-05-04
  16. 2018/05/04 18:44:56 - 2018-05-04
  17. 2018/05/04 18:41:36 - 2018-05-04
  18. 2018/05/04 18:38:26 - 2018-05-04