Darkmode user script for StopTheMadnessPro

darkmode.user.js

(function() {
  // Check OS dark mode preference
  if (!window.matchMedia('(prefers-color-scheme: dark)').matches) return;
  
  // Check if already applied
  if (document.getElementById('auto-dark-mode')) {
    document.getElementById('auto-dark-mode').remove();
    console.log('✓ Dark mode removed');
    return;
  }
  
  // More conservative check for native dark mode - only look for actual dark backgrounds
  const bodyBg = window.getComputedStyle(document.body).backgroundColor;
  const htmlBg = window.getComputedStyle(document.documentElement).backgroundColor;
  const isDark = (color) => {
    if (!color || color === 'transparent' || color === 'rgba(0, 0, 0, 0)') return false;
    const rgb = color.match(/\d+/g);
    if (!rgb) return false;
    const brightness = (parseInt(rgb[0]) * 299 + parseInt(rgb[1]) * 587 + parseInt(rgb[2]) * 114) / 1000;
    return brightness < 128;
  };
  
  // If page already has dark background, assume native dark mode is working
  if (isDark(bodyBg) || isDark(htmlBg)) {
    console.log('✓ Native dark mode detected');
    return;
  }
  
  // Apply dark mode CSS
  const darkModeCSS = `
    * {
      scrollbar-color: #6b6b6b #2b2b2b !important;
    }
    :root {
      color-scheme: dark !important;
    }
    html {
      background: #1a1a1a !important;
      filter: invert(1) hue-rotate(180deg) !important;
    }
    img, video, iframe, canvas, embed, object, svg, picture {
      filter: invert(1) hue-rotate(180deg) !important;
      opacity: 0.95 !important;
    }
    [style*="background-image"], [style*="background:url"], [style*="background: url"] {
      filter: invert(1) hue-rotate(180deg) !important;
    }
    code, pre {
      background: #2b2b2b !important;
      color: #e8e6e3 !important;
    }
    ::selection {
      background: #4a6b8a !important;
      color: #fff !important;
    }
    ::-webkit-scrollbar {
      background: #2b2b2b !important;
    }
    ::-webkit-scrollbar-thumb {
      background: #6b6b6b !important;
    }
    input, textarea, select {
      background: #2b2b2b !important;
      color: #e8e6e3 !important;
    }
  `;
  
  const style = document.createElement('style');
  style.id = 'auto-dark-mode';
  style.textContent = darkModeCSS;
  document.head.appendChild(style);
  
  console.log('✓ Dark mode applied');
})();