Dark Reader

Dimmer

Toggle dark mode using an icon placed at the bottom left of your screen.
当前为 2023-05-11 提交的版本，查看最新版本。
换行
// ==UserScript==
// @name        Dimmer
// @description Toggle dark mode using an icon placed at the bottom left of your screen.
// @author      Schimon Jehudah, Adv.
// @namespace   i2p.schimon.dimmer
// @homepageURL https://openuserjs.org/scripts/sjehuda/Dimmer 
// @supportURL  https://openuserjs.org/scripts/sjehuda/Dimmer/issues 
// @copyright   2023, Schimon Jehudah (http://schimon.i2p)
// @license     MIT; https://opensource.org/licenses/MIT
// @icon        data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48dGV4dCB5PSIuOWVtIiBmb250LXNpemU9IjkwIj7wn5SFPC90ZXh0Pjwvc3ZnPgo=
// @include     *
// @version     23.04.02
// @require     https://unpkg.com/[email protected]/darkreader.js
// @noframes
// ==/UserScript==

/*

TODO

Toggle color of button.
btn.style.filter = 'hue-rotate(500deg)'
See https://noscript.net/

Or use a plain character '●'.
btn.style.color = 'black'

*/


if (document.doctype == null) { return; }

const namespace = 'org.openuserjs.sjehuda.dimmer';

// create hotkey
createButton();
// set hotkey Ctrl + Shift + <
document.onkeyup = function(e) {
  if (e.ctrlKey && e.shiftKey && e.which == 190) {
    toggle();
  }
};

function createButton() {
  // create element
  let btn = document.createElement(namespace);
  document.body.append(btn);
  // set content
  btn.innerHTML = '🔆'; // 🌕 🌌 ●
  btn.id = namespace;
  // set position
  btn.style.position = 'fixed';
  btn.style.bottom = 0;
  btn.style.left = 0;
  // set appearance
  btn.style.marginTop = '100px';
  btn.style.marginRight = '10px';
  btn.style.minWidth = '50px';
  btn.style.minHeight = '50px';
  btn.style.fontSize = '20px';
  btn.style.zIndex = 10000;
  btn.style.opacity = 0.5;
  btn.onmouseover = () => {
    document
      .getElementById(namespace)
      .style.opacity = 0.9;
  };
  btn.onmouseout = () => {
    document
      .getElementById(namespace)
      .style.opacity = 0.3;
  };
  // center character
  btn.style.justifyContent = 'center';
  btn.style.alignItems = 'center';
  btn.style.display = 'flex';
  // disable selection marks
  btn.style.outline = 'none';
  btn.style.userSelect = 'none';
  btn.style.cursor = 'default';
  // set button behaviour
  btn.onclick = () => {
    toggle();
  };
}

// toggle mode
function toggle() {
  let btn = document.getElementById(namespace);
  if (btn.innerHTML == '🔆') {
    btn.innerHTML = '🔅'; // ☀️ 🌅
    DarkReader.setFetchMethod(window.fetch) // https://eligrey.com/
    DarkReader.enable({
      brightness: 100,
      contrast: 90,
      sepia: 10
    });
  } else {
    btn.innerHTML = '🔆';
    DarkReader.disable({
      brightness: 100,
      contrast: 90,
      sepia: 10
    });
  }
}