---
title: "Các kiểu dùng lại được"
description: "Lưu cài đặt văn bản và màu sắc dưới dạng kiểu dùng lại được, áp dụng cho bất kỳ phần tử nào và cập nhật tất cả phần tử sử dụng chúng cùng một lúc."
---

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

Tạo một kiểu để lưu trữ cài đặt văn bản hoặc fill (chẳng hạn như màu sắc, gradient, hoặc ảnh nền), và tái sử dụng nó trên các phần tử ở nhiều màn hình. Khi bạn chỉnh sửa một kiểu, thay đổi đó sẽ ảnh hưởng đến mọi phần tử và màn hình đang sử dụng nó.

Mỗi flow có bộ kiểu riêng của mình.

Mở bảng **Styles** Styles để tạo, duyệt và chỉnh sửa các style cho flow của bạn:

- **Text styles**: Cài đặt kiểu chữ (phông, độ đậm, cỡ chữ).
- **Color styles**: Màu nền, chẳng hạn như màu sắc, gradient và hình ảnh. Một color style có thể có các phiên bản riêng cho chế độ sáng và chế độ tối.

## Kiểu chữ \{#text-styles\}

:::link
Bài viết chính: [Nội dung văn bản](onboarding-text)
:::

Kiểu chữ lưu trữ một bộ cài đặt typography — họ phông chữ, độ đậm, kích thước, chiều cao dòng và khoảng cách chữ cái. Mỗi template flow đều có các preset mặc định, và bạn có thể tạo thêm kiểu tùy chỉnh.

Để tạo một kiểu chữ:

1. Mở bảng **Styles** Styles.
2. Trong tiêu đề bảng, nhấn Create style **Create style**.
3. Đặt **Type** thành **Text**, nhập tên và cấu hình các thiết lập typography.
4. Nhấn **Create**.

Để lưu các thiết lập typography hiện tại của một phần tử văn bản thành một text style mới, nhấn Create text style bên cạnh các tab của font picker. Phần tử đó sẽ sử dụng style mới.

Để áp dụng một text style, chọn phần tử văn bản và chọn style từ dropdown font trong mục **Typography**.

Để chỉnh sửa kiểu chữ, nhấp vào mục tương ứng trong bảng **Styles**, thay đổi cài đặt, rồi nhấp **Save**.

## Màu sắc theo style \{#color-styles\}

