> 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 应用中编辑标题，请关闭自定义菜单，然后在该部分顶部进行编辑。

### 图标

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

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

### 自定义徽标 <picture><source srcset="/files/8pdGCn8TI6WIcFGsPNFh" media="(prefers-color-scheme: dark)"><img src="https://2111890564-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNkEGS7hzeqa35sMXQZ4X%2Fuploads%2FqIwkYVR0zglkt0uchq3b%2FPremium%20Badge%20Light.png?alt=media&amp;token=fac71df7-6fdc-4bfc-a97c-174b60480c56" alt=""></picture> <picture><source srcset="/files/iRBqMn8OAyswwIZUIKbS" media="(prefers-color-scheme: dark)"><img src="https://2111890564-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNkEGS7hzeqa35sMXQZ4X%2Fuploads%2FQwF4B36BprLKQ98G1vS8%2FUltimate%20Badge%20Light.png?alt=media&amp;token=7e677b59-1a60-47b1-9440-4c21367dedc5" 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="https://2111890564-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNkEGS7hzeqa35sMXQZ4X%2Fuploads%2FqIwkYVR0zglkt0uchq3b%2FPremium%20Badge%20Light.png?alt=media&amp;token=fac71df7-6fdc-4bfc-a97c-174b60480c56" alt=""></picture> <picture><source srcset="/files/iRBqMn8OAyswwIZUIKbS" media="(prefers-color-scheme: dark)"><img src="https://2111890564-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNkEGS7hzeqa35sMXQZ4X%2Fuploads%2FQwF4B36BprLKQ98G1vS8%2FUltimate%20Badge%20Light.png?alt=media&amp;token=7e677b59-1a60-47b1-9440-4c21367dedc5" alt=""></picture>

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

*鲜明仅适用于 Premium 或 Ultimate 站点。*

### 渐变 <picture><source srcset="/files/8pdGCn8TI6WIcFGsPNFh" media="(prefers-color-scheme: dark)"><img src="https://2111890564-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNkEGS7hzeqa35sMXQZ4X%2Fuploads%2FqIwkYVR0zglkt0uchq3b%2FPremium%20Badge%20Light.png?alt=media&amp;token=fac71df7-6fdc-4bfc-a97c-174b60480c56" alt=""></picture> <picture><source srcset="/files/iRBqMn8OAyswwIZUIKbS" media="(prefers-color-scheme: dark)"><img src="https://2111890564-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNkEGS7hzeqa35sMXQZ4X%2Fuploads%2FQwF4B36BprLKQ98G1vS8%2FUltimate%20Badge%20Light.png?alt=media&amp;token=7e677b59-1a60-47b1-9440-4c21367dedc5" 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 会自动调整单个元素的颜色以提高可读性。

### 色调颜色

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

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

在 **色调颜色** 部分中，你会看到基于你所选主色的建议颜色。你可以选择其中一种进行预览，也可以选择将你的主色作为色调，或者使用取色器挑选一个完全自定义的颜色。

<details>

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

如果你选择的色调非常浅（接近白色）或非常深（接近黑色），并且该颜色接近中性色，GitBook 会将其用作你网站的精确背景色，而不是默认的白色或深色背景。这样你只需选择合适的色调，就能在浅色模式下让文档呈现微妙的米白或暖纸张质感，或在深色模式下呈现特定的深邃暗色背景。

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

* 色调需要接近中性（只有轻微颜色）。颜色很强的色调会保留 GitBook 的标准背景，只会为强调元素着色。
* 它需要明显偏浅或明显偏深。中等深浅的灰色不会改变背景。
* 在 **鲜明** 主题中，色调会用于页眉而不是页面背景，因此背景保持不变。
  {% endhint %}

</details>

### 语义颜色 <picture><source srcset="/files/8pdGCn8TI6WIcFGsPNFh" media="(prefers-color-scheme: dark)"><img src="https://2111890564-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNkEGS7hzeqa35sMXQZ4X%2Fuploads%2FqIwkYVR0zglkt0uchq3b%2FPremium%20Badge%20Light.png?alt=media&amp;token=fac71df7-6fdc-4bfc-a97c-174b60480c56" alt=""></picture> <picture><source srcset="/files/iRBqMn8OAyswwIZUIKbS" media="(prefers-color-scheme: dark)"><img src="https://2111890564-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNkEGS7hzeqa35sMXQZ4X%2Fuploads%2FQwF4B36BprLKQ98G1vS8%2FUltimate%20Badge%20Light.png?alt=media&amp;token=7e677b59-1a60-47b1-9440-4c21367dedc5" alt=""></picture>

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

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

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

