// ==UserScript==
// @name         【伟哥自用】RobustMQ 文档 强制浅色（去紫黑刺眼主题）
// @namespace    user/robustmq
// @version      2.2.0
// @description  robustmq.com 文档套了一层自定义“黑底紫字”主题且全是 !important。本脚本只用 GM_addStyle 注入 CSS 把暗色变量盖成浅色——不动 .dark 类、不用 observer，既改主题又不会卡死页面。v2.2 修首页：把巨型深紫背景容器 .rhome 改白、紫渐变标题改深色、装饰光晕改蓝。
// @author       朱焱伟
// @match        https://robustmq.com/*
// @run-at       document-start
// @grant        GM_addStyle
// ==/UserScript==

(function () {
  'use strict';

  /* ============ 配置：想换配色改这里 ============ */
  // 点缀色（链接、标题装饰、激活项等）。默认蓝。可改成：
  //   绿色 '#16a34a' / VitePress原生绿 '#3c8772' / 保留紫色仅去黑 '#a855f7'
  const BRAND = '#2563eb';
  const CODE_COLOR = '#476582';              // 行内代码文字色（蓝灰，比紫色正常）
  const CODE_BG = 'rgba(101, 117, 133, .14)';// 行内代码背景（浅灰）
  const BG = '#ffffff';                       // 页面/面板底色
  const BG_ALT = '#f6f6f7';                   // 侧栏、代码块、表头等次级底色
  const BORDER = '#e2e2e3';                   // 分隔线/边框
  /* ============================================== */

  function shade(hex, amt) {            // amt > 0 提亮, < 0 加深
    let h = hex.replace('#', '');
    if (h.length === 3) h = h.split('').map(c => c + c).join('');
    const n = parseInt(h, 16);
    let r = (n >> 16) & 255, g = (n >> 8) & 255, b = n & 255;
    const f = v => Math.max(0, Math.min(255, Math.round(amt >= 0 ? v + (255 - v) * amt : v * (1 + amt))));
    return '#' + [f(r), f(g), f(b)].map(v => v.toString(16).padStart(2, '0')).join('');
  }
  function rgba(hex, a) {
    let h = hex.replace('#', '');
    if (h.length === 3) h = h.split('').map(c => c + c).join('');
    const n = parseInt(h, 16);
    return `rgba(${(n >> 16) & 255}, ${(n >> 8) & 255}, ${n & 255}, ${a})`;
  }

  const B1 = BRAND, B2 = shade(BRAND, -0.18), B3 = shade(BRAND, 0.22);
  const SOFT = rgba(BRAND, 0.14);

  // 关键：不摘 .dark 类。用 html:not(#_) 前缀把特异性拉满，
// 在 .dark 存在的情况下照样盖掉暗色变量与硬编码紫黑规则（实测有效，且零 observer 不卡页面）。
  const X = 'html:not(#_) ';

  const css = `
${X}{ --vp-c-bg:${BG}; --vp-c-bg-alt:${BG_ALT}; --vp-c-bg-soft:${BG_ALT}; --vp-c-bg-elv:${BG};
  --vp-c-bg-soft-up:${BG_ALT}; --vp-c-bg-soft-down:#e3e3e5; --vp-c-bg-mute:${BG_ALT};
  --vp-c-text-1:#3c3c43; --vp-c-text-2:#67676c; --vp-c-text-3:#8a8a91;
  --vp-c-divider:${BORDER}; --vp-c-border:${BORDER}; --vp-c-gutter:${BORDER};
  --vp-c-brand:${B1}; --vp-c-brand-1:${B1}; --vp-c-brand-2:${B2}; --vp-c-brand-3:${B3}; --vp-c-brand-soft:${SOFT};
  --vp-c-tip-1:${B1}; --vp-c-tip-2:${B2}; --vp-c-tip-3:${B3}; --vp-c-tip-soft:${SOFT};
  --vp-c-note-1:${B1}; --vp-c-note-2:${B2}; --vp-c-note-3:${B3}; --vp-c-note-soft:${SOFT};
  --vp-code-color:${CODE_COLOR}; --vp-code-link-color:${B1}; --vp-code-link-hover-color:${B2};
  --vp-code-block-bg:${BG_ALT}; --vp-code-bg:${CODE_BG}; --vp-code-tab-bg:${BG_ALT};
  --vp-button-brand-bg:${B1}; --vp-button-brand-hover-bg:${B2}; --vp-button-brand-active-bg:${B2};
  --vp-nav-bg-color:${BG}; --vp-local-nav-bg-color:${BG}; --vp-sidebar-bg-color:${BG_ALT};
  --vp-local-search-bg:${BG}; --vp-local-search-result-bg:${BG}; --vp-local-search-result-selected-border:${B1};
  --vp-local-search-highlight-bg:${SOFT}; --vp-local-search-highlight-text:${B2};
  --vp-input-bg-color:${BG_ALT}; --vp-input-border-color:${BORDER}; --vp-input-switch-bg-color:${BG_ALT};
  --vp-backdrop-bg-color:rgba(0,0,0,.5); color-scheme:light !important; }

/* —— 顶部导航 / 侧栏 / 本地导航：去掉黑紫玻璃态 —— */
${X}.VPNavBar, ${X}.layout-page .VPNavBar.nav-scrolled,
${X}.VPLocalNav, ${X}.VPSidebar, ${X}.VPNavScreen,
${X}.VPFlyout .VPMenu, ${X}.VPNavBarMenuGroup .VPMenu {
  background-color:${BG} !important; backdrop-filter:none !important; box-shadow:none !important;
}
${X}.VPNavBar, ${X}.layout-page .VPNavBar.nav-scrolled { border-bottom:1px solid ${BORDER} !important; }
${X}.VPSidebar { background-color:${BG_ALT} !important; border-right:1px solid ${BORDER} !important; }
${X}.VPLocalNav { border-bottom:1px solid ${BORDER} !important; }
${X}.VPFlyout .VPMenu, ${X}.VPNavBarMenuGroup .VPMenu {
  border:1px solid ${BORDER} !important; box-shadow:0 12px 32px rgba(0,0,0,.1) !important;
}

/* —— 搜索框 / Logo / 激活项 —— */
${X}.VPNavBarSearch .DocSearch-Button { background:${BG_ALT} !important; border:1px solid ${BORDER} !important; }
${X}.VPNavBarSearch .DocSearch-Button:hover { background:#eee !important; border-color:#d0d0d2 !important; }
${X}.VPNavBarTitle .title { background:none !important; -webkit-text-fill-color:${B1} !important; color:${B1} !important; }
${X}.VPNavBarMenuLink.active::after { background-color:${B1} !important; }
${X}.VPSidebarItem.is-active > .item .link .text { color:${B1} !important; }
${X}.VPSidebarItem.is-active > .item .indicator { background-color:${B1} !important; }

/* —— 标题装饰条 —— */
${X}.vp-doc h1 { border-bottom:1px solid ${BORDER} !important; }
${X}.vp-doc h1::after { background:linear-gradient(90deg, ${B1}, transparent) !important; }
${X}.vp-doc h2::before { background:linear-gradient(${B1}, ${B2}) !important; }
${X}.vp-doc h2::after { background:${B1} !important; }
${X}.vp-doc h3::before { background:${rgba(BRAND, .5)} !important; }
${X}.vp-doc h3:hover::before { background:${B1} !important; }

/* —— 列表标记 / 引用块 —— */
${X}.vp-doc ul > li::marker { color:${B1} !important; }
${X}.vp-doc ol > li::marker { color:${B1} !important; }
${X}.vp-doc blockquote { background:${BG_ALT} !important; border-left:3px solid ${B1} !important; color:#555 !important; }

/* —— 行内代码（站点 !important 硬编码成紫色，必须同等手段盖掉）—— */
${X}.vp-doc :not(pre) > code {
  color:${CODE_COLOR} !important; background:${CODE_BG} !important;
  border:1px solid ${rgba(BRAND, .2)} !important; border-radius:5px !important; padding:2px 7px !important;
}

/* —— 代码块：浅底，并强制用浅色调色板（否则 .dark 下 Shiki 会用浅色字 → 浅字浅底看不清）—— */
${X}.vp-doc div[class*="language-"] { border:1px solid ${BORDER} !important; background:${BG_ALT} !important; }
${X}.vp-doc div[class*="language-"] .lang { color:#999 !important; }
${X}.vp-doc div[class*="language-"] span,
${X}.vp-doc pre code span { color:var(--shiki-light, currentColor) !important; }

/* —— 表格 —— */
${X}.vp-doc table { border:1px solid ${BORDER} !important; }
${X}.vp-doc thead tr { background:${BG_ALT} !important; }
${X}.vp-doc th, ${X}.vp-doc td { border:1px solid ${BORDER} !important; }

/* —— 首页(/en/)的紫红装饰背景：换成品牌蓝并大幅调淡（浅底下不要 50% 强光晕）—— */
${X}{ --vp-home-hero-name-color:${B1}; }
${X}.bg-orb-1 { background:radial-gradient(circle, ${rgba(BRAND, .16)} 0%, transparent 70%) !important; }
${X}.bg-orb-2 { background:radial-gradient(circle, ${rgba(BRAND, .12)} 0%, transparent 70%) !important; }
${X}.bg-orb-3 { background:radial-gradient(circle, ${rgba(BRAND, .08)} 0%, transparent 70%) !important; }
${X}.bg-ripple-1 { background:radial-gradient(${rgba(BRAND, .07)} 0%, transparent 70%) !important; }
${X}.bg-ripple-2 { background:radial-gradient(${rgba(BRAND, .07)} 0%, transparent 70%) !important; }
${X}.bg-grid { background-image:linear-gradient(${rgba(BRAND, .05)} 1px, transparent 1px), linear-gradient(90deg, ${rgba(BRAND, .05)} 1px, transparent 1px) !important; }
${X}.sc-glow { background-color:${B1} !important; }
${X}.section.scenarios-section,
${X}.section.qs-section,
${X}.section.arch-section { background-image:linear-gradient(transparent 0%, ${rgba(BRAND, .03)} 50%, transparent 100%) !important; }
/* 首页巨型深紫背景容器 .rhome（rgb(7,3,15)，硬编码不走变量）→ 白 */
${X}.rhome { background:${BG} !important; }

/* hero / section 标题原来是淡紫/紫渐变文字（-webkit-text-fill-color:transparent + 渐变），
   浅底下不可读，统一改深色 */
${X}.hero-title,
${X}.title-word,
${X}.section-title,
${X}.section-title *,
${X}.title-mq9-badge,
${X}.title-mq9-badge * {
  -webkit-text-fill-color:#1f2430 !important;
  color:#1f2430 !important;
  background:none !important;
}
/* 小徽章单独给个蓝底 */
${X}.title-mq9-badge { background:rgba(37, 99, 235, .12) !important; -webkit-text-fill-color:#2563eb !important; color:#2563eb !important; }

/* 说明：首页的 .scenario-card / .arch-node / 终端等是“暗卡片”设计（暗底+亮字，内部自洽），
   不是背景问题，保持原样以避免把白字翻花。若你确实想把卡片也改成浅色，告诉我再单独做。 */
`;

  // 唯一的副作用：注入样式。没有任何 observer / 轮询 / 改 class，绝不会卡页面。
  if (typeof GM_addStyle === 'function') {
    GM_addStyle(css);
  } else {
    const apply = () => {
      const s = document.createElement('style');
      s.id = '__robustmq_light_theme';
      s.textContent = css;
      (document.head || document.documentElement).appendChild(s);
    };
    if (document.head) apply();
    else document.addEventListener('DOMContentLoaded', apply);
  }
})();