कार्ड स्टाइलिंग

Dreame वैक्यूम कार्ड स्वाभाविक रूप से Home Assistant के डिफ़ॉल्ट थीम के अनुरूप है। सभी आंतरिक कंपोनेंट्स, मेनू और लेआउट सक्रिय Home Assistant थीम के अनुसार ऑटोमेटिकली अनुकूलित हो जाते हैं। यह सहज रूप से Light और Dark मोड रंगों को डायनामिकली इनहेरिट करता है, जिससे मानक परिस्थितियों में कस्टम स्टाइलिंग की आवश्यकता नहीं होती।

एस्थेटिक को कस्टमाइज़ करने के लिए एक कस्टम Home Assistant थीम बनाना नीचे सूचीबद्ध बाहरी CSS प्रॉपर्टीज़ को ओवरराइड करने में शामिल है।

मैप स्टाइलिंग

ये सेटिंग्स केवल कार्ड के UI कंपोनेंट्स को प्रभावित करती हैं। वैक्यूम मैप के आंतरिक रंगों को कस्टमाइज़ करना, जैसे कमरे, रास्ते और दीवारें, रंग ओवरराइड करें सेक्शन में संभाला जाता है।

कार्ड आंतरिक सेटिंग्स का उपयोग भी करता है जो --dvc- से प्रीफ़िक्स की गई होती हैं। आंतरिक सेटिंग्स को सीधे ओवरराइड करना अनुशंसित नहीं है, क्योंकि उनके व्यवहार भविष्य के अपडेट में बदल सकते हैं। इसके बजाय नीचे सूचीबद्ध बाहरी Home Assistant थीम सेटिंग्स को लक्षित करें।

card-mod

card-mod प्लगइन स्पष्ट रूप से अक्षम और समर्थित नहीं है इस कार्ड पर स्थिरता सुनिश्चित करने के लिए। कस्टम होम असिस्टेंट थीम का उपयोग करके इस पृष्ठ पर दिए गए 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-primary-text-color	मुख्य टेक्स्ट रंग का आरजीबी कॉमा-सेपरेटेड संस्करण, जो अल्फा ट्रांसपेरेंसी लागू करने के लिए उपयोग किया जाता है।