How to customize your site’s theme

Learn how to edit colors, icons, logos, and more

Once your content is created or imported, GitBook makes it easy to customize your docs site so it matches your brand.

This video and guide will take you through customizing your site’s theme, covering:

In the sidebar, click into your docs site to open its overview. Then open the Customization tab in the site overview.

Decide whether you’re customizing the whole site or just part of it.

Use site-wide customization for consistent branding. Use section-specific customizations when different sections need different styles.

Start with the basics: set your site title, icon, and logo.

Then choose a site-wide theme (for example, gradients) and your primary color. These choices drive the look across the site.

Fine-tune the color system for your site.

Update subtle and bold colors for backgrounds and accents. Adjust semantic colors for things like hints and callouts.

If you want deeper control over hints and callouts, customize your semantic colors.

If you want, enable a light/dark mode toggle for users. Then choose the default mode.

Choose the fonts for your content.

Set the main font, add custom fonts if needed, and pick a monospace font for code blocks.

Then tweak the UI styling. Adjust icon style, corners, shadows, and link appearance until it matches your brand.

Preview changes as you go. When everything looks right, click Save to publish.

Make sure you hit Save before you navigate away from the Customization screen. Your changes won’t appear on your docs site until you save them.

Customize your docs site

Semantic colors

Site sections

Variants

Last updated 4 months ago

Was this helpful?