Một color style là một [fill](builder-styling#fill) đã được lưu: màu đơn, gradient, hình ảnh, video hoặc kết hợp nhiều loại. Nếu bạn dùng [dark theme](#dark-mode), style đó có thể có các phiên bản riêng cho từng theme. Con số trong mục style cho biết có bao nhiêu phần tử và màn hình đang sử dụng nó.

### Tạo một color style \{#create-a-color-style\}

Để tạo một color style:

1. Mở bảng **Styles** Styles.
2. Trong phần tiêu đề bảng, nhấp vào Create style **Create style**.
3. Đặt **Type** thành **Color** và nhập tên.
4. Thiết lập style. Bạn có thể thay đổi màu sắc hoặc [loại fill](#edit-a-color-style) của layer, và thêm [nhiều layer hơn](#multi-layer-styles) lên trên nó.
5. Nhấp vào **Save**.

Để chuyển giá trị hiện tại của một fill layer hoặc màu sắc thành một style, hãy nhấp vào ô màu của nó, sau đó nhấp vào biểu tượng Create color style bên cạnh tab **Custom** và **Styles**, rồi nhấp **Save**. Fill layer hoặc màu sắc đó giờ sẽ sử dụng style vừa tạo.

### Chỉnh sửa một color style \{#edit-a-color-style\}

Để chỉnh sửa một color style:

1. Mở panel **Styles** Styles.
2. Chọn tab **Colors**.
3. Nhấp vào một mục style.
4. Mỗi version có thể chứa nhiều [layer](#multi-layer-styles). Nhấp vào ô màu để đặt layer theo loại fill của nó:
    - [Màu đồng nhất](#solid-colors)
    - [Gradient](#gradients)
    - [Hình ảnh hoặc video](#images-and-videos)

#### Màu đồng nhất \{#solid-colors\}

1. Đặt màu: nhập giá trị hex, hoặc nhấp vào ô màu và chọn màu.
2. Đặt độ mờ bằng thanh trượt.
3. Nhấp **Save**.

#### Gradient \{#gradients\}

1. Chọn loại fill Gradient **Gradient**.
2. Đặt các điểm dừng, màu tại điểm dừng, và **Direction**.
3. Nhấp **Save**.

:::tip
Để làm cho các thành phần văn bản trên nền ảnh dễ đọc hơn, hãy [làm tối phần rìa của ảnh](paywall-head-picture#tint-a-background) phía sau chúng. Thêm một [layer](#multi-layer-styles) gradient lên trên ảnh. Đặt gradient từ điểm dừng mờ đục ở rìa đó đến điểm dừng trong suốt ở phía còn lại.
:::

#### Hình ảnh và video \{#images-and-videos\}

Phần tử Image hoặc Video không thể có file riêng cho theme tối. Thay vào đó, hãy tạo một container [và đặt nền của nó](paywall-dark-mode#recipe-add-an-image-that-changes-with-the-theme) thành một color style. Trong mỗi phiên bản của style, hãy thiết lập một layer image hoặc video:

1. Chọn kiểu fill Image **Image** hoặc Video **Video**.
2. Tải lên file nguồn cho [ngôn ngữ](custom-media#localize-media) được chọn trong thanh công cụ phía dưới. Bạn có thể nhấn **Replace** nếu đã có file được tải lên trước đó.
3. Nhấn **Save**.

:::tip
Để tô màu cho hình ảnh hoặc video, hãy thêm một [lớp](#multi-layer-styles) màu bán trong suốt lên trên.
:::

### Kiểu nhiều lớp \{#multi-layer-styles\}

Mỗi phiên bản của một kiểu màu có thể chứa nhiều lớp. Bạn có thể dùng kiểu nhiều lớp để tạo ra các hiệu ứng hình ảnh phức tạp hơn, chẳng hạn như hình ảnh có tông màu phủ lên.

Để thêm một layer, nhấp vào mục style. Sau đó, trong phần **Properties**, **Light**, hoặc **Dark**, nhấp vào nút Plus. Một layer mới sẽ xuất hiện phía trên các layer hiện có. Để thay đổi thứ tự các layer, kéo các hàng của chúng. Thiết lập layer mới, rồi nhấp **Save**.

Không phải tất cả các layer đều hiển thị ở mọi nơi bạn áp dụng style. Một số layer chỉ hiển thị khi bạn áp dụng style cho các thuộc tính hoặc phần tử nhất định:

- **Fill (inputs và pickers)**: Chỉ lớp dưới cùng. Các lớp khác bị bỏ qua.
- **Fill (tất cả các phần tử khác)**: Mọi lớp.
- **Border (inputs và pickers)**: Chỉ một màu đơn hoặc gradient. Các lớp hình ảnh và video bị bỏ qua.
- **Border (tất cả các phần tử khác)**: Màu đơn và gradient. Các lớp hình ảnh và video bị bỏ qua.
- **Màu văn bản**: Chỉ các lớp màu đơn. Các lớp gradient, hình ảnh và video bị bỏ qua. Nếu một phiên bản không có lớp màu đơn nào, văn bản sẽ không có màu trong chế độ đó và không hiển thị.
- **Icon, shadow và các màu khác**: Không hỗ trợ style nhiều lớp. Bạn chỉ có thể áp dụng style một lớp duy nhất với màu đơn.

### Áp dụng style màu sắc \{#apply-a-color-style\}

Để áp dụng style màu sắc cho một phần tử, hãy nhấp vào ô màu trong layer fill, màu chữ, màu viền, hoặc màu icon của phần tử đó. Thay thế giá trị tĩnh bằng style bằng cách nhấp vào tab **Styles** và chọn style phù hợp. Nếu không có style nào có giá trị bạn cần, hãy [lưu giá trị hiện tại thành một style](#create-a-color-style).

Để áp dụng style cho nhiều phần tử trên một màn hình, hãy hỏi [AI Editor](flow-ai-editor), ví dụ: `Apply the Card background style to all cards`. Để thiết lập style và áp dụng chúng cho toàn bộ flow, hãy sử dụng [flow-generator skill](flow-generator-skill).

Bạn không thể áp dụng kiểu màu cho phần tử Hình ảnh hoặc Video, vì những phần tử này không có fill. Thay vào đó, hãy tạo một container [và đặt nền cho nó](paywall-dark-mode#recipe-add-an-image-that-changes-with-the-theme).

## Quản lý styles \{#manage-styles\}

Trong bảng **Styles** Styles:

- Để đổi tên một style, nhấp vào mục đó, thay đổi trường **Name**, rồi nhấp **Save**.
- Để nhân đôi một style, nhấp chuột phải vào mục đó và chọn **Duplicate**.
- Để xóa một style, nhấp vào mục đó rồi nhấp **Delete style**. Khi bạn xóa một style đang được các phần tử sử dụng, hãy chọn style thay thế cho nó.
- Để thay đổi thứ tự các style, kéo các mục lên hoặc xuống trong danh sách.
- Để sao chép style sang một flow khác, chọn các mục (Shift-click để chọn nhiều mục) rồi nhấn ⌘C / Ctrl+C. Mở tab tương ứng (**Text** hoặc **Colors**) trong flow kia và nhấn ⌘V / Ctrl+V.

## Chế độ tối \{#dark-mode\}

:::link
Bài viết chính: [Chế độ tối](paywall-dark-mode)
:::

Một kiểu màu có thể có giá trị riêng cho chế độ tối. Khi thiết bị của người dùng được đặt sang chế độ tối, flow sẽ sử dụng giá trị đó thay thế.

Để sử dụng giá trị tối, [thêm giao diện tối](paywall-dark-mode#add-a-dark-theme) vào flow. Sau đó [thay đổi giá trị tối](paywall-dark-mode#configure-the-dark-theme) của từng kiểu cần hiển thị khác đi trong chế độ tối.