---
title: "可复用样式"
description: "将文字和颜色设置保存为可复用样式，应用到任意元素，并一次性更新所有使用该样式的元素。"
---

> **AI agents**: to search Adapty docs faster and with fewer tokens, install the Adapty skills: `npx adapty skills install --yes`

创建样式，用于存储文字设置或填充内容（如颜色、渐变或背景图片），并在多个屏幕的元素间复用。编辑样式时，所有使用该样式的元素和屏幕都会同步更新。

每个流程都有自己独立的样式集合。

打开 **Styles** Styles 面板，可以创建、浏览和编辑流程样式：

- **Text styles**：排版设置（字体、字重、字号）。
- **Color styles**：填充效果，如纯色、渐变和图片。单个颜色样式可以分别为浅色模式和深色模式设置不同版本。

## 文字样式 \{#text-styles\}

:::link
主要文章：[文字内容](onboarding-text)
:::

文字样式存储一组排版设置——字体系列、字重、字号、行高和字间距。每个流程模板都包含默认预设，你也可以创建自定义样式。

要创建文字样式：

1. 打开 **Styles** Styles 面板。
2. 在面板标题栏中，点击 Create style **Create style**。
3. 将 **Type** 设置为 **Text**，输入名称，并配置排版设置。
4. 点击 **Create**。

如需将文本元素的当前排版设置保存为新的文本样式，点击字体选择器选项卡旁边的 Create text style，该元素将自动应用新样式。

如需应用文本样式，选中文本元素，然后在 **Typography** 部分的字体下拉菜单中选择对应样式。

要编辑文本样式，请在 **Styles** 面板中点击对应条目，修改设置，然后点击 **Save**。

## 颜色样式 \{#color-styles\}

颜色样式是一种已保存的[填充](builder-styling#fill)：可以是纯色、渐变、图片、视频，或它们的组合。如果你启用了[深色主题](#dark-mode)，还可以为每种主题单独设置版本。样式条目中的数字表示当前使用该样式的元素和页面数量。

### 创建颜色样式 \{#create-a-color-style\}

创建颜色样式的步骤如下：

1. 打开 **Styles** Styles 面板。
2. 在面板标题栏中，点击 Create style **Create style**。
3. 将 **Type** 设置为 **Color**，并输入名称。
4. 配置样式。你可以修改图层的颜色或[填充类型](#edit-a-color-style)，也可以在其上方[添加更多图层](#multi-layer-styles)。
5. 点击 **Save**。

要将填充图层或颜色的当前值转换为样式，请点击其色板，然后点击 **Custom** 与 **Styles** 标签页旁边的 Create color style 图标，再点击 **Save**。填充图层或颜色现在将使用该样式。

### 编辑颜色样式 \{#edit-a-color-style\}

编辑颜色样式的步骤如下：

1. 打开 **Styles** Styles 面板。
2. 选择 **Colors** 标签页。
3. 点击某个样式条目。
4. 每个版本可包含多个[图层](#multi-layer-styles)。点击色块，根据填充类型设置图层：
    - [纯色](#solid-colors)
    - [渐变](#gradients)
    - [图片或视频](#images-and-videos)

#### 纯色 \{#solid-colors\}

1. 设置颜色：输入十六进制值，或点击色块进行选择。
2. 用滑块设置不透明度。
3. 点击 **Save**。

#### 渐变色 \{#gradients\}

1. 选择 Gradient **Gradient** 填充类型。
2. 设置色标、色标颜色及 **Direction**。
3. 点击 **Save**。

:::tip
若要让背景图上方的文字元素更易于阅读，可[将图片边缘调暗](paywall-head-picture#tint-a-background)。在图片上方添加渐变[图层](#multi-layer-styles)，从该边缘的不透明色标渐变至另一侧的透明色标。
:::

#### 图片与视频 \{#images-and-videos\}

Image 或 Video 元素无法为深色主题使用不同的文件。请改为创建一个容器，并[将其背景设置](paywall-dark-mode#recipe-add-an-image-that-changes-with-the-theme)为颜色样式。在样式的每个版本中，设置图片或视频图层：

1. 选择 Image **Image** 或 Video **Video** 填充类型。
2. 为底部工具栏中选定的[语言环境](custom-media#localize-media)上传源文件。如果已有文件，可点击 **Replace** 进行替换。
3. 点击 **Save**。

:::tip
要为图片或视频添加色调效果，请在其上方叠加一个半透明颜色[图层](#multi-layer-styles)。
:::

### 多层样式 \{#multi-layer-styles\}

每个颜色样式版本都可以包含多个图层。你可以使用多层样式来创建更复杂的视觉效果，例如带色调的图片。

要添加图层，请点击样式条目。然后在 **Properties**、**Light** 或 **Dark** 区域中，点击 Plus 按钮。新图层会显示在现有图层的上方。如需调整图层顺序，拖动对应行即可。设置好新图层后，点击 **Save**。

并非所有图层在应用该样式的所有位置都会显示。某些图层仅在将样式应用于特定属性或元素时才可见：

- **填充（输入框和选择器）**：仅底层生效，其他层忽略。
- **填充（所有其他元素）**：每一层均生效。
- **边框（输入框和选择器）**：仅支持单一纯色或渐变色，图片和视频层忽略。
- **边框（所有其他元素）**：支持纯色和渐变色，图片和视频层忽略。
- **文字颜色**：仅纯色层生效，渐变、图片和视频层忽略。如果某个版本没有纯色层，该模式下文字将无颜色，不可见。
- **图标、阴影及其他颜色**：不支持多层样式，只能应用单层纯色样式。

### 应用颜色样式 \{#apply-a-color-style\}

要将颜色样式应用于某个元素，请点击其填充层、文本颜色、边框颜色或图标颜色的色块。通过点击 **Styles** 标签页并选择对应样式条目，将静态值替换为样式。如果没有符合需求的样式，请[将当前值保存为样式](#create-a-color-style)。

要将某个样式应用到页面上的多个元素，可以向 [AI Editor](flow-ai-editor) 发起请求，例如：`Apply the Card background style to all cards`。若需要统一设置样式并将其应用到整个流程，请使用 [flow-generator skill](flow-generator-skill)。

您无法将颜色样式应用于图片或视频元素，因为这些元素没有填充属性。请改为创建一个容器，[并设置其背景](paywall-dark-mode#recipe-add-an-image-that-changes-with-the-theme)。

## 管理样式 \{#manage-styles\}

在 **Styles** Styles 面板中：

- 要重命名样式，点击对应条目，修改 **Name** 字段，然后点击 **Save**。
- 要复制样式，右键点击对应条目并选择 **Duplicate**。
- 要删除样式，点击对应条目，然后点击 **Delete style**。当删除某个元素正在使用的样式时，需选择一个替代样式。
- 要调整样式的排列顺序，直接拖动条目上下移动即可。
- 要将样式复制到另一个流程，选中对应条目（按住 Shift 点击可多选），然后按 ⌘C / Ctrl+C。在另一个流程中打开相同的标签页（**Text** 或 **Colors**），按 ⌘V / Ctrl+V 粘贴。

## 深色模式 \{#dark-mode\}

:::link
主要文章：[深色模式](paywall-dark-mode)
:::

颜色样式可以为深色模式单独设置一个值。当用户的设备切换到深色模式时，流程会使用该值。

要使用深色值，请先为流程[添加深色主题](paywall-dark-mode#add-a-dark-theme)，然后[修改深色值](paywall-dark-mode#configure-the-dark-theme)，使各样式在深色模式下呈现不同的效果。