> 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/manage-your-site/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/5v7vLpEB0s9GQaH8Au0V" media="(prefers-color-scheme: dark)"><img src="https://2111890564-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNkEGS7hzeqa35sMXQZ4X%2Fuploads%2FWng01hYenprJGPUfEWma%2FEssential%20Badge%20Light.png?alt=media&amp;token=80159365-1cab-4b3c-96d9-72f2c8d752e6" 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 px 的小图像，它将显示为 *一起* 你的网站标题，并作为你网站的 favicon。自定义徽标选项允许你上传更大的图像（我们建议宽度至少 600 px），它将完全替换你设置的任何图标和标题。
{% 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/5v7vLpEB0s9GQaH8Au0V" media="(prefers-color-scheme: dark)"><img src="https://2111890564-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNkEGS7hzeqa35sMXQZ4X%2Fuploads%2FWng01hYenprJGPUfEWma%2FEssential%20Badge%20Light.png?alt=media&amp;token=80159365-1cab-4b3c-96d9-72f2c8d752e6" 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>

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

*“醒目”仅适用于 Essential 或 Ultimate 站点。*

### 渐变 <picture><source srcset="/files/5v7vLpEB0s9GQaH8Au0V" media="(prefers-color-scheme: dark)"><img src="https://2111890564-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNkEGS7hzeqa35sMXQZ4X%2Fuploads%2FWng01hYenprJGPUfEWma%2FEssential%20Badge%20Light.png?alt=media&amp;token=80159365-1cab-4b3c-96d9-72f2c8d752e6" 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>

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

*“渐变”仅适用于 Essential 或 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/5v7vLpEB0s9GQaH8Au0V" media="(prefers-color-scheme: dark)"><img src="https://2111890564-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNkEGS7hzeqa35sMXQZ4X%2Fuploads%2FWng01hYenprJGPUfEWma%2FEssential%20Badge%20Light.png?alt=media&amp;token=80159365-1cab-4b3c-96d9-72f2c8d752e6" 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/5v7vLpEB0s9GQaH8Au0V" media="(prefers-color-scheme: dark)"><img src="https://2111890564-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNkEGS7hzeqa35sMXQZ4X%2Fuploads%2FWng01hYenprJGPUfEWma%2FEssential%20Badge%20Light.png?alt=media&amp;token=80159365-1cab-4b3c-96d9-72f2c8d752e6" 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/5v7vLpEB0s9GQaH8Au0V" media="(prefers-color-scheme: dark)"><img src="https://2111890564-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNkEGS7hzeqa35sMXQZ4X%2Fuploads%2FWng01hYenprJGPUfEWma%2FEssential%20Badge%20Light.png?alt=media&amp;token=80159365-1cab-4b3c-96d9-72f2c8d752e6" 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>

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

#### 主字体

这是默认会在整个网站中使用的字体。它将始终用于你网站上的正文文本和 UI 文本。

#### 标题

标题字体是可选的，只会应用于你网站上的 Page、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/5v7vLpEB0s9GQaH8Au0V" media="(prefers-color-scheme: dark)"><img src="https://2111890564-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNkEGS7hzeqa35sMXQZ4X%2Fuploads%2FWng01hYenprJGPUfEWma%2FEssential%20Badge%20Light.png?alt=media&amp;token=80159365-1cab-4b3c-96d9-72f2c8d752e6" 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 by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://gitbook.com/docs/documentation/zh/manage-your-site/customization/icons-colors-and-themes.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

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.
