☰

Darken Website

Darkens web pages without changing the funcionality of a page. Improve night reading.

  1. // ==UserScript==
  2. // @name         Darken Website
  3. // @namespace    https://theusaf.org
  4. // @version      1.0.2
  5. // @description  Darkens web pages without changing the funcionality of a page. Improve night reading.
  6. // @author       theusaf
  7. // @icon         https://www.google.com/s2/favicons?sz=64&domain=x.com
  8. // @match        *://*/*
  9. // @license      MIT
  10. // @grant        none
  11. // @noframes
  12. // @run-at       document-body
  13. // ==/UserScript==
  14.  
  15. if (window.parent === window) {
  16.   const template = document.createElement("template");
  17.   template.innerHTML = `<div class="darken-website-usaf" style="
  18.     position: fixed;
  19.     top: 0;
  20.     z-index: 99999;
  21.     width: 100%;
  22.     height: 100%;
  23.     pointer-events: none;
  24.     background: black;
  25.     opacity: 0;
  26.     left: 0;
  27.   "></div>`;
  28.   const specialElements = new Set();
  29.   document.body.append(template.content.cloneNode(true));
  30.   if (sessionStorage.enableDark === "true") {
  31.     sessionStorage.enableDark = false;
  32.     toggleDark();
  33.   }
  34.   window.addEventListener("fullscreenchange", (e) => {
  35.     const { target } = e,
  36.       darkenApplies = !!target.querySelector(".darken-website-usaf");
  37.     if (!darkenApplies) {
  38.       if (document.fullscreenElement) {
  39.         // Entering full screen
  40.         if (target.tagName === "IFRAME" || target.tagName === "VIDEO") {
  41.           target.style.opacity = sessionStorage.enableDark == "true"
  42.             ? 1 - (+localStorage.darkVal || 0.7)
  43.             : 1;
  44.           specialElements.add(target);
  45.         } else {
  46.           target.append(template.content.cloneNode(true));
  47.           toggleDark();
  48.           toggleDark();
  49.         }
  50.       } else {
  51.         // Exiting full screen
  52.         if (target.tagName === "IFRAME" || target.tagName === "VIDEO") {
  53.           target.style.opacity = "";
  54.           specialElements.delete(target);
  55.         } else {
  56.           target.querySelector(".darken-website-usaf")?.remove();
  57.         }
  58.       }
  59.     }
  60.   });
  61.   window.addEventListener("keydown", (e) => {
  62.     if (e.altKey && e.ctrlKey) {
  63.       switch (e.code) {
  64.           case "KeyC": {
  65.               changeDark();
  66.               e.preventDefault();
  67.               e.stopImmediatePropagation();
  68.               break;
  69.           }
  70.         case "KeyD": {
  71.           toggleDark();
  72.           e.preventDefault();
  73.           e.stopImmediatePropagation();
  74.           break;
  75.         }
  76.       }
  77.     }
  78.   });
  79.   function changeDark() {
  80.     const n = +prompt("Enter darkness value", localStorage.darkVal || 0.7);
  81.     if (!isNaN(n)) {
  82.       localStorage.darkVal = n || 0.7;
  83.     }
  84.     toggleDark();
  85.     toggleDark();
  86.     return true;
  87.   }
  88.   function toggleDark() {
  89.     let darks = document.querySelectorAll(".darken-website-usaf");
  90.     if (darks.length === 0) {
  91.       document.body.append(template.content.cloneNode(true));
  92.       darks = document.querySelectorAll(".darken-website-usaf");
  93.     }
  94.     for (let i = 0; i < darks.length; i++) {
  95.       // Toggle darkness
  96.       darks[i].style.opacity = sessionStorage.enableDark == "true"
  97.         ? 0
  98.         : +localStorage.darkVal || 0.7;
  99.     }
  100.     sessionStorage.enableDark =
  101.       sessionStorage.enableDark == "true" ? false : true;
  102.     return true;
  103.   }
  104. } else {
  105.   console.log("[DARKEN] - Ignoring frame");
  106. }