Skip to main content
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.
1

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

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

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

​
Để 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ế 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
  • 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.
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ế trước khi tạo, và theme được tạo ra sẽ bắt đầu từ các màu đó.

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

​
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ì.