# Icons, colors, and themes

## Title, icon and logo

<figure><img src="https://1050631731-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNkEGS7hzeqa35sMXQZ4X%2Fuploads%2FBYTJub4AuG2iJDCS31vp%2Ftitle_icon_logo%402x.png?alt=media&#x26;token=2e3fd867-a480-40da-919b-d5c1e6225317" alt="A GitBook screenshot showing title, icon and logo customization"><figcaption></figcaption></figure>

### Title

You can set any title you choose for your space. Note: this setting will only affect the title that displays *in the published documentation*. If you want to edit the title in the GitBook app, close the customize menu and edit it at the top of the space.

### Icon

You can set an emoji, or upload an icon of your own. The icon you set in the **Customization** menu will be used as the favicon for your docs site.

{% hint style="info" %}
This setting will only affect the icon that displays *in the published documentation*. If you want to edit the icon used within the GitBook app, you can do so when editing content in the space itself.
{% endhint %}

### Custom logo <mark style="background-color:purple;">(Premium & Ultimate)</mark>

You can replace *both* the published space’s title and icon with a custom logo so that your documentation better reflects your own branding — and you can upload two versions: one for light mode, and one for dark mode.

{% hint style="info" %}
**What’s the difference between the icon and logo options?**

The icon setting lets you upload a small, 132×132 px image, which will appear *alongside* your space title and function as your site’s favicon. The custom logo option lets you upload a larger image (we recommend at least 600 px wide), which will completely replace any icon and title you’ve set.
{% endhint %}

## Themes

Themes let you customize the color scheme of your published content for both light and dark mode. There are four themes to choose from. The colors of your site will be directly impacted by the **primary color** and **tint** that you choose. These two selections affect various parts of the interface and can completely change the look and feel of your site.

<figure><img src="https://1050631731-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNkEGS7hzeqa35sMXQZ4X%2Fuploads%2FtFNAAIZeXh1JKtnWepYZ%2Ftheme%402x.png?alt=media&#x26;token=d8d191df-5ed8-44b1-886a-bd9344add841" alt="A GitBook screenshot showing theme options"><figcaption></figcaption></figure>

### Clean

A modern theme featuring translucency and minimally styled elements. Your primary color (or tint) affects links and other highlighted interface elements.

*Clean is available for all sites and is the default theme.*

### Muted

A sophisticated theme with decreased contrast between elements. The site background is more pronounced and blends in with the foreground, and some elements feature an inverted look — all based on your primary color (or tint).

*Muted is available for all sites.*

### Bold <mark style="background-color:purple;">(Premium & Ultimate)</mark>

A high‑impact theme with prominent colors and strong contrasts. Your primary color (or tint) will be used for the header of the site, and other highlighted elements like icons are colored along with it.

*Bold is only available for Premium or Ultimate sites.*

### Gradient <mark style="background-color:purple;">(Premium & Ultimate)</mark>

A trendsetting theme featuring a gradient background and splashes of color. The gradient and highlighted elements will be colored by your primary color (or tint).

*Gradient is only available for Premium or Ultimate sites.*

## Colors

<figure><img src="https://1050631731-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNkEGS7hzeqa35sMXQZ4X%2Fuploads%2FkfBttkCRhIqoNFZGXkX4%2Fcolors%402x.png?alt=media&#x26;token=2ddbf1b0-7893-4fc2-a849-f92656b3151f" alt="A GitBook screenshot showing color customization"><figcaption></figcaption></figure>

### Primary color

Your site’s primary color will affect the styling of highlighted interface items and navigational elements like links, the current page and section, breadcrumbs, and primary header buttons.

GitBook automatically adjusts colors on individual elements for readability if the contrast with the background is too low or when a visitor’s system requests higher contrast.

### Tint color

Your site’s tint color will subtly change the color of all text and icons across your entire site — including header links, icon color, and UI elements like the **Ask or search** bar.

The tint color will *not* affect navigational elements like links and buttons, which always use the primary color.

In the **Tint color** section you’ll see suggested colors based on your primary color selection. You can select one to preview it, choose your primary color as your tint, or pick a completely custom color with the color picker.

### Semantic colors <mark style="background-color:purple;">(Premium & Ultimate)</mark>

Semantic colors are applied to hint blocks within your published content, and can also be applied to code blocks.

You can change the background color of each hint style; these changes will be reflected on the published site you’re customizing.

