X (Twitter) の背景色を以前の "Dark Dim" テーマに戻します。

x-dark-dim-restorer.user.js

// ==UserScript==
// @name         X Dark Dimmed Restorer
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  X (Twitter) の背景色を以前の "Dark Dim" テーマに戻します。
// @author       hidekuro (https://github.com/hidekuro) & GitHub Copilot
// @match        https://x.com/*
// @match        https://twitter.com/*
// @grant        GM_registerMenuCommand
// @grant        GM_setValue
// @grant        GM_getValue
// @run-at       document-start
// @updateURL    https://gist.github.com/hidekuro/1d09aa9e2a092c9e5a9c181196f472cc/raw/x-dark-dim-restorer.user.js
// @downloadURL  https://gist.github.com/hidekuro/1d09aa9e2a092c9e5a9c181196f472cc/raw/x-dark-dim-restorer.user.js
// ==/UserScript==

(function () {
  const THEMES = {
    "dark_dim": {
      name: "Original Dark Dim (Classic Twitter)",
      colors: {
        BG_MAIN: "rgb(21, 32, 43)", // #15202B - メイン背景色
        BG_ACCENT: "rgb(25, 39, 52)", // #192734 - ヘッダー・入力欄
        BG_HOVER: "rgb(34, 48, 60)", // #22303C - ホバーなど
        BORDER: "rgb(56, 68, 77)", // #38444D - 境界線
        TEXT_MAIN: "rgb(255, 255, 255)",
        TEXT_SUB: "rgb(136, 153, 166)"
      }
    },
    "github_dim": {
      name: "GitHub Dark Dimmed",
      colors: {
        BG_MAIN: "#22272e",
        BG_ACCENT: "#2d333b",
        BG_HOVER: "#444c56",
        BORDER: "#444c56",
        TEXT_MAIN: "#adbac7",
        TEXT_SUB: "#768390"
      }
    }
  };

  // 置換対象とする「真っ黒なテーマ」の色
  const TARGET_COLORS = [
    "rgb(0, 0, 0)",
    "rgba(0, 0, 0, 1)",
    "#000000",
    "#000"
  ];

  const currentThemeKey = GM_getValue("theme_key", "dark_dim");
  const currentTheme = THEMES[currentThemeKey] || THEMES.dark_dim;

  GM_registerMenuCommand(`現在のテーマ: ${currentTheme.name} (クリックして変更)`, () => {
    const nextStyle = currentThemeKey === 'dark_dim' ? 'github_dim' : 'dark_dim';
    GM_setValue("theme_key", nextStyle);
    location.reload();
  });

  console.log(`[X Dark Restorer] Active Theme: ${currentTheme.name}`);

  // JSによる置換が遅延する場合や、CSSセレクタで効率的にスタイルを適用できる要素のためにスタイルを注入
  const styleEl = document.createElement('style');
  styleEl.innerHTML = `
        :root {
            --x-dim-bg-main: ${currentTheme.colors.BG_MAIN};
            --x-dim-bg-accent: ${currentTheme.colors.BG_ACCENT};
            --x-dim-bg-hover: ${currentTheme.colors.BG_HOVER};
            --x-dim-border: ${currentTheme.colors.BORDER};
        }

        body {
            background-color: var(--x-dim-bg-main) !important;
        }

        /* インラインスタイルよりも詳細度を上げて上書きする */
        [style*="background-color: rgb(0, 0, 0)"],
        [style*="background-color: #000000"] {
            background-color: var(--x-dim-bg-main) !important;
        }

        header[role="banner"],
        div[data-testid="primaryColumn"] {
             background-color: var(--x-dim-bg-main) !important;
        }

        div[role="tablist"] {
            background-color: var(--x-dim-bg-main) !important;
        }

        /* サイドバーカラム自体は透明にして、中身のカードのみ色付けする */
        div[data-testid="sidebarColumn"] {
             background-color: transparent !important;
        }

        [role="menu"],
        [role="dialog"],
        [data-testid="Dropdown"] {
             background-color: var(--x-dim-bg-accent) !important;
        }
    `;
  document.head.appendChild(styleEl);

  const observer = new MutationObserver((mutations) => {
    mutations.forEach((mutation) => {
      if (mutation.type === 'childList') {
        mutation.addedNodes.forEach(node => {
          if (node.nodeType === 1) { // ELEMENT_NODE
            processNode(node);
            const descendants = node.querySelectorAll('[style*="background-color"]');
            descendants.forEach(processNode);
          }
        });
      } else if (mutation.type === 'attributes' && mutation.attributeName === 'style') {
        processNode(mutation.target);
      }
    });
  });

  observer.observe(document.body, {
    childList: true,
    subtree: true,
    attributes: true,
    attributeFilter: ['style']
  });

  document.querySelectorAll('*').forEach(processNode);

  function processNode(node) {
    if (!node.style) return;

    const bg = node.style.backgroundColor;

    // パフォーマンス優先のため、高コストなDOM探索（closest等）は行わず一律置換する
    if (bg && TARGET_COLORS.includes(bg.replace(/\s+/g, ''))) {
      node.style.setProperty('background-color', currentTheme.colors.BG_MAIN, 'important');
    }

    if (node.style.borderColor) {
      const border = node.style.borderColor;
      // 元のダークテーマで使われていた特定のボーダー色などをキャッチする
      if (border.includes('47, 51, 54') || border.includes('56, 68, 77') || border === 'rgb(0, 0, 0)') {
        node.style.setProperty('border-color', currentTheme.colors.BORDER, 'important');
      }
    }
  }

})();