Raw Source Toggle Dropdown

• Minified Source

  Alternate update check target.

sjehuda / Dimmer (web-messaging)

// ==UserScript==
// @name        Dimmer (web-messaging)
// @description Toggle dark mode using an icon placed at the bottom left of your screen.
// @author      Schimon Jehudah, Adv.
// @namespace   org.openuserjs.sjehuda.Dimmer-wm
// @homepageURL https://openuserjs.org/scripts/sjehuda/Dimmer 
// @supportURL  https://openuserjs.org/scripts/sjehuda/Dimmer/issues 
// @updateURL   https://openuserjs.org/meta/sjehuda/Dimmer.meta.js 
// @copyright   2023, Schimon Jehudah (http://schimon.i2p)
// @license     MIT; https://opensource.org/licenses/MIT
// @icon        data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48dGV4dCB5PSIuOWVtIiBmb250LXNpemU9IjkwIj7wn5SFPC90ZXh0Pjwvc3ZnPgo=
// @include     *
// @exclude     devtools://*
// @version     23.04
// @require     https://cdn.jsdelivr.net/npm/darkreader/darkreader.min.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'

window.postMessage('dimmer-off', '*')
window.addEventListener('message', event.data);

window.addEventListener('message', receiver); // undefined upon page reload

if (event.data == 'dimmer-on') {
  DarkReader.setFetchMethod(window.fetch)
  DarkReader.enable({
    brightness: 100,
    contrast: 90,
    sepia: 10
  });
} else {
  DarkReader.disable({
    brightness: 100,
    contrast: 90,
    sepia: 10
  });
}
*/


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

var message, namespace = 'org-openuserjs-sjehuda-dimmer';

// create button
(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();
  };
})();

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

// toggle mode
function toggle() {
  let btn = document.getElementById(namespace);
  window.addEventListener('message', receiver);
  if (message == 'dimmer-on') { // TODO Add random to avoid abuse by 3rd party
    btn.innerHTML = '🔆';
    window.postMessage('dimmer-off')
    DarkReader.disable({
      brightness: 100,
      contrast: 90,
      sepia: 10
    });
  } else {
    btn.innerHTML = '🔅';
    window.postMessage('dimmer-on')
    DarkReader.setFetchMethod(window.fetch)
    DarkReader.enable({
      brightness: 100,
      contrast: 90,
      sepia: 10
    });
  }
  console.log('message')
  console.log(message)
  //window.removeEventListener('message', receiver);
}

function receiver(event) {
  console.log('receiver(event)')
  console.log(event.data)
  message = event.data;
}