【伟哥自用】LavinMQ 文档 强制浅色（去黑底）
LavinMQ Docs — Light Theme (Userscript)
lavinmq.com docs are dark by design — Tailwind with hardcoded black backgrounds, no theme toggle, and no light mode at all. This script fabricates a light version: white background, dark text, normal readability.
- Single-file script:
lavinmq-light-theme.user.js - Current version: 1.0.0
- Scope:
*://lavinmq.com/*,*://*.lavinmq.com/*
Why it's needed
The LavinMQ docs are built with Tailwind CSS, and the dark look is baked directly into utility classes, e.g.:
- https://lavinmq.com 亮瞎了！！！
<body class="bg-[#141414]"> <!-- near-black page background -->
.lmq-docs h1, .lmq-docs h2 { color: #FAFAFA; } /* near-white headings */
.lmq-docs p, .lmq-docs ul { color: #D9D6CE; } /* light-grey body text */
There's no .dark class, no data-theme attribute, no toggle — the site is simply dark, with no light mode to switch to. So the only way is to override its palette.
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 specificity, so with!importantit reliably beats Tailwind utilities and the.lmq-docsnested rules; - It uses attribute selectors like
[class~="bg-[#141414]"]to match Tailwind arbitrary-value classes (no need to escape[]#), recoloring the dark palette in place; - It additionally overrides the
.lmq-docsnested text colors for body/headings/tables.
Pure CSS end to end — no DOM listening, no class mutation, so it can't freeze the page (a lesson learned from the RobustMQ script's v1 freeze bug).
Coverage
| Element | Result |
|---|---|
| Page / navbar / sidebar background | White / light grey |
| Body text, lists, tables | Dark grey text #3c3c43 |
| Headings H1–H6 | Dark #1f2430 |
| Borders / dividers | Light grey #e2e2e3 |
| Inline code | Blue-grey text #476582 + light pill |
| Links | Readable dark green #15803d (original #54BE7E was too pale) |
| Code blocks | Kept as the site's dark Monokai highlighting (see below) |
A key trade-off: code blocks stay dark
The site's code blocks use Rouge + a dark Monokai theme (figure.highlight with #262626 background, near-white/pink tokens), tuned for a dark surface. The script intentionally does not flip them light — doing so would make the light tokens invisible on a light background. Dark code blocks on a light doc are common (GitHub et al.), and they stay perfectly readable as-is. Only inline code is restyled as a light pill.
Install
- Install the Tampermonkey browser extension;
- Either:
- Drag
lavinmq-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 lavinmq.com and reload.
To restore the original dark 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 BG = '#ffffff'; // page / navbar background
const BG_ALT = '#f6f6f7'; // sidebar / secondary surface (replaces #2f2f2f)
const BG_TER = '#ececee'; // tertiary surface (replaces #414040)
const TEXT = '#3c3c43'; // body text
const HEAD = '#1f2430'; // heading text
const MUTED = '#67676c'; // muted text
const BORDER = '#e2e2e3'; // borders / dividers
const CODE_COLOR = '#476582'; // inline-code text color
const CODE_BG = 'rgba(101, 117, 133, .14)'; // inline-code background
const LINK = '#15803d'; // link color (set 'keep' to preserve the original mint #54BE7E)
Known limitations / extending
- The script targets the site's current Tailwind palette. If LavinMQ redesigns and changes its color classes, add a line in the same format:
To find class names: open DevTools (F12), select the element, and look at thehtml:not(#_) [class~="new-dark-class-name"]{ background-color:#fff !important; }bg-[#xxxxxx]/text-[#xxxxxx]tokens in itsclass. - If a stray dark element slips through (an icon, a badge), add one more rule as shown above.
Version history
| Version | Notes |
|---|---|
| 1.0.0 | Initial; overrides the Tailwind dark palette + .lmq-docs nested text rules; inline code → light, code blocks kept as dark Monokai |