עיצוב כרטיסים

כרטיס השואב Dreame עומד כברירת מחדל בנושא של Home Assistant. כל הרכיבים הפנימיים, התפריטים והפריסות מסתגלים אוטומטית לנושא הפעיל של Home Assistant. הוא יורש בצורה חלקה את הצבעים של מצב Light ומצב Dark באופן דינמי, מה שהופך את עיצוב מותאם אישית למיותר בתנאים רגילים.

יצירת נושא מותאם אישית של Home Assistant כדי להתאים את המראה כרוך בהחלפת מאפייני CSS חיצוניים המפורטים למטה.

עיצוב מפה

הגדרות אלו משפיעות רק על רכיבי הממשק של הכרטיס. התאמת הצבעים הפנימיים של מפה השואב עצמה, כגון חדרים, מסלולים וקירות, מתבצעת בחלק החלפת צבעים.

הכרטיס גם משתמש בהגדרות פנימיות שמתחילות ב---dvc-. לא מומלץ להחליף הגדרות פנימיות ישירות, מכיוון שהתנהגותן משתנה בעדכונים עתידיים. יש לכוון את ההגדרות החיצוניות של נושא Home Assistant המפורטות למטה במקום זאת.

card-mod

התוסף card-mod באופן מפורש מושבת ואינו נתמך בכרטיס זה כדי להבטיח יציבות. יש להשתמש בנושאים מותאמים אישית של Home Assistant כדי לעקוף את מאפייני ה-CSS המסופקים בעמוד זה.

אם שינוי חזותי ספציפי אינו ניתן להשגה דרך נושאים, ניתן להגיש בקשת תכונה שמסבירה את השינויים הרצויים ואת ההסבר מאחוריהם דרך עמוד דיווח על בעיות.

רקעים וגבולות

הגדרות אלו שולטות במראה המבני הראשי של הכרטיס.

משתנה	תיאור
--ha-card-background	מגדיר את צבע הרקע הראשי של הכרטיס.
--secondary-background-color	משמש למשטחים משניים, רקע שכבות ותפריטים צפים.
--view-background	צבע הרקע הבסיסי של לוח הבקרה. הכרטיס משתמש בו במצב panel או picture כדי להשתלב בצורה חלקה.
--ha-card-border-radius	מגדיר את עRoundedness של הפינות החיצוניות של הכרטיס.
--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	צבע אקסנט אלטרנטיבי המשמש להדגשים מסוימים בממשק המשתמש.
--mdc-theme-on-primary	צבע של טקסט או אייקונים הממוקמים מעל רקע בצבע ראשי.
--paper-item-icon-color	הצבע המוגדר כברירת מחדל לאייקונים של מצב ותפריט.
--paper-item-icon-active-color	הצבע שיוחל על האייקונים כאשר המצב המתאים שלהם פעיל.

צבעי סטטוס וסמנטיקה

הכרטיס משנה צבע בצורה דינמית בהתאם למצב השואב והודעות פעילות.

משתנה	תיאור
--success-color	משמש לפעולות מוצלחות או מצבים חיוביים, כמו טעינה מלאה.
--info-color	משמש לאלמנטים מידעיים והתראות סטנדרטיות.
--warning-color	משמש להתראות אזהרה, מצבי סוללה נמוכה או בעיות קטנות.
--error-color	משמש לתקלות קריטיות, שגיאות ואובייקטים בלתי עוברים במפה.
--state-unavailable-color	הצבע שמצביע שהשואב כרגע אינו זמין או לא מקוון.

אלמנטים אינטראקטיביים

הגדרות נושא המתמקדות במיוחד ברכיבי ממשק משתמש כמו כפתורים, פסי גלילה ושדות קלט.

משתנה	תיאור
--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 מופרדת בפסיקים של צבע הטקסט הראשי, המשמשת ליישום שקיפות אלפא.