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

Чтобы превратить текущее значение слоя заливки или цвета в стиль, нажмите его образец, затем нажмите значок Create color style рядом с вкладками **Custom** и **Styles** и нажмите **Save**. Теперь слой заливки или цвет использует этот стиль.

### Редактирование цветового стиля \{#edit-a-color-style\}

Чтобы отредактировать цветовой стиль:

1. Откройте панель **Styles** Styles.
2. Выберите вкладку **Colors**.
3. Нажмите на запись стиля.
4. Каждая версия может содержать несколько [слоёв](#multi-layer-styles). Нажмите на образец цвета, чтобы задать слой в соответствии с его типом заливки:
    - [Сплошной цвет](#solid-colors)
    - [Градиент](#gradients)
    - [Изображение или видео](#images-and-videos)

#### Сплошные цвета \{#solid-colors\}

1. Задайте цвет: введите hex-значение или кликните на образец и выберите цвет.
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**.

Не все слои отображаются везде, где применяется стиль. Некоторые слои видны только при применении стиля к определённым свойствам или элементам:

- **Fill (инпуты и пикеры)**: Только нижний слой. Остальные слои игнорируются.
- **Fill (все остальные элементы)**: Каждый слой.
- **Border (инпуты и пикеры)**: Только один сплошной цвет или градиент. Слои с изображениями и видео игнорируются.
- **Border (все остальные элементы)**: Сплошные цвета и градиенты. Слои с изображениями и видео игнорируются.
- **Цвет текста**: Только слои со сплошным цветом. Слои с градиентом, изображениями и видео игнорируются. Если в версии нет слоя со сплошным цветом, текст не имеет цвета в этом режиме и не отображается.
- **Цвет иконки, тени и другие цвета**: Многослойные стили не поддерживаются. Можно применить только один слой стиля со сплошным цветом.

### Применение цветового стиля \{#apply-a-color-style\}

Чтобы применить цветовой стиль к элементу, нажмите на образец в слое заливки, цвете текста, цвете границы или цвете иконки. Замените статическое значение на стиль, открыв вкладку **Styles** и выбрав нужный стиль. Если подходящего стиля нет, [сохраните текущее значение как стиль](#create-a-color-style).

Чтобы применить стиль сразу ко многим элементам на экране, обратитесь к [AI Editor](flow-ai-editor), например: `Apply the Card background style to all cards`. Чтобы настроить стили и применить их по всему флоу, используйте [скилл flow-generator](flow-generator-skill).

К элементу Image или Video нельзя применить цветовой стиль, так как у этих элементов нет заливки. Вместо этого создайте контейнер [и задайте ему фон](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) каждого стиля, который должен отличаться в тёмном режиме.