Themes
Pick a visual skin for your KB with one flag in superlore.json. superlore ships seven themes — and your content never changes.
A theme is an opt-in visual skin for your whole KB — chrome, typography, surfaces, and component
styling — selected with one field in superlore.json. Switching themes restyles everything and touches
zero .mdx. Your superpowers ride along unchanged: the Canvas stays a typed graph, every component
still serializes to its knowledge face, and the MCP serves the same corpus — identical across every theme.
{
"name": "your-kb",
"theme": "geist",
"accent": "#6D5CF0"
}Under the hood, the package ships each skin's CSS scoped to data-sl-theme on <html>; the layout
stamps that attribute from your config. A theme is shipped, versioned, and inert until you opt in — not
a fork of your styles. accent and font are orthogonal — they layer on any theme, so a preset
is never tied to a brand colour.
The seven themes — try them live
Click a theme to reskin this whole page in place — navbar, sidebar, type, surfaces, components. Each card shows that theme's palette swatches, a sample set in its own type, and its radius + density. (It's a preview; a reload returns the site to its configured theme.)
superlore's native look — layered surfaces, hairline borders, the Canvas front-and-center.
Mintlify-grade — airy blurred navbar, accent-underlined tabs, a grouped icon sidebar.
Swiss border-first — structure in 1px hairlines, mono nav labels, color as punctuation.
Editorial ivory — authority through restraint, a printed-essay serif body.
Dark-first dense console — near-black, information-dense, calm.
Polished light reference — cool white, navy headings, restrained soft elevation.
Accessible system — one family, weight discipline, guaranteed contrast.
Set it for real
This site runs theme: "mint". Set the flag to any name above (or remove it for default) in
superlore.json and the same content ships in that skin — chrome, type, surfaces, components —
with no other edits.
Brand overrides (work on any theme)
{
"theme": "geist",
"accent": "#304FFE", // one hue → the whole palette (links, active, CTA, ring), light + dark
"font": { "sans": "Inter", "mono": "JetBrains Mono" }, // override a theme's default type
"logo": { "light": "/logo.svg", "dark": "/logo-dark.svg", "href": "/" },
"favicon": "/favicon.svg",
}accentis a single hue that derives the entire accent family (and the fumadocs primary/ring) for light and dark — no per-token overrides. A theme never hardcodes your brand colour.fontoverrides a theme's default type pairing without forking the skin.logo/faviconbrand the navbar + tab the way Mintlify'sdocs.jsondoes.
What a theme restyles
| Area | What varies by theme |
|---|---|
| Surface & background | base canvas (cool-white / warm cream / near-black) + surface tints |
| Typography | the type pairing — sans / serif body / mono labels — and scale, weight, rhythm |
| Radius & density | corner rounding and reading width / vertical rhythm |
| Navbar & sidebar | blur, tab style (underline vs flat), sidebar rows + active treatment |
| Hero & prose | hero treatment and reading type |
| Components | cards, callouts, the release timeline — border-first vs soft elevation |
The content model is never touched — accent, font, and the seven skins are presentation only.
Switch themes
Set the flag
In superlore.json, set "theme" to any of the seven names (or omit for default).
That's it
The layout stamps data-sl-theme on <html> and the packaged skin activates. No component or
.mdx changes, no CSS to write.
Keep your brand
accent drives links, the CTA, icons, and active states in every theme; font overrides the type.
Set them once and the chosen theme adopts them (light and dark derived for you).
Sidebar
Across themes, the docs sidebar collapses (hide + hover-peek — the right pattern for a nested docs tree).
Press ⌘\ (or Ctrl+\) to toggle it, and your collapsed/expanded choice persists across pages
and reloads.
Familiar on the surface, superlore underneath
A theme gives a team migrating from another docs tool the look their users already know — now backed by the Canvas engine, typed dual-representation data, and an MCP.