{% hint style="info" %}
**Note:** Hint blocks in the GitBook editor will always remain in their standard colors and will not match your site’s semantic colors.
{% endhint %}

### Code theme <mark style="background-color:purple;">(Premium & Ultimate)</mark>

Code themes change the appearance of code and API blocks in your published documentation.

The themes list includes:

* **Adaptive themes** – These standard light and dark mode themes use your site’s color palette to match your brand.
* [**Shiki**](https://shiki.style/themes) **themes** – Choose from more than 60 theme presets in both light and dark modes.

You can choose individual code themes for your docs’ light and dark mode. And you can use any light or dark color scheme in any mode — e.g. a dark code theme when your docs are in light mode.

By default, your chosen theme will apply to both code blocks and OpenAPI blocks. If you want to set a different theme for OpenAPI blocks, click the **Customize per block type** <picture><source srcset="https://1050631731-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNkEGS7hzeqa35sMXQZ4X%2Fuploads%2F6uYUpJto7WTkJf9BUPHv%2Fsettings%20-%20dark.svg?alt=media&#x26;token=bf52415f-e999-43a2-9a1a-c85176a014cd" media="(prefers-color-scheme: dark)"><img src="https://1050631731-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNkEGS7hzeqa35sMXQZ4X%2Fuploads%2FwkBqgOPry9HAcW4cxJk0%2Fsettings.svg?alt=media&#x26;token=67bdbb00-ebf3-4a2d-9df8-0c822406f71c" alt=""></picture> button.

## Modes

### Show mode toggle

Enable this if you want visitors to manually toggle between light and dark mode. Readers can find the toggle at the bottom of any published page, on both desktop and mobile.

### Default mode

Choose whether visitors see your content in light or dark mode by default. If **Show mode toggle** is enabled, they can switch modes; if disabled, they’ll only see the mode you choose here.

*Note: to change the theme within the GitBook app, go to your Settings menu at the bottom of the sidebar.*

## Site styles

<figure><img src="https://1050631731-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNkEGS7hzeqa35sMXQZ4X%2Fuploads%2FB8hReiw1xjsXedx7kM2J%2FSite%20styles%402x.png?alt=media&#x26;token=99b1f18b-d1f3-42e4-b11f-4b7bee1c4ceb" alt="A GitBook screenshot showing site style settings"><figcaption></figcaption></figure>

### Font family <mark style="background-color:purple;">(Premium & Ultimate)</mark>

Choose a standard and monospace font family for your published content from a curated list of popular options.

{% hint style="info" %}
Monospace fonts are used in code blocks and OpenAPI blocks on your docs site.
{% endhint %}

### Custom fonts <mark style="background-color:purple;">(Ultimate only)</mark>

Upload your own standard and monospace fonts to align your published content with your brand’s style guide. To upload a font, click **Add custom font** and follow the instructions. You must upload a font file for both regular and bold weights.

GitBook currently supports `.woff` and `.woff2`. For other formats, please contact <support@gitbook.com>.

### Icons <mark style="background-color:purple;">(Premium & Ultimate)</mark>

When using page icons, set the weight and style of the displayed icons here.

### Corner style

Choose either rounded or straight corners to match your brand’s style preferences.

### Depth style

Choose between two depth styles, which apply to cards, buttons and any other element with a shadow:

* **Subtle:** Some shadows and elevation.
* **Flat:** No shadows or elevation.

### Link style

Choose between two link designs:

* **Default:** highlights the entire link in your primary or tint color.
* **Accent:** adds a colored underline to the link, leaving the text color unchanged.

## Sidebar styles

<figure><img src="https://1050631731-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNkEGS7hzeqa35sMXQZ4X%2Fuploads%2FjAXB2lbCWFVFhHTDmY3s%2Fsidebar_styles%402x.png?alt=media&#x26;token=c922b2e7-04de-4140-97e0-802375f9c92f" alt="A GitBook screenshot showing sidebar style options"><figcaption><p>This menu gives you a visual idea of how the different styles will change the look of your sidebar.</p></figcaption></figure>

### Background style

Choose the background style for the sidebar container. The color is derived from your selected theme.

There are two options — **Default** and **Filled** — each with a visual representation of how they’ll change your table of contents.

### List style

Choose the style for the sidebar list and its selected items. There are three options — **Default**, **Pill** and **Line** — each with a visual representation showing how they’ll change your table of contents.