Your documentation site should feel like a natural extension of your product. The Theme page (accessible from the dashboard sidebar) gives you one place to customize every visual element readers will see — logos, colors, fonts, navbar, and footer — with a live preview so you know exactly how it'll look before publishing.
Everything on this page is configured through the UI, not MDX. Your changes apply to every page of the site the moment you hit Save.
Logo and favicon
Logo
Upload your logo independently for dark mode and light mode so you can use different versions (a white mark on dark, a colored mark on light). Each theme card has its own logo uploader.
Accepts any common image format (PNG, SVG, JPG, WebP)
Max file size: 2 MB
You can paste a URL instead of uploading if the logo already lives on your CDN
If you only upload one, it will be used across both modes.
Favicon
The small icon shown in the browser tab. Configured once and reused everywhere.
Accepts
.png,.ico,.svgMax file size: 1 MB
URL input also supported
Show project name next to logo
A toggle that controls whether your documentation's name is displayed beside the logo in the navbar. Default: on.
Turn it off if your logo already contains the project name — avoids visual redundancy.
Colors
GitDocAI supports two color modes (dark and light), each configured independently. The Dark theme and Light theme cards on the Theme page mirror each other with the same controls, so you can craft a distinct palette per mode.
Color fields per mode
| Field | What it controls |
|---|---|
| Background | The main page background. Can be solid or a gradient (see below). |
| Text color | The primary text color across the site. |
| Accent color | Links, buttons, active states, and highlights throughout the site. |
| Sidebar BG (optional) | Background of the left sidebar. Leave as Auto to inherit from the main background. |
| Navbar BG (optional) | Background of the top navbar. Leave as Auto to inherit from the main background. |
Every color field accepts:
A hex value typed directly (e.g.,
#3b82f6)Or a color picker (click the swatch to open)
Solid vs gradient backgrounds
For the Background field specifically, you can toggle between:
Solid — a single hex color
Gradient — a linear gradient with an angle (presets: 0°, 45°, 90°, 135°, 180°, 225°, 270°, 315°, or any custom 0–360° value) and up to 5 color stops placed along the 0–100% range
Gradient backgrounds add depth and brand personality without requiring a background image. The editor also exposes a raw CSS field for advanced users who want to paste a linear-gradient(...) value directly.
Default color values
These are the values a fresh documentation starts with:
| Column 1 | Dark mode | Light mode |
|---|---|---|
| Background | #0a0a0a | #fafafa |
| Text color | #ededed | #171717 |
| Accent color | #3b82f6 | #2563eb |
| Sidebar BG | Auto | Auto |
| Navbar BG | Auto | Auto |
You can use these as a starting point and tweak from there.
Typography
Font family
Choose the font that will render across your entire site. The font picker offers:
A searchable list of Google Fonts organized into Sans-serif, Serif, and Monospace categories
System fonts (
system-ui,-apple-system) which load instantlyA custom name field if you want to specify a font not in the curated list
Default: Inter — a widely loved sans-serif designed for screen reading.
The selector includes a live preview ("The quick brown fox...") so you can see how your chosen font looks before committing.
Google Fonts load on-demand when a reader visits your site — you don't need to host them yourself.
Modes
Enable one or both
Toggle each theme on or off independently:
Both modes enabled (default) — readers get a light/dark toggle in the navbar and their choice is remembered across visits.
Single mode — disable one of the two if you want readers to only see your preferred look. If only one is enabled, the toggle disappears from the navbar.
Default mode
When both modes are enabled, pick which one loads on a reader's first visit. The option "Set as default" appears on each theme card when both modes are on.
Dark is the default for new documentations — it tends to read better with code-heavy content, which is most technical documentation.
Navbar
Add links to the top navigation bar to point readers to relevant places — your GitHub repo, a changelog, a contact page, a "book a demo" call-to-action.
Each navbar link has four fields:
| Field | Description |
|---|---|
| Icon | Picked from a curated library (~55 icons — GitHub, Twitter/X, Discord, LinkedIn, YouTube, mail, etc.). Optional — leave empty for text-only links. |
| Label | The text shown on the button. Optional — leave empty for icon-only buttons. |
| URL | The destination. |
| Style | Default (text only), Primary (filled accent background), or Subtle (outlined with accent). |
Drag and drop to reorder. Use + to add, the trash icon to remove.
Keep one Primary button at most. It's the visual call-to-action — having two competes for the reader's attention and dilutes the effect. Default and Subtle work well for supporting links.
Footer
A toggle at the top of the Footer section lets you enable or disable the entire footer. When disabled, your site has no footer at all — readers scroll straight to the page's own bottom navigation.
When enabled, the footer layout is:
[ Site name ] [ Links ]
© Copyright text, centeredFooter links
Same shape as navbar links — icon, label, URL, style — with drag-and-drop to reorder. Typically used for social links and legal pages (Privacy, Terms, Contact).
Copyright text
A single-line text input that renders centered under the footer row. Supports plain text. Example:
2026 Acme Inc. All rights reserved.
Leave blank to omit the line entirely.
Saving your changes
A Save button sits in the sticky header of the Theme page. While you have unsaved changes:
An Unsaved badge appears next to the page title
Navigating away or closing the tab triggers a "you have unsaved changes" warning
The Save button lights up; click it to persist
Once saved, the button flashes ✓ Saved for two seconds as confirmation.
Only Admin and Editor roles can modify the theme. Viewers see a read-only version of the page.
The live preview panel
Each theme card (Dark and Light) includes a live preview at the bottom showing a sample of your documentation rendered with the current colors, font, and logo. Every color change, font switch, or logo upload reflects instantly — you don't need to save first.
Use the preview to iterate quickly: adjust accent color, watch the preview update, keep tweaking until the combination feels right. Only hit Save when you're happy with the result.