darkmode

by noromanba 2018-05-06 [2018/05/06 08:38:51]
(Forked from 黒背景 by nanikamado)

switchable darkmode

• /*
   * @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 LOADER Metadata ?

  Permalink

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

  RAW

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

  Packed

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

  Userscript

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

  Loader

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

  Metadata

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