### 代码主题 <picture><source srcset="/files/8pdGCn8TI6WIcFGsPNFh" media="(prefers-color-scheme: dark)"><img src="https://2111890564-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNkEGS7hzeqa35sMXQZ4X%2Fuploads%2FqIwkYVR0zglkt0uchq3b%2FPremium%20Badge%20Light.png?alt=media&amp;token=fac71df7-6fdc-4bfc-a97c-174b60480c56" alt=""></picture> <picture><source srcset="/files/iRBqMn8OAyswwIZUIKbS" media="(prefers-color-scheme: dark)"><img src="https://2111890564-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNkEGS7hzeqa35sMXQZ4X%2Fuploads%2FQwF4B36BprLKQ98G1vS8%2FUltimate%20Badge%20Light.png?alt=media&amp;token=7e677b59-1a60-47b1-9440-4c21367dedc5" 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="https://2111890564-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNkEGS7hzeqa35sMXQZ4X%2Fuploads%2FqIwkYVR0zglkt0uchq3b%2FPremium%20Badge%20Light.png?alt=media&amp;token=fac71df7-6fdc-4bfc-a97c-174b60480c56" alt=""></picture> <picture><source srcset="/files/iRBqMn8OAyswwIZUIKbS" media="(prefers-color-scheme: dark)"><img src="https://2111890564-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNkEGS7hzeqa35sMXQZ4X%2Fuploads%2FQwF4B36BprLKQ98G1vS8%2FUltimate%20Badge%20Light.png?alt=media&amp;token=7e677b59-1a60-47b1-9440-4c21367dedc5" alt=""></picture>

从精选的流行选项列表中为已发布内容选择标准字体和等宽字体系列。

#### 主字体

这是默认会用于整个站点的字体。它将始终用于你网站上的正文和界面文案。

#### 标题

标题字体是可选项，只会应用于你网站上的页面标题、H1、H2 和 H3 标题。默认情况下，标题字体设置为与你网站的主字体一致。

#### 等宽

等宽字体用于你文档站点中的代码块和 OpenAPI 块。

### 自定义字体 <picture><source srcset="/files/iRBqMn8OAyswwIZUIKbS" media="(prefers-color-scheme: dark)"><img src="https://2111890564-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNkEGS7hzeqa35sMXQZ4X%2Fuploads%2FQwF4B36BprLKQ98G1vS8%2FUltimate%20Badge%20Light.png?alt=media&amp;token=7e677b59-1a60-47b1-9440-4c21367dedc5" alt=""></picture>

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

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

### 图标 <picture><source srcset="/files/8pdGCn8TI6WIcFGsPNFh" media="(prefers-color-scheme: dark)"><img src="https://2111890564-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNkEGS7hzeqa35sMXQZ4X%2Fuploads%2FqIwkYVR0zglkt0uchq3b%2FPremium%20Badge%20Light.png?alt=media&amp;token=fac71df7-6fdc-4bfc-a97c-174b60480c56" alt=""></picture> <picture><source srcset="/files/iRBqMn8OAyswwIZUIKbS" media="(prefers-color-scheme: dark)"><img src="https://2111890564-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNkEGS7hzeqa35sMXQZ4X%2Fuploads%2FQwF4B36BprLKQ98G1vS8%2FUltimate%20Badge%20Light.png?alt=media&amp;token=7e677b59-1a60-47b1-9440-4c21367dedc5" alt=""></picture>

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

此设置控制你已发布站点上页面图标的字重和样式。它不定义页面组图标或行内图标。页面组图标请在该部分的目录中设置。行内图标请添加在 [行内内容](/docs/documentation/zh/chuang-jian-nei-rong/formatting/inline.md).

### 圆角样式

选择圆角或直角，以符合你品牌的风格偏好。

### 深度样式

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

* **轻微：** 有一些阴影和层次感。
* **平面：** 无阴影或层次感。

### 链接样式

在两种链接设计中选择：

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

## 侧边栏样式

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