Theme Customization

Theme Customization

Customize the visual appearance of your documentation with theme settings. You can configure colors, typography, and preview changes in real-time before applying them to your live docs.

What You Can Customize

Colors - Configure your documentation's color palette across three categories:

• Brand & Primary: Core brand color and primary action colors for buttons and links
• Backgrounds & Surfaces: Page background, card backgrounds, sidebar, and muted backgrounds
• Interactive & Accents: Accent colors, borders, and dividers

Typography - Configure two font families:

• Body Font: Used for paragraphs, headings, and UI elements
• Code Font: Used for code blocks and inline code snippets

Theme Presets - Choose from pre-built themes including Black & White, Red, Blue, Green, Orange, and Purple. Presets automatically configure colors for both light and dark modes.

Using the Theme Editor

1. Navigate to Settings > Themes in your dashboard
2. Use the Light/Dark toggle to preview your theme in different modes
3. Select a preset or customize individual colors using the color controls
4. Configure custom fonts by pasting Google Fonts URLs
5. Preview your changes in real-time with the live preview panel
6. Click Apply Theme to deploy changes to your documentation site

Adding Custom Fonts from Google Fonts

To use custom fonts from Google Fonts in your documentation:

1. Visit fonts.google.com
2. Select the font you want to use
3. Click Get font and select the font weights you need (e.g., 400, 500, 600, 700)
4. Click the Embed tab in the sidebar
5. Copy only the URL from the last <link> tag in the embed code
6. Paste the URL into either the Body Font or Code Font field in the theme settings

Example font URL:

Potential Issues