卡片樣式

Dreame 吸塵器卡片原生支援 Home Assistant 的預設主題。所有內部元件、選單和佈局會自動適應當前的 Home Assistant 主題。它可以動態無縫繼承 Light 和 Dark 模式的顏色，使在標準條件下不需要自定義樣式。

創建自定義 Home Assistant 主題來調整外觀涉及覆蓋下列外部 CSS 屬性。

地圖樣式

這些設置僅影響卡片的使用者介面元件。自定義吸塵器地圖內部的顏色，例如房間、路徑和牆壁，需要在 覆寫顏色 部分進行處理。

該卡片也使用了以 --dvc- 為前綴的內部設置。不建議直接覆蓋內部設置，因為它們的行為會在未來更新中改變。請改為針對下列外部 Home Assistant 主題設置進行操作。

card-mod

card-mod 插件在此卡片上已明確 禁用且不支援 以確保穩定性。必須使用自訂的 Home Assistant 主題來覆蓋本頁提供的 CSS 屬性。

如果特定的視覺變化無法通過主題實現，可透過 問題回報 頁面提交功能請求，說明所需更改及其理由。

背景與邊框

這些設置控制卡片的主要結構外觀。

變量	說明
--ha-card-background	定義卡片的主要背景顏色。
--secondary-background-color	用於次要表面、覆蓋背景和浮動選單。
--view-background	儀表板的基礎背景顏色。卡片在 panel 或 picture 模式下使用此顏色以達到無縫融合。
--ha-card-border-radius	定義卡片外角的圓角程度。
--ha-card-border-width	卡片邊框線的寬度。
--ha-card-border-color	卡片邊框的顏色。
--divider-color	內部列表分隔線和分隔符的顏色。
--ha-card-box-shadow	應用於主卡片容器的盒子陰影。
--ha-card-backdrop-filter	允許在卡片背景上添加背景濾鏡，例如 blur。

文字與排版

這些設置決定整個使用者介面中使用的文字顏色。

變量	說明
--primary-text-color	用於主要標題、狀態文字和數值的主要文字顏色。
--secondary-text-color	用於次要文字、詳細狀態和非活動標籤的顏色。
--disabled-text-color	用於當前不可用或被禁用文字的顏色。
--text-primary-color	直接置於主要顏色按鈕上的文字顏色。

圖示與強調色

這些設置管理互動元素、活動狀態和圖示的顏色。

變量	說明
--primary-color	用於活動元素、按鈕、載入動畫和已選擇標籤的主要強調色。
--light-primary-color	主要顏色的淺色版本，用於懸停狀態或活動按鈕背景。
--accent-color	用於介面中特定高亮的替代強調色。
--mdc-theme-on-primary	置於主要顏色背景上的文字或圖示顏色。
--paper-item-icon-color	狀態和選單圖示的預設顏色。
--paper-item-icon-active-color	當對應的狀態處於活動時，應用於圖示的顏色。

狀態與語意顏色

根據吸塵器的狀態和活動通知，卡片會動態改變顏色。

變量	說明
--success-color	用於成功操作或正面狀態，例如充滿電時。
--info-color	用於資訊性元素和標準警示。
--warning-color	用於警告警示、低電量狀態或小問題。
--error-color	用於嚴重故障、錯誤和不可通行的地圖物件。
--state-unavailable-color	表示吸塵器目前不可用或離線的顏色。

互動元素

專門針對 UI 元件如按鈕、滾動條和輸入框的主題設定。

變量	說明
--mdc-theme-surface	浮動選單、下拉選單和彈出卡片的表面顏色。
--mdc-button-raised-box-shadow	用於提升按鈕的陰影，以增加深度感。
--input-hover-line-color	當滑鼠懸停在特定輸入欄位時的底線顏色。
--input-dropdown-icon-color	下拉選單內文字光標/箭頭圖示的顏色。
--scrollbar-thumb-color	遙控器搖桿和滾動條的滑塊顏色。
--rgb-primary-color	主要顏色的 RGB 逗號分隔版本，用於應用透明度。
--rgb-primary-text-color	主要文字顏色的 RGB 逗號分隔版本，用於應用透明度。