Chế độ tối
Khi thiết bị của người dùng được đặt ở chế độ tối, flow của bạn có thể thay đổi màu sắc và nền cho phù hợp — hiển thị gradient tối hơn hoặc hình ảnh phù hợp với chủ đề. Để thiết lập điều này, bạn sử dụng styles với một phiên bản riêng cho mỗi chủ đề — sáng và tối.
Mỗi phiên bản là một fill: màu đồng nhất, gradient, hình ảnh hoặc video. Một fill có thể kết hợp nhiều lớp: lớp màu bán trong suốt có thể tô màu cho hình ảnh bên dưới. Nếu không có sự khác biệt giữa hai theme, hai phiên bản có thể giống hệt nhau.
Tất cả những gì bạn cần làm là áp dụng style cho một phần tử, và flow sẽ tự động dùng đúng phiên bản tương ứng với chế độ của thiết bị.
Thêm theme tối
Mặc định, một flow mới sẽ có theme sáng. Để thêm theme tối:
- Mở panel Styles và chọn tab Colors.
- Nhấp vào biểu tượng để mở menu quản lý theme.
- Chọn Add dark theme. Biến thể tối sẽ được thêm vào mọi kiểu màu, với hai giá trị giống nhau. Bây giờ bạn có thể cấu hình theme tối.
Cấu hình chủ đề tối
Sau khi thêm chủ đề tối, mỗi mục trong danh sách Color Style sẽ có hai cài đặt riêng theo chủ đề: Light và Dark.
Để chỉnh sửa một style:
- Mở bảng Styles
- Chọn tab Colors.
- Nhấp vào một style. Nếu style cần thiết chưa tồn tại, hãy tạo một style mới.
- Giá trị Light và giá trị Dark được liệt kê lần lượt theo thứ tự. Mỗi giá trị có thể chứa nhiều layer. Nhấp vào ô màu để đặt layer theo loại fill của nó:
- Nhấp Save.
Giá trị Light và Dark có thể sử dụng các loại fill khác nhau.
Kết hợp các loại fill
Bạn có thể kết hợp các loại fill giữa hai phiên bản của một style:
- Màu solid, gradient và ảnh: Kết hợp tùy ý. Ví dụ: background có thể là màu solid ở chế độ sáng và ảnh ở chế độ tối.
- Video: Nếu phiên bản sáng có video thì phiên bản tối cũng phải có video — và ngược lại. Hai video có thể khác nhau.
Áp dụng theme cho một phần tử
Nếu thuộc tính của một phần tử không sử dụng color style, dark theme sẽ không áp dụng cho nó. Các phần tử Image và Video không có color style: để thay đổi file của chúng trong dark mode, thêm một file dark.
Để một phần tử theo theme, hãy nhấp vào ô màu của lớp fill, màu văn bản, màu border, hoặc màu icon. Thay thế giá trị tĩnh bằng style bằng cách nhấp vào tab Styles và chọn mục style. Nếu chưa 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.
Nền màn hình cũng tuân theo theme theo cách tương tự: áp dụng style cho fill layer của nó trong Screen settings. Để biết các bước thực hiện, xem Hiển thị nền khác trong chế độ tối.
Để áp dụng style cho nhiều phần tử trên một màn hình, hãy nhờ AI Editor, ví dụ: Apply the Card background style to all cards.
Xem trước flow ở chế độ tối
Nhấp vào các biểu tượng chủ đề bên dưới canvas để chuyển đổi giữa Dark mode và Light mode.
Các biểu tượng này chỉ xuất hiện nếu flow có chủ đề tối, hoặc có phần tử Hình ảnh hay Video với tệp tối.
Hiển thị hình ảnh hoặc video khác trong chế độ tối
Một phần tử Image hoặc Video sẽ hiển thị cùng một file ở cả hai chế độ cho đến khi bạn thêm file dành riêng cho chế độ tối. Để hiển thị file khác trong chế độ tối:
- Chọn phần tử Image hoặc Video.
- Trong mục Image hoặc Video trên bảng thuộc tính, chọn tab Dark. Canvas sẽ chuyển sang bản xem trước chế độ tối.
- Tải file lên cho chế độ tối.
Để chỉnh sửa tệp cho chế độ sáng, hãy chọn tab Light.
Đặt chủ đề thanh trạng thái
Các biểu tượng giờ và pin trên thanh trạng thái có thể xung đột với màu sắc của flow trong một số chế độ. Để các biểu tượng luôn dễ đọc, hãy đặt Status bar theme trong Screen settings khi công tắc Status bar đang bật:
- : Biểu tượng màu trắng, dành cho nền tối ở cả hai chế độ.
- : Biểu tượng màu đen, dành cho nền sáng ở cả hai chế độ.
- : Biểu tượng theo cài đặt thiết bị, dành cho nền sáng ở một chế độ và tối ở chế độ còn lại.
Xóa theme
- Mở panel Styles và chọn tab Colors.
- Nhấn vào biểu tượng cài đặt để mở menu quản lý theme.
- Chọn một mục trong menu:
- Delete Dark theme: Giữ lại phiên bản sáng của mọi color style cho cả hai chế độ.
- Delete Light theme: Giữ lại phiên bản tối của mọi color style cho cả hai chế độ.