カードのスタイリング

Dreame Vacuum Card は、Home Assistant のデフォルトテーマにネイティブで対応しています。すべての内部コンポーネント、メニュー、レイアウトは、アクティブな Home Assistant テーマに自動的に適応します。ライト モードおよび ダーク モードのカラーを動的にシームレスに継承するため、標準条件下ではカスタムスタイリングは不要です。

美観をカスタマイズするためにカスタム Home Assistant テーマを作成する場合は、以下に記載されている外部 CSS プロパティを上書きします。

マップのスタイリング

これらの設定はカードの UI コンポーネントにのみ影響します。部屋、経路、壁などの掃除機マップ自体の内部カラーのカスタマイズは、カラーの上書き セクションで行います。

カードは --dvc- で始まる内部設定も使用します。内部設定を直接上書きすることは推奨されません。将来的なアップデートで挙動が変わる可能性があるためです。代わりに、以下に記載されている外部 Home Assistant テーマ設定を対象にしてください。

card-mod

card-modプラグインは、このカードの安定性を確保するために明示的に無効化されており、サポートされていません。CSSプロパティを上書きするには、カスタムHome Assistantテーマを使用する必要があります。

特定の視覚的な変更がテーマで実現できない場合、希望する変更とその理由を説明した機能リクエストを問題報告ページを通じて提出できます。

背景と境界線

これらの設定はカードの主な構造的外観を制御します。

変数	説明
--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	UIの特定のハイライトに使用される代替アクセントカラー。
--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カンマ区切りバージョン。