【伟哥自用】RobustMQ 文档 强制浅色（去紫黑刺眼主题）
RobustMQ Docs — Light Theme (Userscript)
Forces the eye-straining "black background, purple text" custom theme on robustmq.com back to a normal, clean light theme.
- Single-file script:
robustmq-light-theme.user.js - Current version: 2.2.0
- Scope:
https://robustmq.com/*(docs pages + landing page)
robustmq
- https://robustmq.com/en/
- github.com/robustmq/robustmq
- robustmq = MQTT(WS) + Kafka + RabbitMQ(AMQP)
Why it's needed
Fucking Purple!!!! 亮瞎了！！！
The RobustMQ site is built on VitePress but ships an extra custom dark-purple theme layer where nearly every rule is hardcoded purple with !important, e.g.:
.vp-doc code:not(pre code){ background:rgba(168,85,247,.1)!important; color:#c084fc!important } /* purple inline code */
.VPNavBar{ background:rgba(7,3,15,.72)!important } /* forced-black navbar */
.rhome{ background:rgb(7,3,15) } /* giant dark-purple homepage background */
The result is a blinding dark/purple look that's exhausting to read for any length of time.
How it works (and why it won't freeze the page)
The script does nothing but inject one CSS block via GM_addStyle — no observers, no polling, no class toggling:
- Every selector is prefixed with
html:not(#_)to max out CSS specificity, so with!importantit reliably beats the site's own!importantrules; - It overrides VitePress's dark CSS variables (background, text, dividers, brand color, code blocks…) — and the hardcoded purple/black element rules — in place with light values;
- It never touches the
.darkclass on<html>.
⚠️ The early v1.0 used a MutationObserver to strip the
.darkclass, which fought VitePress for that class and triggered an synchronous microtask loop that froze the page. Since v2.0 the script is pure CSS, eliminating the problem entirely. Verified: even with<html class="dark">still present, the whole page renders light.
Coverage
Docs pages
| Element | Result |
|---|---|
| Body / background | White bg + dark grey text |
| Navbar / sidebar / local nav | White / light grey |
| Inline code | Blue-grey text #476582 + light grey bg (no longer purple) |
| Code blocks | Light bg + dark highlighting, readable |
| Blockquotes / tables / heading decorations | Light grey bg + blue accents |
Landing page
| Element | Result |
|---|---|
.rhome giant dark-purple background |
White |
Orbs / grid / ripples / .sc-glow |
Purple → blue (and toned down) |
| Hero / section titles | Faint-purple gradient text → dark, readable |
Install
- Install the Tampermonkey browser extension;
- or scriptcat (recommended)
- Either:
- Drag
robustmq-light-theme.user.jsinto your browser and confirm in the prompt; - or open the Tampermonkey dashboard → Create a new script → paste the file contents → save;
- Drag
- Open robustmq.com and reload.
The script force-locks the light theme, so the site's built-in theme toggle will appear to do nothing — that's expected. To restore the original look, disable the script in Tampermonkey and reload.
Customize the palette
There's a config block at the top of the script — just change the constants:
const BRAND = '#2563eb'; // accent color (links, heading decor, active items)
const CODE_COLOR = '#476582'; // inline-code text color
const CODE_BG = 'rgba(101, 117, 133, .14)'; // inline-code background
const BG = '#ffffff'; // page / panel background
const BG_ALT = '#f6f6f7'; // sidebar / code-block / table-head secondary bg
const BORDER = '#e2e2e3'; // dividers / borders
Common BRAND values:
'#2563eb'blue (default)'#16a34a'green'#3c8772'VitePress native green'#a855f7'keep purple (only remove the black bg)
Known limitations
The homepage's .scenario-card, .arch-node, and terminal frames are "dark card" components (dark background with light text — internally consistent). The script leaves them as-is — forcibly flipping them to light would break their white text and pink icons. If you want those cards converted to light as well, extend the script on top of this baseline.
If a stray purple element slips through, open DevTools (F12), grab its class name, and add one more rule.
Version history
| Version | Notes |
|---|---|
| 1.0.0 | Initial; stripped .dark via MutationObserver (caused page freeze, deprecated) |
| 2.0.0 | Pure CSS (GM_addStyle), leaves .dark alone — fixes the freeze; covers docs pages |
| 2.1.0 | Homepage decorations (orbs / grid / ripples) purple → blue |
| 2.2.0 | Homepage giant .rhome background → white; purple gradient titles → dark |