☰

CSS Prefer Dark Mode

Tells CSS in all pages to use the new CSS "prefers-color-scheme: dark" mode.

  1. // ==UserScript==
  2. // @name         CSS Prefer Dark Mode
  3. // @namespace    http://j1.io/
  4. // @version      0.1
  5. // @description  Tells CSS in all pages to use the new CSS "prefers-color-scheme: dark" mode.
  6. // @author       jswny
  7. // @match        *://*/*
  8. // @grant        none
  9. // ==/UserScript==
  10.  
  11. (function() {
  12.     var styleTags = document.getElementsByTagName("style");
  13.     var content = `
  14.     /* Text and background color for light mode */
  15.     body {
  16.       color: #333;
  17.     }
  18.  
  19.     /* Text and background color for dark mode */
  20.     @media (prefers-color-scheme: dark) {
  21.       body {
  22.         color: #ddd;
  23.         background-color: #222;
  24.       }
  25.     }
  26.     `;
  27.  
  28.     if (styleTags.length == 0) {
  29.     var newStyleTag = document.createElement("style");
  30.     newStyleTag.innerHTML = content;
  31.     document.body.appendChild(newStyleTag);
  32.     } else {
  33.     styleTags[0].innerHTML += content;
  34.     }
  35. })();