Every Dokly project ships with a clean default theme that works for most products. When you're ready to make it match your brand, theming controls live in Project Settings → Branding.
Screenshot needed
screenshot of the Branding settings page with color pickers, font selector, and live preview
What you can customize#
| Setting | Plans | Notes |
|---|---|---|
| Primary color | All | Buttons, links, accents |
| Heading font | Starter+ | One Google Font from a curated list |
| Body font | Starter+ | One Google Font from a curated list |
| Sidebar background | Pro+ | Light / dark / custom hex |
| Default theme | All | Light / dark / system |
| Custom CSS | Pro+ | Free-form override |
Primary color#
Pick a single primary color in Settings → Branding → Color. Dokly derives the full palette (hover states, dark-mode variants, focus rings) from this one value.
Primary: #FF5722 → used for:
- Sidebar active link
- Inline link color
- Button background
- Focus rings
- Selection highlightIf your brand color is too light or too dark for accessible contrast, the editor warns you and suggests a tweaked variant for the affected elements.
Fonts#
Two slots: heading and body. Both pick from the same curated list of Google Fonts that work well for technical documentation:
- Sans: Inter, Geist, IBM Plex Sans, Manrope, DM Sans
- Serif: Source Serif Pro, Lora, Crimson Pro
- Mono: JetBrains Mono, Fira Code, IBM Plex Mono (mono is fixed for code blocks; this is the "sans" mono pair)
You can't load custom self-hosted fonts on Free / Starter / Pro. Enterprise plans can. The list is curated to keep page weight predictable — every font is preloaded and woff2-compressed.
Dark mode#
Three options for the default theme:
- Light — site loads in light mode.
- Dark — site loads in dark mode.
- System — follows the reader's OS preference.
Regardless of the default, every reader has a toggle in the top-right of the docs site. Their choice is remembered in localStorage.
Dark mode is not optional
You don't get to opt out. Dokly assumes a dark mode toggle is non-negotiable for a developer-facing docs site. If you want light-only, the toggle just won't work — you can't remove it.
Sidebar background#
Pro plans can override the sidebar background. Default is a subtle off-white in light mode and near-black in dark mode. You can pick:
- Light gray — default
- Pure white — for a flatter look
- Subtle tint — picks up your primary color at low opacity
- Custom hex — anything
The active-link color is always derived from your primary; you can't override it independently.
Live preview#
Every change in the Branding panel updates a live preview pane on the right showing a sample page. Hit Save to apply across the whole site.
Saves are atomic — your live site updates the moment you save, with no half-themed states.
Reverting#
The "Reset to default" button at the bottom of Branding restores all settings to the Dokly defaults. There's no warning — settings are cheap to reset and you can always re-apply.