A Tampermonkey/Violentmonkey userscript that forces docs.zeroclawlabs.ai into a normal, white-background light theme.
The site ships locked to a default-dark theme (near-black #1e1e24 background with a
high-contrast cyan accent) that is genuinely hard to read for long sessions. This script
overrides it with the site's own default-light palette, so the result looks native and
intentional rather than like a hacked-on reskin.
Companion to
a.js(the same idea for robustmq.com). Same playbook, adapted to mdBook.
zeroclaw-docs-light.user.js in the manager (drag it in, or click Create new and
paste the contents).docs.zeroclawlabs.ai page. The dark flash is gone before first paint.@match https://docs.zeroclawlabs.ai/* covers every version path (/v0.8.3/…) and locale
(/en/, /zh-CN/, /ja/, …).
At the top of the script:
const BRAND = '#0891b2'; // native default-light accent
Change that one line to recolor links, inline code, the active sidebar item, quote borders,
search highlights, and mermaid diagram nodes — the full accent family is derived from it via
the shade() / rgba() / triplet() helpers. A few options:
BRAND |
Look |
|---|---|
#0891b2 |
native cyan (default) |
#2563eb |
blue |
#4f46e5 |
indigo |
#7c3aed |
purple |
#16a34a |
green |
When BRAND equals the native value, the derivation block is skipped entirely, so the
default install is byte-for-byte the site's own light theme.
The docs are mdBook reskinned with a custom --pc-* design system. Critically, every
visual surface — code highlighting, tables, search results, blockquotes, mermaid diagrams —
is bridged onto --pc-* via var(). That means overriding the base variables is enough;
everything downstream follows automatically.
@run-at document-start + GM_addStyle — injects the override before first paint
(no dark flash). It also runs before mermaid-init.js, which reads --color-scheme /
--pc-* at load time to pick diagram colors — so diagrams render light too.html:not(#_){ --x: … !important } — the :not(#_) raises specificity to beat the
per-theme html.<theme-id>{} rules in pc-themes.css, and !important guarantees the
win. The site's theme variables are not marked !important, so this is decisive.MutationObserver, no jank.The only hardcoded colors in the site's reskin are a few black box-shadow values, which
look correct (better, even) on a light background — so nothing else needs patching.
Tested live against request-lifecycle.html (inline code, <pre> blocks, and four mermaid
diagrams) by injecting the exact stylesheet and reading computed styles:
| Surface | Result |
|---|---|
| Page / body text | #f4f4f5 bg, #18181b text |
| Sidebar / menu bar | white bg, dark text |
| Inline code | #06b6d4 accent on soft tint |
<pre> block |
light bg, dark text |
| Mermaid diagrams | node stroke #0891b2 (light accent), dark text |
docs.zeroclawlabs.ai.--pc-status-success, etc.) are left as-is; they're vivid by design and
used for small badges, not body text. Tweak them in the variable block if you want.