تنسيق البطاقات

بطاقة Dreame Vacuum تتوافق بشكل أصلي مع سمة Home Assistant الافتراضية. جميع المكونات الداخلية والقوائم والتخطيطات تتكيف تلقائيًا مع السمة النشطة لـ Home Assistant. فإنها ترث بسلاسة ألوان الوضع الفاتح والداكن ديناميكيًا، مما يجعل التخصيص اليدوي للتصميم غير ضروري في الظروف العادية.

إنشاء سمة 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	يحدد مدى تدوير زوايا البطاقة الخارجية.
--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، تُستخدم لتطبيق الشفافية ألفا.