استایل کارت

کارت جاروبرقی دریم به‌طور پیش‌فرض با تم پیش‌فرض Home Assistant سازگار است. تمام اجزاء داخلی، منوها و چیدمان‌ها به‌صورت خودکار با تم فعال Home Assistant هماهنگ می‌شوند. این کارت به‌صورت پویا هر دو حالت Light و Dark را به ارث می‌برد و انجام سبک دهی سفارشی در شرایط معمولی لازم نیست.

ایجاد یک تم سفارشی Home Assistant برای تغییر ظاهر شامل بازنویسی ویژگی‌های CSS خارجی ذکر شده در زیر است.

سبک‌دهی نقشه

این تنظیمات تنها بر اجزاء رابط کاربری کارت تأثیر می‌گذارند. سفارشی‌سازی رنگ‌های داخلی خود نقشه جاروبرقی، مانند اتاق‌ها، مسیرها و دیوارها، در بخش بازنویسی رنگ‌ها انجام می‌شود.

کارت همچنین از تنظیمات داخلی با پیشوند --dvc- استفاده می‌کند. بازنویسی مستقیم تنظیمات داخلی توصیه نمی‌شود، زیرا رفتار آن‌ها در به‌روزرسانی‌های آینده تغییر می‌کند. بهتر است به جای آن، تنظیمات خارجی تم Home Assistant که در زیر لیست شده‌اند را هدف قرار دهید.

card-mod

افزونه card-mod به طور صریح غیرفعال و پشتیبانی نشده در این کارت است تا پایداری تضمین شود. برای تغییر ویژگی‌های CSS ارائه شده در این صفحه، باید از تم‌های سفارشی Home Assistant استفاده شود.

اگر یک تغییر بصری خاص از طریق تم‌ها قابل دستیابی نباشد، می‌توان درخواست ویژگی شامل تغییرات مطلوب و دلایل آن را از طریق صفحه گزارش مشکل ارسال کرد.

پس‌زمینه‌ها و حاشیه‌ها

این تنظیمات ظاهر ساختاری اصلی کارت را کنترل می‌کنند.

متغیر	توضیحات
--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	رنگ جایگزین جزئیات که برای هایلایت‌های خاص در رابط کاربری استفاده می‌شود.
--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	رنگ نمادهای caret/arrow داخل منوهای کشویی.
--scrollbar-thumb-color	رنگی که برای دسته جوی‌استیک کنترل از راه دور و نوارهای پیمایش استفاده می‌شود.
--rgb-primary-color	نسخه RGB با جداکننده ویرگول از رنگ اصلی، برای اعمال شفافیت آلفا استفاده می‌شود.
--rgb-primary-text-color	نسخه RGB با جداکننده ویرگول از رنگ متن اصلی، برای اعمال شفافیت آلفا استفاده می‌شود.