ZeroClaw Docs — Force Light Theme
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.
Install
- Install a userscript manager: Tampermonkey or
Violentmonkey.
- Open
zeroclaw-docs-light.user.js in the manager (drag it in, or click Create new and
paste the contents).
- Visit any
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.
How it works
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.- No class-stripping, no observers. The site does full page reloads on navigation
(verified: an injected window marker does not survive a chapter click), so the userscript
re-runs on every load by itself. No
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.
Verified
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 |
Scope / non-goals
- Only touches
docs.zeroclawlabs.ai.
- Does not modify content, navigation, or the theme-switcher UI — it just wins the variable
cascade. The built-in theme picker still works; this script simply re-asserts light on
every load.
- Status colors (
--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.
