Kiểu thẻ

Thẻ Dreame Vacuum tự nhiên tuân thủ chủ đề mặc định của Home Assistant. Tất cả các thành phần nội bộ, menu và bố cục tự động thích ứng với chủ đề Home Assistant đang hoạt động. Nó kế thừa liền mạch cả màu chế độ Sáng và Tối một cách động, làm cho việc tùy chỉnh kiểu dáng trở nên không cần thiết trong điều kiện tiêu chuẩn.

Tạo một chủ đề Home Assistant tùy chỉnh để thay đổi thẩm mỹ liên quan đến việc ghi đè các thuộc tính CSS bên ngoài được liệt kê dưới đây.

Tùy chỉnh Bản đồ

Các cài đặt này chỉ ảnh hưởng đến các thành phần giao diện của thẻ. Việc tùy chỉnh màu sắc bên trong bản đồ của máy hút bụi, chẳng hạn như phòng, đường đi và tường, được xử lý trong phần Ghi đè Màu sắc.

Thẻ cũng sử dụng các cài đặt nội bộ có tiền tố --dvc-. Việc ghi đè trực tiếp các cài đặt nội bộ không được khuyến nghị, vì hành vi của chúng sẽ thay đổi trong các bản cập nhật tương lai. Thay vào đó, hãy nhắm vào các cài đặt chủ đề Home Assistant bên ngoài được liệt kê dưới đây.

card-mod

Plugin card-mod rõ ràng bị vô hiệu hóa và không được hỗ trợ trên thẻ này để đảm bảo độ ổn định. Các chủ đề Home Assistant tùy chỉnh phải được sử dụng để ghi đè các thuộc tính CSS được cung cấp trên trang này.

Nếu một thay đổi trực quan cụ thể không thể thực hiện thông qua các chủ đề, một yêu cầu tính năng giải thích các thay đổi mong muốn và lý do phía sau chúng có thể được gửi qua trang Báo cáo sự cố.

Nền & Viền

Các cài đặt này kiểm soát giao diện cấu trúc chính của thẻ.

Biến	Mô tả
--ha-card-background	Xác định màu nền chính của thẻ.
--secondary-background-color	Sử dụng cho bề mặt phụ, nền phủ và menu nổi.
--view-background	Màu nền cơ bản của bảng điều khiển. Thẻ sử dụng màu này khi ở chế độ panel hoặc picture để hòa trộn mượt mà.
--ha-card-border-radius	Xác định độ bo tròn của các góc ngoài của thẻ.
--ha-card-border-width	Chiều rộng của đường viền thẻ.
--ha-card-border-color	Màu của viền thẻ.
--divider-color	Màu của các đường phân cách và ngăn danh sách bên trong.
--ha-card-box-shadow	Hiệu ứng bóng hộp được áp dụng cho container chính của thẻ.
--ha-card-backdrop-filter	Cho phép thêm các bộ lọc nền, chẳng hạn như blur, vào nền thẻ.

Văn bản & Kiểu chữ

Các thiết lập này quyết định màu sắc văn bản được sử dụng trên toàn bộ giao diện người dùng.

Biến	Mô tả
--primary-text-color	Màu văn bản chính được sử dụng cho tiêu đề chính, văn bản trạng thái và giá trị.
--secondary-text-color	Được sử dụng cho văn bản phụ, trạng thái chi tiết và nhãn tab không hoạt động.
--disabled-text-color	Màu được sử dụng cho văn bản hiện không có sẵn hoặc bị vô hiệu hóa.
--text-primary-color	Màu của văn bản nằm trực tiếp trên các nút màu chính.

Biểu tượng & Điểm nhấn

Các thiết lập này quản lý màu sắc của các yếu tố tương tác, trạng thái hoạt động và biểu tượng.

Biến	Mô tả
--primary-color	Màu điểm nhấn chính cho các yếu tố hoạt động, nút, hoạt ảnh tải và các tab được chọn.
--light-primary-color	Phiên bản màu nhạt hơn của màu chính, được sử dụng cho trạng thái di chuột hoặc nền nút đang hoạt động.
--accent-color	Màu điểm nhấn thay thế được sử dụng cho các điểm nổi bật cụ thể trong giao diện người dùng.
--mdc-theme-on-primary	Màu của văn bản hoặc biểu tượng đặt trên nền màu chính.
--paper-item-icon-color	Màu mặc định cho biểu tượng trạng thái và menu.
--paper-item-icon-active-color	Màu được áp dụng cho các biểu tượng khi trạng thái tương ứng của chúng đang hoạt động.

Màu trạng thái & ngữ nghĩa

Thẻ thay đổi màu động dựa trên trạng thái của máy hút bụi và các thông báo đang hoạt động.

Biến	Mô tả
--success-color	Được sử dụng cho các thao tác thành công hoặc trạng thái tích cực, chẳng hạn như khi pin đã đầy.
--info-color	Được sử dụng cho các yếu tố thông tin và cảnh báo tiêu chuẩn.
--warning-color	Được sử dụng cho các cảnh báo, trạng thái pin yếu hoặc các vấn đề nhỏ.
--error-color	Được sử dụng cho các lỗi nghiêm trọng, lỗi và các đối tượng bản đồ không thể đi qua.
--state-unavailable-color	Màu biểu thị máy hút bụi hiện không khả dụng hoặc ngoại tuyến.

Các yếu tố tương tác

Cài đặt chủ đề nhắm mục tiêu cụ thể vào các thành phần giao diện người dùng như nút bấm, thanh cuộn và ô nhập liệu.

Biến	Mô tả
--mdc-theme-surface	Màu bề mặt cho các menu nổi, menu thả xuống và thẻ pop-up.
--mdc-button-raised-box-shadow	Bóng được áp dụng cho các nút nâng để tạo chiều sâu.
--input-hover-line-color	Màu của gạch chân khi di chuột qua các ô nhập liệu cụ thể.
--input-dropdown-icon-color	Màu của biểu tượng con trỏ/mũi tên bên trong menu thả xuống.
--scrollbar-thumb-color	Màu được sử dụng cho núm điều khiển của cần điều khiển từ xa và thanh cuộn.
--rgb-primary-color	Phiên bản màu chính theo định dạng RGB cách nhau bằng dấu phẩy, dùng để áp dụng độ trong suốt alpha.
--rgb-primary-text-color	Phiên bản màu chữ chính theo định dạng RGB cách nhau bằng dấu phẩy, dùng để áp dụng độ trong suốt alpha.