> For the complete documentation index, see [llms.txt](https://gitbook.com/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://gitbook.com/docs/documentation/zh/guan-li-ni-de-zhan-dian/customization/icons-colors-and-themes.md).

# 图标、颜色和主题

## 标题、图标和徽标

<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>

### 标题

您可以为网站设置任意标题。注意：此设置仅会影响显示的标题 *在已发布的文档中*。如果您想在 GitBook 应用中编辑标题，请关闭自定义菜单并在该章节顶部进行编辑。

### 图标

您可以设置一个表情符号，或上传您自己的图标。您在……中设置的图标 **Customize** 菜单中设置的图标将用作您的文档站点的 favicon。更改可能需要几分钟才会显示在已发布的文档中——如果您没有看到新的 favicon，您的浏览器可能缓存了旧的图标，请尝试使用其他浏览器。

{% hint style="info" %}
此设置仅会影响显示的图标 *在已发布的文档中*。如果您想编辑 GitBook 应用内使用的图标，可以在该章节中编辑内容时进行。
{% endhint %}

### 自定义徽标 <picture><source srcset="/files/8pdGCn8TI6WIcFGsPNFh" media="(prefers-color-scheme: dark)"><img src="/files/40b88cc6f18108fd7d78ba3a6dd23080d1b04f2f" alt=""></picture> <picture><source srcset="/files/iRBqMn8OAyswwIZUIKbS" media="(prefers-color-scheme: dark)"><img src="/files/9ecf76138d806047ae4679b26e60179238588f05" alt=""></picture>

您可以将 *两者都* 将已发布网站的标题和图标替换为自定义徽标，以便您的文档更好地体现您的品牌——并且您可以上传两个版本：一个用于浅色模式，一个用于深色模式。

{% hint style="info" %}
**图标和徽标选项有什么区别？**

图标设置允许您上传一张小尺寸的 132×132 像素图片，它将显示 *在……旁边* 在网站标题旁，并充当您网站的 favicon。自定义徽标选项允许您上传一张更大的图片（我们建议宽度至少 600 像素），它将完全替换您设置的任何图标和标题。
{% endhint %}

## 主题

主题可让您为已发布内容的浅色和深色模式自定义配色方案。共有四种主题可供选择。您网站的颜色将直接受到……的影响 **主色** 并 **色调** 的影响。这两个选择会影响界面的各个部分，并可彻底改变您网站的外观和感觉。

<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>

### 清爽

一种现代主题，具有半透明效果和极简风格元素。您的主色（或色调）会影响链接和其他高亮的界面元素。

*清爽适用于所有站点，并且是默认主题。*

### 柔和

一种精致的主题，元素之间对比度较低。网站背景更为突出，并与前景融为一体，某些元素呈现反色效果——以上都基于您的主色（或色调）。

*柔和适用于所有站点。*

### 粗体 <picture><source srcset="/files/8pdGCn8TI6WIcFGsPNFh" media="(prefers-color-scheme: dark)"><img src="/files/40b88cc6f18108fd7d78ba3a6dd23080d1b04f2f" alt=""></picture> <picture><source srcset="/files/iRBqMn8OAyswwIZUIKbS" media="(prefers-color-scheme: dark)"><img src="/files/9ecf76138d806047ae4679b26e60179238588f05" alt=""></picture>

一种冲击力强的主题，具有醒目的颜色和强烈的对比。您的主色（或色调）将用于网站页眉，其他高亮元素（如图标）也会随之着色。

*加粗仅适用于 Premium 或 Ultimate 站点。*

### 渐变 <picture><source srcset="/files/8pdGCn8TI6WIcFGsPNFh" media="(prefers-color-scheme: dark)"><img src="/files/40b88cc6f18108fd7d78ba3a6dd23080d1b04f2f" alt=""></picture> <picture><source srcset="/files/iRBqMn8OAyswwIZUIKbS" media="(prefers-color-scheme: dark)"><img src="/files/9ecf76138d806047ae4679b26e60179238588f05" alt=""></picture>

一种引领潮流的主题，具有渐变背景和色彩点缀。渐变和高亮元素将由您的主色（或色调）着色。

*渐变仅适用于 Premium 或 Ultimate 站点。*

## 颜色

<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>

### 主色

您网站的主色会影响高亮界面项和导航元素的样式，例如链接、当前页面和章节、面包屑以及页眉主按钮。

如果与背景的对比度过低，或者访客的系统请求更高对比度，GitBook 会自动调整单个元素的颜色以提高可读性。

### 色调颜色

您网站的色调颜色会细微地改变整个网站中所有文本和图标的颜色——包括页眉链接、图标颜色，以及诸如……之类的 UI 元素 **提问或搜索** 栏。

色调颜色会 *不* 影响链接和按钮等导航元素，这些元素始终使用主色。

在 **色调颜色** 在该章节中，您会看到基于您主色选择的建议颜色。您可以选择其中一种进行预览，将您的主色作为色调，或使用颜色选择器挑选完全自定义的颜色。

<details>

<summary>使用色调设置背景颜色</summary>

如果您选择的色调非常浅（接近白色）或非常深（接近黑色），并且该颜色接近中性色，GitBook 会将其用作您网站的精确背景颜色，而不是默认的白色或深色背景。这样，只需选择合适的色调，您就可以为文档在浅色模式下营造一种微微偏白或温暖纸张的感觉，或在深色模式下营造特定的深邃暗色背景。

{% hint style="info" %}
需要注意两点：

* 色调需要接近中性（仅带轻微颜色）。如果色调颜色很强，GitBook 会保留标准背景，只对强调色进行着色。
* 它需要明显偏浅或明显偏深。中等灰色不会改变背景。
* 使用 **粗体** 主题时，色调会为页眉而不是页面背景设置样式，因此背景保持不变。
  {% endhint %}

</details>

### 语义颜色 <picture><source srcset="/files/8pdGCn8TI6WIcFGsPNFh" media="(prefers-color-scheme: dark)"><img src="/files/40b88cc6f18108fd7d78ba3a6dd23080d1b04f2f" alt=""></picture> <picture><source srcset="/files/iRBqMn8OAyswwIZUIKbS" media="(prefers-color-scheme: dark)"><img src="/files/9ecf76138d806047ae4679b26e60179238588f05" alt=""></picture>

语义颜色会应用于您已发布内容中的提示块，也可应用于代码块。

您可以更改每种提示样式的背景色；这些更改将反映在您正在自定义的已发布站点上。

{% hint style="info" %}
**注意：** GitBook 编辑器中的提示块将始终保持其标准颜色，不会与您网站的语义颜色一致。
{% endhint %}

### 代码主题 <picture><source srcset="/files/8pdGCn8TI6WIcFGsPNFh" media="(prefers-color-scheme: dark)"><img src="/files/40b88cc6f18108fd7d78ba3a6dd23080d1b04f2f" alt=""></picture> <picture><source srcset="/files/iRBqMn8OAyswwIZUIKbS" media="(prefers-color-scheme: dark)"><img src="/files/9ecf76138d806047ae4679b26e60179238588f05" alt=""></picture>

代码主题会改变已发布文档中代码和 API 块的外观。

主题列表包括：

* **自适应主题** ——这些标准的浅色和深色模式主题会使用您网站的配色来匹配您的品牌。
* [**Shiki**](https://shiki.style/themes) **主题** ——在浅色和深色模式下可从 60 多种主题预设中选择。

您可以为文档的浅色和深色模式分别选择代码主题。并且您可以在任意模式下使用任何浅色或深色配色方案——例如，在文档处于浅色模式时使用深色代码主题。

默认情况下，您选择的主题将同时应用于代码块和 OpenAPI 块。如果您想为 OpenAPI 块设置不同的主题，请点击 **按块类型自定义** <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> 按钮。

## 模式

### 显示模式切换

如果您希望访客手动在浅色和深色模式之间切换，请启用此项。读者可以在任何已发布页面的底部找到切换控件，无论是在桌面端还是移动端。

### 默认模式

选择访客默认以浅色还是深色模式查看您的内容。如果 **显示模式切换** 已启用，他们可以切换模式；如果未启用，他们将只能看到您在此处选择的模式。

*注意：如需在 GitBook 应用内更改主题，请前往侧边栏底部的“设置”菜单。*

## 网站样式

<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>

### 字体族 <picture><source srcset="/files/8pdGCn8TI6WIcFGsPNFh" media="(prefers-color-scheme: dark)"><img src="/files/40b88cc6f18108fd7d78ba3a6dd23080d1b04f2f" alt=""></picture> <picture><source srcset="/files/iRBqMn8OAyswwIZUIKbS" media="(prefers-color-scheme: dark)"><img src="/files/9ecf76138d806047ae4679b26e60179238588f05" alt=""></picture>

从精选的热门选项列表中为您的已发布内容选择标准字体和等宽字体。

{% hint style="info" %}
等宽字体用于您文档站点中的代码块和 OpenAPI 块。
{% endhint %}

### 自定义字体 <picture><source srcset="/files/iRBqMn8OAyswwIZUIKbS" media="(prefers-color-scheme: dark)"><img src="/files/9ecf76138d806047ae4679b26e60179238588f05" alt=""></picture>

上传您自己的标准字体和等宽字体，以使已发布内容与您的品牌风格指南保持一致。要上传字体，请点击 **添加自定义字体** 并按照说明操作。您必须为常规和粗体字重都上传字体文件。

GitBook 目前支持 `.woff` 并 `.woff2`。对于其他格式，请联系 <support@gitbook.com>.

### 图标 <picture><source srcset="/files/8pdGCn8TI6WIcFGsPNFh" media="(prefers-color-scheme: dark)"><img src="/files/40b88cc6f18108fd7d78ba3a6dd23080d1b04f2f" alt=""></picture> <picture><source srcset="/files/iRBqMn8OAyswwIZUIKbS" media="(prefers-color-scheme: dark)"><img src="/files/9ecf76138d806047ae4679b26e60179238588f05" alt=""></picture>

使用页面图标时，请在此处设置显示图标的字重和样式。

### 圆角样式

选择圆角或直角，以匹配您的品牌风格偏好。

### 深度样式

在两种深度样式中选择一种，它们适用于卡片、按钮以及任何带阴影的其他元素：

* **细微：** 少量阴影和层次感。
* **平面：** 无阴影或层次感。

### 链接样式

在两种链接设计中选择一种：

* **默认：** 以您的主色或色调高亮整个链接。
* **强调：** 为链接添加彩色下划线，同时保持文本颜色不变。

## 侧边栏样式

<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>此菜单可让您直观了解不同样式会如何改变侧边栏的外观。</p></figcaption></figure>

### 背景样式

选择侧边栏容器的背景样式。颜色来源于您选择的主题。

有两种选项—— **默认** 并 **填充** ——每种都以视觉方式展示它们会如何改变目录。

### 列表样式

选择侧边栏列表及其选中项的样式。共有三种选项—— **默认**, **胶囊** 并 **线条** ——每种都以视觉方式展示它们会如何改变目录。


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://gitbook.com/docs/documentation/zh/guan-li-ni-de-zhan-dian/customization/icons-colors-and-themes.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
