การจัดรูปแบบบัตร

การ์ด Dreame Vacuum ปฏิบัติตามธีมเริ่มต้นของ Home Assistant โดยเนื้อแท้ ส่วนประกอบภายใน เมนู และการจัดวางทั้งหมดจะปรับตามธีมของ Home Assistant ที่ใช้งานอยู่โดยอัตโนมัติ มันสืบทอดสีโหมด Light และ Dark อย่างราบรื่น ทำให้ไม่จำเป็นต้องปรับแต่งสไตล์เองภายใต้เงื่อนไขมาตรฐาน

การสร้างธีม Home Assistant แบบกำหนดเองเพื่อปรับแต่งความสวยงามเกี่ยวข้องกับการเขียนทับคุณสมบัติ CSS ภายนอกที่ระบุด้านล่าง

การปรับแต่งแผนที่

การตั้งค่าเหล่านี้มีผลเฉพาะกับส่วนประกอบ UI ของการ์ด การปรับแต่งสีภายในของแผนที่เครื่องดูดฝุ่นเอง เช่น ห้อง เส้นทาง และผนัง จะจัดการในส่วน การเขียนทับสี

การ์ดยังใช้การตั้งค่าภายในที่มีคำนำหน้า --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	สีเน้นทางเลือกที่ใช้สำหรับไฮไลท์เฉพาะใน 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 แยกด้วยเครื่องหมายจุลภาคของสีข้อความหลัก ใช้เพื่อปรับความโปร่งใสแบบอัลฟา