Pinterest Dark Mode

Force dark mode on pinterest.com, keeps images/svg normal, supports toggle and persists choice.
换行
// ==UserScript==
// @name         Pinterest Dark Mode
// @namespace    https://github.com/trojaninfect
// @version      1.5
// @description  Force dark mode on pinterest.com, keeps images/svg normal, supports toggle and persists choice.
// @author       NoSleep
// @match        https://*.pinterest.com/*
// @grant        GM_addStyle
// @grant        GM_getValue
// @grant        GM_setValue
// @grant        GM_registerMenuCommand
// @run-at       document-start
// ==/UserScript==

(function () {
  'use strict';

  // ID for the injected <style>
  const STYLE_ID = 'tm-pinterest-dark-style-v1';

  // Default: enabled
  let enabled = GM_getValue('tm_pinterest_dark_enabled', true);

  // The main dark CSS. It uses broad selectors and !important to override Pinterest's styles.
  const darkCSS = `
    /* container/backgrounds */
    html.tm-pinterest-dark, html.tm-pinterest-dark body {
      background: #0b0b0b !important;
      color: #e6e6e6 !important;
    }

    /* generic elements */
    html.tm-pinterest-dark body,
    html.tm-pinterest-dark header,
    html.tm-pinterest-dark main,
    html.tm-pinterest-dark nav,
    html.tm-pinterest-dark section,
    html.tm-pinterest-dark aside,
    html.tm-pinterest-dark footer,
    html.tm-pinterest-dark article,
    html.tm-pinterest-dark div,
    html.tm-pinterest-dark li,
    html.tm-pinterest-dark a,
    html.tm-pinterest-dark p,
    html.tm-pinterest-dark span,
    html.tm-pinterest-dark button,
    html.tm-pinterest-dark input,
    html.tm-pinterest-dark textarea {
      background-color: transparent !important;
      color: #e6e6e6 !important;
      border-color: rgba(255,255,255,0.06) !important;
    }

    /* pin cards / tiles / modal backgrounds */
    html.tm-pinterest-dark .BoardPage, /* board pages */
    html.tm-pinterest-dark .Grid,      /* generic grid */
    html.tm-pinterest-dark .GrowthUnauthPage,
    html.tm-pinterest-dark .Collection,
    html.tm-pinterest-dark .pin,
    html.tm-pinterest-dark .Modal,
    html.tm-pinterest-dark .modal,
    html.tm-pinterest-dark [data-test-id="pin"] {
      background: #0f0f10 !important;
      box-shadow: 0 1px 0 rgba(255,255,255,0.03) inset, 0 8px 20px rgba(0,0,0,0.6) !important;
    }

    /* headers, top nav */
    html.tm-pinterest-dark header[role="banner"],
    html.tm-pinterest-dark nav[role="navigation"],
    html.tm-pinterest-dark .Header,
    html.tm-pinterest-dark .topNav {
      background: linear-gradient(180deg,#0d0d0d,#0a0a0a) !important;
      border-bottom: 1px solid rgba(255,255,255,0.04) !important;
    }

    /* inputs, search box */
    html.tm-pinterest-dark input,
    html.tm-pinterest-dark textarea,
    html.tm-pinterest-dark select {
      background: rgba(255,255,255,0.03) !important;
      color: #e6e6e6 !important;
      border: 1px solid rgba(255,255,255,0.04) !important;
    }

    /* links and accents */
    html.tm-pinterest-dark a,
    html.tm-pinterest-dark a:visited {
      color: #ff7a7a !important; /* gentle accent - tweak if you want */
    }

    /* keep images, svgs, videos, icons normal (no site-wide invert) */
    html.tm-pinterest-dark img,
    html.tm-pinterest-dark svg,
    html.tm-pinterest-dark video,
    html.tm-pinterest-dark picture {
      filter: none !important;
      background: transparent !important;
    }

    /* make sure pinned images still have rounded corners etc */
    html.tm-pinterest-dark img[style],
    html.tm-pinterest-dark img {
      image-rendering: auto !important;
    }

    /* text-muted & small text */
    html.tm-pinterest-dark .tappable,
    html.tm-pinterest-dark .small,
    html.tm-pinterest-dark .meta,
    html.tm-pinterest-dark .description {
      color: rgba(230,230,230,0.75) !important;
    }

    /* overlays and tooltips */
    html.tm-pinterest-dark .Overlay,
    html.tm-pinterest-dark .Tooltip,
    html.tm-pinterest-dark .Popover {
      background: rgba(12,12,12,0.95) !important;
      color: #e6e6e6 !important;
    }

    /* remove extremely bright borders */
    html.tm-pinterest-dark * {
      box-shadow: none !important;
    }

    /* scrollbars (if supported) */
    html.tm-pinterest-dark ::-webkit-scrollbar { width: 10px; height: 10px; }
    html.tm-pinterest-dark ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.06); border-radius: 10px; }
    html.tm-pinterest-dark ::-webkit-scrollbar-track { background: rgba(0,0,0,0.12); }

    /* keep images, svgs, videos, icons normal (no site-wide invert) */
html.tm-pinterest-dark img,
html.tm-pinterest-dark svg,
html.tm-pinterest-dark video,
html.tm-pinterest-dark picture {
    filter: none !important;
    background: transparent !important;
}

/* force all non-root SVGs to white */
html.tm-pinterest-dark svg:not(:root) {
    fill: #ffffff !important;
    stroke: #ffffff !important;
    background: transparent !important;
}

/* Fix all sticky/fixed profile header elements */
html.tm-pinterest-dark .ProfilePageHeader,
html.tm-pinterest-dark .ProfilePageHeader-content,
html.tm-pinterest-dark [data-test-id="profile-header"],
html.tm-pinterest-dark .ProfilePageHeader-content > *,
html.tm-pinterest-dark [data-test-id="profile-header"] > * {
    position: relative !important;  /* use relative to scroll normally */
    top: auto !important;
    z-index: auto !important;
    background: #0b0b0b !important;
}

/* Fix profile header from following scroll */
html.tm-pinterest-dark .qiB,
html.tm-pinterest-dark [data-test-id="self-profile-header"] {
    position: relative !important; /* force it into normal flow */
    top: auto !important;          /* reset top offset */
    z-index: auto !important;      /* reset stacking */
    background: #0b0b0b !important; /* match dark mode */
}


  `;

  // Injects or removes the style element and toggles the html class
  function applyStyle(on) {
    // add/remove class on <html>
    const html = document.documentElement;
    if (on) html.classList.add('tm-pinterest-dark'); else html.classList.remove('tm-pinterest-dark');

    let el = document.getElementById(STYLE_ID);
    if (on) {
      if (!el) {
        try {
          // Use GM_addStyle if available for best compatibility
          if (typeof GM_addStyle === 'function') {
            GM_addStyle(darkCSS);
            // GM_addStyle does not set id, so add a marker <style> so observer can find it
            el = document.querySelector('style');
            if (el) el.id = STYLE_ID;
          } else {
            el = document.createElement('style');
            el.id = STYLE_ID;
            el.type = 'text/css';
            el.textContent = darkCSS;
            document.head.appendChild(el);
          }
        } catch (e) {
          // fallback
          el = document.createElement('style');
          el.id = STYLE_ID;
          el.type = 'text/css';
          el.textContent = darkCSS;
          document.head.appendChild(el);
        }
      } else {
        el.textContent = darkCSS;
      }
    } else {
      if (el && el.parentNode) el.parentNode.removeChild(el);
    }
  }

  // Persisted toggle
  function setEnabled(value) {
    enabled = !!value;
    GM_setValue('tm_pinterest_dark_enabled', enabled);
    applyStyle(enabled);
  }

  // Toggle function (used by keyboard shortcut)
  function toggle() {
    setEnabled(!enabled);
  }

  // Keyboard shortcut Ctrl+Shift+D to toggle
  window.addEventListener('keydown', function (e) {
    if (e.key === 'D' && e.ctrlKey && e.shiftKey && !e.altKey && !e.metaKey) {
      toggle();
      e.preventDefault();
    }
  }, true);

  // Add Tampermonkey menu command
  try {
    if (typeof GM_registerMenuCommand === 'function') {
      GM_registerMenuCommand(enabled ? 'Disable Pinterest Dark Mode' : 'Enable Pinterest Dark Mode', toggle);
    }
  } catch (e) { /* ignore */ }

  // Observer: re-add style if Pinterest replaces head or removes style
  const observer = new MutationObserver(muts => {
    // if style removed but enabled, re-add
    if (enabled && !document.getElementById(STYLE_ID)) {
      applyStyle(true);
    }
    // ensure html class survives
    if (enabled && !document.documentElement.classList.contains('tm-pinterest-dark')) {
      document.documentElement.classList.add('tm-pinterest-dark');
    }
  });

  // Start observer on documentElement
  function startObserver() {
    observer.observe(document.documentElement || document, {
      childList: true,
      subtree: true,
      attributes: false
    });
  }

  // Wait for DOM to exist
  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', () => {
      applyStyle(enabled);
      startObserver();
    }, { once: true });
  } else {
    applyStyle(enabled);
    startObserver();
  }

  // In case the user wants immediate feedback before DOMContentLoaded, attempt early apply
  try { applyStyle(enabled); } catch (e) { /* noop */ }

})();
欢迎访问Greasy Fork镜像
