> ## Documentation Index
> Fetch the complete documentation index at: https://docs.flowstep.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Dùng theme để giữ màu sắc và độ bo góc nhất quán trên các màn hình Flowstep

> Chọn hoặc tạo theme cho mỗi tệp, chỉnh sửa theme cho từng màn hình, chỉnh sửa theme của tổ chức, và liên kết màu sắc cùng độ bo góc với token của theme để mọi thay đổi lan đến mọi màn hình.

Một theme là bảng màu và độ bo góc dùng chung cho các màn hình của bạn. Mỗi tệp đều có một theme và một giao diện (sáng hoặc tối), và các màn hình được tạo kiểu bằng token của theme. Chỉnh sửa một theme và mọi màn hình dùng theme đó sẽ cập nhật theo, nhờ vậy nhóm của bạn làm việc từ cùng một bộ quyết định thay vì phải nhắc lại màu sắc trong mỗi prompt.

Các theme bạn tạo hoặc sinh ra sẽ được lưu vào tổ chức và liệt kê dưới **Themes** trên Home, nên mọi tệp trong tổ chức đều có thể dùng chúng.

## Chọn theme cho một tệp

Chọn theme và giao diện cho các màn hình mới từ khung soạn prompt bên trong tệp. Nút theme không có trong hộp prompt trên Home.

<Steps>
  <Step title="Mở menu theme">
    Trong khung soạn prompt, nhấp vào nút theme — nút này hiển thị ô màu của theme hiện tại, hoặc bánh xe màu khi theme là **Automatic**. Menu có tiêu đề **Theme for new screens**.
  </Step>

  <Step title="Chọn một theme">
    Chọn **Automatic**, một theme của tổ chức (được liệt kê đầu tiên), hoặc một theme có sẵn: **Default**, **Blue**, **Grayscale**, **Green**, **Ice**, **Orange**, **Red**, **Rose**, **Violet** hoặc **Yellow**.
  </Step>

  <Step title="Chọn giao diện">
    Dưới **Appearance**, chọn **Light** hoặc **Dark**, hoặc **Automatic** để Flowstep tự quyết định cho từng màn hình dựa trên prompt — chẳng hạn "a dark dashboard" (một bảng điều khiển tối) sẽ ra màn hình tối.
  </Step>
</Steps>

<Note>
  Lựa chọn của bạn áp dụng cho các màn hình bạn tạo tiếp theo. Các màn hình đã có trên canvas giữ nguyên giao diện.
</Note>

## Để Flowstep thiết kế theme

Khi một tệp chưa có theme — tệp mới với theme để ở **Automatic** — Flowstep sẽ thiết kế một theme tùy chỉnh cùng với các màn hình đầu tiên mà nó tạo. Bạn sẽ thấy bước **Designing theme** trong cuộc trò chuyện khi nó đang làm việc.

Flowstep xây dựng theme từ:

