# How to customize your site’s theme

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:

* Where to find [theme settings](https://app.gitbook.com/s/NkEGS7hzeqa35sMXQZ4X/publishing-documentation/customization/icons-colors-and-themes)
* Customizing site-wide or space-specific themes
* [Setting a title, icon, and logo](https://app.gitbook.com/s/NkEGS7hzeqa35sMXQZ4X/publishing-documentation/customization/icons-colors-and-themes#title-icon-and-logo) for your site
* [Changing colors, font styles, light and dark mode](https://app.gitbook.com/s/NkEGS7hzeqa35sMXQZ4X/publishing-documentation/customization/icons-colors-and-themes#themes)
* Customizing brand-centric options like shadows, borders, and icon styles
* and more!

{% embed url="<https://www.youtube.com/watch?v=c0c3ZneVXsg>" %}

{% stepper %}
{% step %}

### Open the customization settings

In the sidebar, click into your docs site to open its overview. Then open the [**Customization** tab](https://app.gitbook.com/s/NkEGS7hzeqa35sMXQZ4X/publishing-documentation/customization) in the site overview.
{% endstep %}

{% step %}

### Choose what you’re customizing

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.
{% endstep %}

{% step %}

### Set core branding

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.
{% endstep %}

{% step %}

### Adjust colors and themes

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](https://app.gitbook.com/s/NkEGS7hzeqa35sMXQZ4X/publishing-documentation/customization/icons-colors-and-themes#semantic-colors-premium-and-ultimate).

If you want, enable a **light/dark mode toggle** for users. Then choose the default mode.
{% endstep %}

{% step %}

### Customize fonts and UI styles

[Choose the fonts](https://app.gitbook.com/s/NkEGS7hzeqa35sMXQZ4X/publishing-documentation/customization/icons-colors-and-themes#font-family-premium-and-ultimate) 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.
{% endstep %}

{% step %}

### Save and go live

Preview changes as you go. When everything looks right, click **Save** to publish.
{% endstep %}
{% endstepper %}

{% hint style="info" %}
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.
{% endhint %}

### Related documentation

<table data-view="cards"><thead><tr><th></th><th data-hidden data-card-target data-type="content-ref">Link</th></tr></thead><tbody><tr><td><strong>Customize your docs site</strong></td><td><a href="https://app.gitbook.com/s/NkEGS7hzeqa35sMXQZ4X/publishing-documentation/customization">Site customization</a></td></tr><tr><td><strong>Semantic colors</strong></td><td><a href="https://app.gitbook.com/s/NkEGS7hzeqa35sMXQZ4X/publishing-documentation/customization/icons-colors-and-themes#semantic-colors-premium-and-ultimate">Icons, colors, and themes #Semantic colors (Premium &#x26; Ultimate)</a></td></tr><tr><td><strong>Site sections</strong></td><td><a href="https://app.gitbook.com/s/NkEGS7hzeqa35sMXQZ4X/publishing-documentation/site-structure/site-sections">Site sections</a></td></tr><tr><td><strong>Variants</strong></td><td><a href="https://app.gitbook.com/s/NkEGS7hzeqa35sMXQZ4X/publishing-documentation/site-structure/variants">Content variants</a></td></tr></tbody></table>