Pure Black Background Enhanced

Change websites to pure black background with customization options
当前为 2024-09-06 提交的版本，查看最新版本。
换行
// ==UserScript==
// @name         Pure Black Background Enhanced
// @namespace    (link unavailable)
// @version      0.07
// @description  Change websites to pure black background with customization options
// @match        *://*/*
// @grant        GM_getValue
// @grant        GM_setValue
// @grant        GM_registerMenuCommand
// @run-at       document-start
// ==/UserScript==

(function() {
  'use strict';

  // Load settings
  const cfg = {
    bgColor: GM_getValue("bgColor", "#000000"),
    textColor: GM_getValue("textColor", "#8cffb5"),
    linkColor: GM_getValue("linkColor", "#ff66ff"),
    imgBrightness: GM_getValue("imgBrightness", 0.8),
    imgContrast: GM_getValue("imgContrast", 1.2)
  };

  // CSS styles
  const css = `
    html, body {
      background-color: ${cfg.bgColor} !important;
      color: ${cfg.textColor} !important;
    }
    * {
      background-color: rgba(0, 0, 0, 0.5) !important;
      border-color: #444444 !important;
    }
    a {
      color: ${cfg.linkColor} !important;
    }
    img {
      filter: brightness(${cfg.imgBrightness}) contrast(${cfg.imgContrast});
    }
    video, .html5-video-container video {
      filter: none !important;
    }
  `;

  // Apply styles
  const style = document.createElement('style');
  style.type = 'text/css';
  style.appendChild(document.createTextNode(css));
  document.head.appendChild(style);

  // Mutation observer to handle dynamic content
  const observer = new MutationObserver(function() {
    document.documentElement.style.backgroundColor = cfg.bgColor;
    document.body.style.backgroundColor = cfg.bgColor;
  });
  observer.observe(document, { childList: true, subtree: true });

  // Create configuration window
  function openConfigWindow() {
    const div = document.createElement('div');
    div.style.position = 'fixed';
    div.style.top = '10%';
    div.style.left = '50%';
    div.style.transform = 'translateX(-50%)';
    div.style.backgroundColor = '#333';
    div.style.color = '#fff';
    div.style.padding = '20px';
    div.style.border = '1px solid #444';
    div.style.zIndex = '10000';
    div.innerHTML = `
      <h2>Customize Dark Theme</h2>
      <label>Background Color: <input type="color" id="bgColor" value="${cfg.bgColor}"> <input type="text" id="bgColorHex" value="${cfg.bgColor}" size="7"></label><br>
      <label>Text Color: <input type="color" id="textColor" value="${cfg.textColor}"> <input type="text" id="textColorHex" value="${cfg.textColor}" size="7"></label><br>
      <label>Link Color: <input type="color" id="linkColor" value="${cfg.linkColor}"> <input type="text" id="linkColorHex" value="${cfg.linkColor}" size="7"></label><br>
      <label>Image Brightness: <input type="range" id="imgBrightness" min="0" max="1" step="0.1" value="${cfg.imgBrightness}"></label><br>
      <label>Image Contrast: <input type="range" id="imgContrast" min="1" max="2" step="0.1" value="${cfg.imgContrast}"></label><br>
      <button id="saveConfig">Save</button>
      <button id="closeConfig">Close</button>
    `;
    document.body.appendChild(div);

    // Sync color input and hex input
    document.getElementById('bgColor').addEventListener('input', function() {
      document.getElementById('bgColorHex').value = this.value;
    });
    document.getElementById('bgColorHex').addEventListener('input', function() {
      document.getElementById('bgColor').value = this.value;
    });

    document.getElementById('textColor').addEventListener('input', function() {
      document.getElementById('textColorHex').value = this.value;
    });
    document.getElementById('textColorHex').addEventListener('input', function() {
      document.getElementById('textColor').value = this.value;
    });

    document.getElementById('linkColor').addEventListener('input', function() {
      document.getElementById('linkColorHex').value = this.value;
    });
    document.getElementById('linkColorHex').addEventListener('input', function() {
      document.getElementById('linkColor').value = this.value;
    });

    document.getElementById('saveConfig').addEventListener('click', () => {
      GM_setValue("bgColor", document.getElementById('bgColor').value);
      GM_setValue("textColor", document.getElementById('textColor').value);
      GM_setValue("linkColor", document.getElementById('linkColor').value);
      GM_setValue("imgBrightness", parseFloat(document.getElementById('imgBrightness').value));
      GM_setValue("imgContrast", parseFloat(document.getElementById('imgContrast').value));
      location.reload();
    });

    document.getElementById('closeConfig').addEventListener('click', () => {
      div.remove();
    });
  }

  // Menu command to open configuration window
  if (typeof GM_registerMenuCommand !== "undefined") {
    GM_registerMenuCommand("Customize Dark Theme", openConfigWindow, "C");
  }
})();