Gaya Kad

Kad Dreame Vacuum mematuhi tema lalai Home Assistant secara asli. Semua komponen dalaman, menu dan susun atur secara automatik menyesuaikan diri dengan tema Home Assistant yang aktif. Ia mewarisi secara lancar kedua-dua warna mod Cerah dan Gelap secara dinamik, menjadikan penyesuaian gaya tersuai tidak diperlukan di bawah keadaan standard.

Membuat tema Home Assistant tersuai untuk menyesuaikan estetika melibatkan penggantian sifat CSS luaran yang disenaraikan di bawah.

Gaya Peta

Tetapan ini hanya menjejaskan komponen UI kad. Penyesuaian warna dalaman peta vakum itu sendiri, seperti bilik, laluan dan dinding, dikendalikan dalam bahagian Gantikan Warna.

Kad ini juga menggunakan tetapan dalaman yang diawali dengan --dvc-. Menggantikan tetapan dalaman secara langsung tidak digalakkan, kerana tingkah laku mereka boleh berubah dalam kemas kini akan datang. Sasarkan tetapan tema Home Assistant luaran yang disenaraikan di bawah sebaliknya.

card-mod

Plugin card-mod secara jelas dinyahdayakan dan tidak disokong pada kad ini untuk memastikan kestabilan. Tema Home Assistant tersuai mesti digunakan untuk menggantikan ciri CSS yang disediakan di halaman ini.

Jika perubahan visual tertentu tidak dapat dicapai melalui tema, permintaan ciri yang menjelaskan perubahan yang dikehendaki dan alasan di sebaliknya boleh dihantar melalui halaman Laporan Isu.

Latar Belakang & Sempadan

Tetapan ini mengawal penampilan struktur utama kad.

Pembolehubah	Penerangan
--ha-card-background	Menentukan warna latar belakang utama kad.
--secondary-background-color	Digunakan untuk permukaan sekunder, latar belakang overlay dan menu terapung.
--view-background	Warna latar belakang asas papan pemuka. Kad menggunakan ini apabila dalam mod panel atau picture untuk menyatu dengan lancar.
--ha-card-border-radius	Menentukan bulatan sudut luar kad.
--ha-card-border-width	Lebar garis sempadan kad.
--ha-card-border-color	Warna sempadan kad.
--divider-color	Warna pemisah dan pembahagi senarai dalaman.
--ha-card-box-shadow	Bayangan kotak yang diterapkan pada kontena kad utama.
--ha-card-backdrop-filter	Membolehkan menambah penapis latar belakang, seperti blur, ke latar belakang kad.

Teks & Tipografi

Tetapan ini menentukan warna teks yang digunakan di seluruh antara muka pengguna.

Pembolehubah	Penerangan
--primary-text-color	Warna teks utama yang digunakan untuk tajuk utama, teks keadaan dan nilai.
--secondary-text-color	Digunakan untuk teks sekunder, status terperinci dan label tab tidak aktif.
--disabled-text-color	Warna digunakan untuk teks yang sedang tidak tersedia atau dilumpuhkan.
--text-primary-color	Warna teks yang terletak terus di atas butang berwarna utama.

Ikon & Aksen

Tetapan ini mengurus pewarnaan elemen interaktif, keadaan aktif dan ikon.

Pembolehubah	Penerangan
--primary-color	Warna aksen utama untuk elemen aktif, butang, animasi pemuat dan tab yang dipilih.
--light-primary-color	Versi lebih terang bagi warna utama, digunakan untuk keadaan hover atau latar butang aktif.
--accent-color	Warna aksen alternatif digunakan untuk sorotan tertentu dalam UI.
--mdc-theme-on-primary	Warna teks atau ikon yang diletakkan di atas latar berwarna utama.
--paper-item-icon-color	Warna lalai untuk ikon keadaan dan menu.
--paper-item-icon-active-color	Warna yang diterapkan pada ikon apabila keadaan yang sepadan adalah aktif.

Warna Status & Semantik

Kad ini berubah warna secara dinamik berdasarkan keadaan vakum dan pemberitahuan yang aktif.

Pembolehubah	Penerangan
--success-color	Digunakan untuk operasi berjaya atau keadaan positif, seperti bateri penuh.
--info-color	Digunakan untuk elemen maklumat dan amaran standard.
--warning-color	Digunakan untuk amaran peringatan, keadaan bateri rendah, atau isu kecil.
--error-color	Digunakan untuk kesilapan kritikal, ralat dan objek peta yang tidak boleh dilalui.
--state-unavailable-color	Warna yang menunjukkan vakum sedang tidak tersedia atau luar talian.

Elemen Interaktif

Tetapan tema yang khusus untuk komponen UI seperti butang, bar skrol dan input.

Pembolehubah	Penerangan
--mdc-theme-surface	Warna permukaan untuk menu terapung, dropdown dan kad pop timbul.
--mdc-button-raised-box-shadow	Bayangan yang diterapkan pada butang timbul untuk memberikan kedalaman.
--input-hover-line-color	Warna garis bawah apabila melayari ke medan input tertentu.
--input-dropdown-icon-color	Warna ikon kursor/anah dalam menu dropdown.
--scrollbar-thumb-color	Warna yang digunakan untuk tombol joystick alat kawalan jauh dan bar skrol.
--rgb-primary-color	Versi RGB yang dipisahkan dengan koma bagi warna utama, digunakan untuk menerapkan ketelusan alpha.
--rgb-primary-text-color	Versi RGB yang dipisahkan dengan koma bagi warna teks utama, digunakan untuk menerapkan ketelusan alpha.