黒背景

by nanikamado 2018-05-05 [2018/05/05 10:32:53]

サイトの背景を黒に、文字色を、元々の色の彩度を最大にしたものにします。 2種類モードがあり、実行するたび切り替わります:1.一番下の背景色が透明に、その他の要素の背景色が透明になります。 2.ほぼすべての要素の背景色が黒になります。 1より見た目は悪いです。

@@ -3,63 +3,65 @@
  * @description サイトの背景を黒に、文字色を、元々の色の彩度を最大にしたものにします. 2種類モードがあり、実行するたび切り替わります:1.一番下の背景色が透明に、その他の要素の背景色が透明になります. 2.ほぼすべての要素の背景色が黒になります. 1より見た目は悪いです.
  * @javascript_url
  */
-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) {
+(()=>{
+    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('2');
-        break;
-    default:
-        alert('error  mode_stat=' + mode);
-        break;
-}
+            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;
+    }
+})()

• /*
   * @title 黒背景
   * @description サイトの背景を黒に、文字色を、元々の色の彩度を最大にしたものにします. 2種類モードがあり、実行するたび切り替わります:1.一番下の背景色が透明に、その他の要素の背景色が透明になります. 2.ほぼすべての要素の背景色が黒になります. 1より見た目は悪いです.
   * @javascript_url
   */
  (()=>{
      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 LOADER Metadata ?

  Permalink

  このページへの個別リンクです。

  RAW

  書かれたコードへの直接のリンクです。

  Packed

  文字列が圧縮された書かれたコードへのリンクです。

  Userscript

  Greasemonkey 等で利用する場合の .user.js へのリンクです。

  Loader

  @require やソースコードが長い場合に多段ロードする Loader コミのコードへのリンクです。

  Metadata

  コード中にコメントで @xxx と書かれたメタデータの JSON です。