Gaya Kartu

Kartu Vacuum Dreame secara asli mematuhi tema default Home Assistant. Semua komponen internal, menu, dan tata letak secara otomatis menyesuaikan dengan tema Home Assistant yang aktif. Ia secara mulus mewarisi warna mode Ringan dan Gelap secara dinamis, sehingga styling khusus tidak diperlukan dalam kondisi standar.

Membuat tema Home Assistant khusus untuk menyesuaikan estetika melibatkan penggantian properti CSS eksternal yang tercantum di bawah ini.

Styling Peta

Pengaturan ini hanya mempengaruhi komponen UI dari kartu. Menyesuaikan warna internal peta vacuum itu sendiri, seperti ruangan, jalur, dan dinding, ditangani di bagian Mengganti Warna.

Kartu ini juga menggunakan pengaturan internal yang diawali dengan --dvc-. Mengganti pengaturan internal secara langsung tidak disarankan, karena perilakunya dapat berubah pada pembaruan di masa depan. Sebaiknya targetkan pengaturan tema Home Assistant eksternal yang tercantum di bawah ini.

card-mod

Plugin card-mod secara eksplisit dinonaktifkan dan tidak didukung pada kartu ini untuk memastikan kestabilan. Tema Home Assistant kustom harus digunakan untuk menimpa properti CSS yang disediakan di halaman ini.

Jika perubahan visual tertentu tidak dapat dicapai melalui tema, permintaan fitur yang menjelaskan perubahan yang diinginkan dan alasan di baliknya dapat diajukan melalui halaman Pelaporan Masalah.

Latar Belakang & Batas

Pengaturan ini mengontrol tampilan struktural utama dari kartu.

Variabel	Deskripsi
--ha-card-background	Menentukan warna latar utama dari kartu.
--secondary-background-color	Digunakan untuk permukaan sekunder, latar overlay, dan menu mengambang.
--view-background	Warna latar belakang dasar dashboard. Kartu menggunakan ini ketika dalam mode panel atau picture agar menyatu dengan mulus.
--ha-card-border-radius	Menentukan kebulatan sudut luar kartu.
--ha-card-border-width	Lebar garis batas kartu.
--ha-card-border-color	Warna batas kartu.
--divider-color	Warna pemisah dan pemisah daftar internal.
--ha-card-box-shadow	Bayangan kotak yang diterapkan ke wadah utama kartu.
--ha-card-backdrop-filter	Memungkinkan menambahkan filter latar belakang, seperti blur, ke latar belakang kartu.

Teks & Tipografi

Pengaturan ini menentukan warna teks yang digunakan di seluruh antarmuka pengguna.

Variabel	Deskripsi
--primary-text-color	Warna teks utama yang digunakan untuk judul utama, teks status, dan nilai.
--secondary-text-color	Digunakan untuk teks sekunder, status rinci, dan label tab yang tidak aktif.
--disabled-text-color	Warna yang digunakan untuk teks yang saat ini tidak tersedia atau dinonaktifkan.
--text-primary-color	Warna teks yang langsung berada di atas tombol berwarna utama.

Ikon & Aksen

Pengaturan ini mengatur pewarnaan elemen interaktif, status aktif, dan ikon.

Variabel	Deskripsi
--primary-color	Warna aksen utama untuk elemen aktif, tombol, animasi pemuat, dan tab yang dipilih.
--light-primary-color	Versi lebih terang dari warna utama, digunakan untuk status hover atau latar belakang tombol aktif.
--accent-color	Warna aksen alternatif yang digunakan untuk sorotan tertentu dalam antarmuka pengguna.
--mdc-theme-on-primary	Warna teks atau ikon yang ditempatkan di atas latar belakang berwarna utama.
--paper-item-icon-color	Warna default untuk ikon status dan menu.
--paper-item-icon-active-color	Warna yang diterapkan pada ikon ketika status terkait mereka aktif.

Warna Status & Semantik

Kartu secara dinamis mengubah warna berdasarkan status vacuum dan notifikasi aktif.

Variabel	Deskripsi
--success-color	Digunakan untuk operasi yang berhasil atau status positif, seperti baterai penuh.
--info-color	Digunakan untuk elemen informasional dan peringatan standar.
--warning-color	Digunakan untuk peringatan, status baterai rendah, atau masalah kecil.
--error-color	Digunakan untuk kesalahan kritis, error dan objek peta yang tidak dapat dilalui.
--state-unavailable-color	Warna yang menunjukkan vacuum saat ini tidak tersedia atau offline.

Elemen Interaktif

Pengaturan tema yang secara spesifik menargetkan komponen UI seperti tombol, scrollbar dan input.

Variabel	Deskripsi
--mdc-theme-surface	Warna permukaan untuk menu mengambang, dropdown, dan kartu popup.
--mdc-button-raised-box-shadow	Bayangan yang diterapkan pada tombol yang ditinggikan untuk memberikan kesan kedalaman.
--input-hover-line-color	Warna garis bawah saat mengarahkan kursor pada bidang input tertentu.
--input-dropdown-icon-color	Warna ikon kursor/panah di dalam menu dropdown.
--scrollbar-thumb-color	Warna yang digunakan untuk jempol joystick remote control dan scrollbar.
--rgb-primary-color	Versi RGB yang dipisahkan dengan koma dari warna primer, digunakan untuk menerapkan transparansi alpha.
--rgb-primary-text-color	Versi RGB yang dipisahkan dengan koma dari warna teks utama, digunakan untuk menerapkan transparansi alpha.