* Các màu bạn nêu trong prompt
* Các màu trong [nguyên tắc thiết kế](/vi/design-guidelines) của bạn
* Màu thương hiệu từ tệp đính kèm và [liên kết bạn dán](/vi/design-references#paste-a-url)
* Sản phẩm và tâm trạng mà prompt mô tả, khi không có thông tin cụ thể hơn

Theme có một tên ngắn, một bảng màu đầy đủ cho cả chế độ sáng và tối, và một mức bo góc. Theme được lưu vào tổ chức dưới **Themes** trên Home, và tệp sẽ dùng nó cho mọi màn hình được tạo sau đó.

Khi một tệp đã có theme, Flowstep sẽ không tự thiết kế theme khác. Để có theme mới, hãy chọn lại **Automatic** trong menu theme — lần tạo tiếp theo sẽ thiết kế theme mới và tệp sẽ dùng theme đó. Nếu Flowstep không thể thiết kế theme, tệp sẽ dùng một theme có sẵn.

<Tip>
  Hãy nêu màu thương hiệu trong prompt đầu tiên, hoặc đặt chúng trong [nguyên tắc thiết kế](/vi/design-guidelines) trước khi tạo, và theme được tạo ra sẽ bắt đầu từ các màu đó.
</Tip>

## Thay đổi theme của một màn hình

Để tạo kiểu lại một màn hình mà không ảnh hưởng đến phần còn lại của tệp:

1. Chọn màn hình trên canvas.
2. Trong menu phía trên màn hình, nhấp vào nút **Theme**.
3. Chọn một theme của tổ chức hoặc một theme có sẵn, hoặc chuyển giữa **Light** và **Dark**.

Đổi theme sẽ vẽ lại màn hình ngay lập tức. Chuyển giữa **Light** và **Dark** sẽ yêu cầu AI tạo kiểu lại màn hình, giống như một [chỉnh sửa bằng AI](/vi/editing-designs). Menu không khả dụng khi một lần tạo đang chạy.

## Chỉnh sửa theme

Mở một theme từ mục **Themes** trên Home. Trình chỉnh sửa theme hiển thị bản xem trước trực tiếp của theme, với **Theme settings** ở bên phải. Dùng nút **Light** và **Dark** ở đầu để chuyển bản xem trước, và nhấp vào tên theme để đổi tên.

* **Colors** — mỗi nhóm màu có một ô màu cho chế độ sáng và một ô cho chế độ tối: **Primary**, **Secondary**, **Accent**, **Muted**, **Destructive**, **Background**, **Card**, **Popover**, **Border**, **Input**, **Ring**, **Charts** và **Sidebar**. Nhấp vào một ô màu để chỉnh sửa màu — ví dụ, màu nền và màu chữ của một nhóm — bằng bộ chọn màu hoặc giá trị hex.
* **Radius** — chọn một mức bo góc (**Square**, **Slight**, **Balanced**, **Soft** hoặc **Round**), hoặc chọn **Custom** và kéo **Base radius** để đặt giá trị riêng.

Chỉnh sửa của bạn được lưu dưới dạng bản nháp, nên các màn hình không thay đổi trong khi bạn làm việc. Khi đã sẵn sàng:

* Nhấp **Publish** để cập nhật mọi màn hình dùng theme. Flowstep xác nhận bằng thông báo "Published. Screens using this theme are updating." (Đã xuất bản. Các màn hình dùng theme này đang được cập nhật.)
* Nhấp **Reset changes** để hủy các thay đổi chưa xuất bản. Các màn hình dùng theme không bị ảnh hưởng.

Để xóa một theme, nhấp **Delete theme** ở cuối **Theme settings**, hoặc biểu tượng thùng rác bên cạnh theme trong danh sách **Themes** trên Home. Theme đã xóa sẽ không còn được đề xuất trong menu theme, nhưng các màn hình đang dùng nó vẫn giữ giao diện, nên không có gì trên canvas thay đổi.

<Note>
  Mọi thành viên trong tổ chức, trừ Guest (khách), đều có thể chỉnh sửa và xóa theme.
</Note>

## Liên kết màu sắc và bo góc với theme

Màu sắc và độ bo góc có thể trỏ tới một token của theme thay vì một giá trị cố định. Giá trị được liên kết sẽ theo theme của màn hình, nên khi theme thay đổi — một theme khác, một chỉnh sửa đã xuất bản, hoặc chuyển giữa sáng và tối — các màu và góc được liên kết cũng cập nhật theo.

**Colors** — trong bảng **Fill** hoặc **Border**, nhấp vào ô màu. Ở tab **Token**, tìm kiếm hoặc chọn token từ nhóm **Theme**, **Base** hoặc **Tailwind**. Dùng tab **Custom** để chọn một màu chính xác. Màu được liên kết sẽ hiển thị tên token trong bảng, và bạn vẫn có thể điều chỉnh độ mờ của nó.

**Corners** — trong bảng **Corners**, nhấp vào bản xem trước góc. Ở tab **Token**, chọn một mức (ví dụ `md` hoặc `lg`); ở tab **Custom**, nhập giá trị chính xác bằng pixel. Góc được liên kết sẽ hiển thị tên token, và khi thay đổi mức bo của theme, góc sẽ được bo lại theo.

Để chuyển một giá trị được liên kết thành giá trị cố định, nhấp **Detach from token**. Màu hoặc góc sẽ giữ nguyên giao diện hiện tại nhưng không còn theo theme nữa.

## Lưu ý

* **Màn hình giữ theme riêng** — mỗi màn hình ghi nhớ theme và giao diện của nó. Thay đổi theme của tệp chỉ ảnh hưởng đến các màn hình bạn tạo tiếp theo; dùng menu **Theme** trên từng màn hình để tạo kiểu lại các màn hình hiện có.
* **Chỉ phiên bản đã xuất bản** — màn hình hiển thị phiên bản đã xuất bản của theme. Bản nháp chỉ hiển thị trong trình chỉnh sửa theme cho đến khi bạn xuất bản.
* **Liên kết token được giữ nguyên khi chỉnh sửa** — các màu của theme được dùng trong bóng đổ, bộ lọc và gradient vẫn được liên kết với theme khi Flowstep chỉnh sửa hoặc tạo lại một màn hình.
* **Các mức bo góc không theo tỷ lệ** — các token góc `none` và `full` luôn vuông và tròn hoàn toàn, bất kể mức bo của theme là gì.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.