# 图标、颜色和主题

## 标题、图标和徽标

<figure><img src="https://2111890564-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。

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

### 自定义徽标 <mark style="background-color:purple;">（高级版和终极版）</mark>

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

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

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

## 主题

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

<figure><img src="https://2111890564-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>

### 简洁

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

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

### 柔和

一种精致的主题，元素之间的对比度较低。网站背景更为突出，并与前景融为一体，部分元素呈现反转外观——所有这些都基于你的主色（或色调）。

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

### 加粗 <mark style="background-color:purple;">（高级版和终极版）</mark>

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

*粗放仅适用于高级版或终极版站点。*

### 渐变 <mark style="background-color:purple;">（高级版和终极版）</mark>

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

*渐变仅适用于高级版或终极版站点。*

## 颜色

<figure><img src="https://2111890564-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 元素。

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

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

### 语义颜色 <mark style="background-color:purple;">（高级版和终极版）</mark>

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

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

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

### 代码主题 <mark style="background-color:purple;">（高级版和终极版）</mark>

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

主题列表包括：

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

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

默认情况下，你选择的主题将同时应用于代码块和 OpenAPI 块。如果你想为 OpenAPI 块设置不同的主题，请点击 **按区块类型自定义** <picture><source srcset="broken-reference" media="(prefers-color-scheme: dark)"><img src="https://2111890564-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://2111890564-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>

### 字体族 <mark style="background-color:purple;">（高级版和终极版）</mark>

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

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

### 自定义字体 <mark style="background-color:purple;">（仅终极版）</mark>

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

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

### 图标 <mark style="background-color:purple;">（高级版和终极版）</mark>

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

### 圆角样式

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

### 深度样式

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

* **柔和：** 一些阴影和层次感。
* **扁平：** 无阴影或层次感。

### 链接样式

在两种链接设计之间进行选择：

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

## 侧边栏样式

<figure><img src="https://2111890564-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>

### 背景样式

选择侧边栏容器的背景样式。颜色取自你所选的主题。

有两个选项—— **默认** 并在 **填充** ——每种选项都配有可视化示意，展示它们将如何改变你的目录。

### 列表样式

选择侧边栏列表及其选中项的样式。共有三个选项—— **默认**, **胶囊** 并在 **线条** ——每种选项都配有可视化示意，展示它们将如何改变你的目录。
