تنفيذ المظهر الداكن

تجربة طريقة ComposeAllowed
Jetpack Compose هي مجموعة أدوات واجهة المستخدم التي ننصح بها لنظام التشغيل Android. تعرَّف على كيفية التعامل معها في Compose.
نظام الألوان - التصميم المتعدد الأبعاد 3 →

الشكل 1. المظهر الداكن.

يتوفّر "المظهر الداكن" في نظام التشغيل Android 10 (المستوى 29 من واجهة برمجة التطبيقات) والإصدارات الأحدث. له الفوائد التالية:

  • يقلل هذا الخيار من استهلاك الطاقة بمقدار كبير حسب تكنولوجيا شاشة الجهاز.
  • لتحسين الرؤية للمستخدمين الذين يعانون من ضعف في النظر وأولئك الذين يعانون من حساسية للضوء الساطع.
  • يعمل على تسهيل استخدام الجهاز في بيئة ذات إضاءة منخفضة.

ينطبق "المظهر الداكن" على واجهة مستخدم نظام Android والتطبيقات التي تعمل على الجهاز.

هناك ثلاث طُرق لتفعيل المظهر الداكن في نظام التشغيل Android 10 والإصدارات الأحدث:

  • يمكنك استخدام إعدادات النظام من خلال الانتقال إلى الإعدادات > العرض > المظهر لتفعيل المظهر الداكن.
  • استخدِم مربّع "الإعدادات السريعة" لتبديل المظاهر من قائمة الإشعارات عند تفعيلها.
  • فعِّل وضع "توفير شحن البطارية" على أجهزة Pixel لتفعيل المظهر الداكن في الوقت نفسه. قد لا تتوافق الأجهزة الأخرى مع هذا السلوك.

للحصول على تعليمات حول تطبيق مظهر داكن على محتوى مستند إلى الويب باستخدام مكوّن WebView، يمكنك الاطّلاع على تعتيم محتوى الويب في WebView.

إتاحة المظهر الداكن في تطبيقك

لإتاحة المظهر الداكن، يمكنك ضبط مظهر تطبيقك الذي يتوفّر عادةً في res/values/styles.xml ليتم اكتسابه من مظهر DayNight:

<style name="AppTheme" parent="Theme.AppCompat.DayNight">

يمكنك أيضًا استخدام المظهر الداكن لمكونات المواد:

<style name="AppTheme" parent="Theme.MaterialComponents.DayNight">

يربط ذلك الموضوع الرئيسي للتطبيق بإشارات الوضع الليلي التي يتحكّم فيها النظام ويمنح التطبيق مظهرًا داكنًا تلقائيًا عند تفعيله.

المظاهر والأنماط

تجنَّب استخدام الألوان أو الرموز الثابتة المخصّصة للاستخدام مع مظاهر فاتحة. استخدِم سمات المظهر أو الموارد المؤهلة ليلاً بدلاً من ذلك.

السمتان الأكثر أهمية للمظهر الداكن هو الأكثر أهمية:

  • ?android:attr/textColorPrimary: لون نص للأغراض العامة إنه أسود تقريبًا في مظهر فاتح وشبه أبيض في المظاهر الداكنة. يحتوي على حالة غير مفعّلة.
  • ?attr/colorControlNormal: لون رمز للأغراض العامة يحتوي على حالة غير مفعّلة.

ننصح باستخدام مكوّنات التصميم المتعدد الأبعاد، لأنّ نظام تصاميم الألوان الخاص به، مثل سمتَي المظهر ?attr/colorSurface و?attr/colorOnSurface، يوفّر سهولة الوصول إلى الألوان المناسبة. يمكنك تخصيص هذه السمات في المظهر.

تغيير المظاهر داخل التطبيق

يمكنك السماح للمستخدمين بتغيير مظهر التطبيق أثناء تشغيله. وفيما يلي الخيارات الموصى بها:

  • فاتح
  • داكن
  • الإعداد التلقائي للنظام (الخيار التلقائي الموصى به)

ترتبط هذه الخيارات مباشرةً بوضع AppCompat.DayNight:

لتبديل المظهر، اتّبِع الخطوات التالية:

  • في المستوى 31 من واجهة برمجة التطبيقات والمستويات الأعلى، يمكنك استخدام UiModeManager#setApplicationNightMode لإعلام النظام بالمظهر الذي يستخدمه تطبيقك. يتيح ذلك للنظام مطابقة الموضوع أثناء شاشة البداية.

  • في المستوى 30 من واجهة برمجة التطبيقات والمستويات الأدنى، استخدِم AppCompatDelegate.setDefaultNightMode() لتبديل المظهر.

فرض المظهر الداكن

يوفّر Android 10 ميزة Force Dark، وهي ميزة تتيح للمطوّرين تنفيذ مظهر داكن بسرعة بدون ضبط المظهر DayNight بشكل صريح.

تحلِّل ميزة "فرض داكن" كل طريقة عرض لتطبيقك الذي يتناول المظهر الفاتح وتطبّق المظهر الداكن تلقائيًا قبل رسم التطبيق على الشاشة. يمكنك استخدام مزيج من فرض التأثير الداكن والتنفيذ المحلي لتقليل الوقت اللازم لاستخدام المظهر الداكن.

يجب أن توافق التطبيقات على "فرض المظهر الداكن" من خلال ضبط android:forceDarkAllowed="true" في مظهر النشاط. يتم ضبط هذه السمة على كل مظاهر الإضاءة المقدمة من النظام وAndroidX، مثل Theme.Material.Light. عند استخدام "فرض المظهر الداكن"، اختبِر تطبيقك بدقة واستبعِد المشاهدات حسب الحاجة.

إذا كان تطبيقك يستخدم مظهرًا داكنًا، مثل Theme.Material)، لن يتم تطبيق فرض المظهر الداكن. وبالمثل، إذا كان مظهر تطبيقك مكتسبًا من مظهر DayNight، لن يتم تطبيق "فرض المظهر الداكن" بسبب التبديل التلقائي للمظاهر.

إيقاف "فرض المظهر الداكن" في طريقة عرض

يمكن التحكّم في "فرض المظهر الداكن" في طرق عرض محدّدة باستخدام سمة التنسيق android:forceDarkAllowed أو من خلال setForceDarkAllowed().

محتوى على الويب

لمزيد من المعلومات عن استخدام المظاهر الداكنة في المحتوى المستنِد إلى الويب، يمكنك الاطّلاع على تعتيم محتوى الويب في WebView. للاطّلاع على مثال للمظهر الداكن المطبّق على مكوّن WebView، يمكنك الاطّلاع على العرض التوضيحي لميزة WebView على GitHub.

أفضل الممارسات

توفّر الأقسام التالية أفضل الممارسات لاستخدام المظاهر الداكنة.

الإشعارات والتطبيقات المصغَّرة

بالنسبة إلى مساحات عرض واجهة المستخدم التي تعرضها على الجهاز ولكن لا تتحكّم بها بشكل مباشر، عليك التأكّد من أنّ أي طرق عرض تستخدمها تعكس مظهر التطبيق المضيف. هناك مثالان هما الإشعارات وأدوات مشغّل التطبيقات.

الإشعارات

استخدِم نماذج الإشعارات التي يوفّرها النظام، مثل MessagingStyle. وهذا يعني أن النظام مسؤول عن تطبيق نمط العرض الصحيح.

الأدوات وطُرق عرض الإشعارات المخصّصة

بالنسبة إلى تطبيقات مشغّل التطبيقات المصغّرة، أو إذا كان تطبيقك يستخدم طرق عرض مخصّصة للإشعارات، يمكنك اختبار المحتوى على كل من المظهرَين الفاتح والداكن.

تشمل المخاطر الشائعة التي يجب الانتباه إليها ما يلي:

  • مع افتراض أنّ لون الخلفية يكون فاتحًا دائمًا.
  • ألوان النص ذات الترميز الثابت
  • ضبط لون خلفية غير قابل للتغيير أثناء استخدام اللون التلقائي للنص
  • استخدام رمز قابل للرسم بلون ثابت.

في جميع هذه الحالات، استخدم سمات السمات المناسبة بدلاً من الألوان الثابتة.

شاشات الإطلاق

إذا كان تطبيقك يحتوي على شاشة تشغيل مخصّصة، قد تحتاج إلى تعديلها كي يعكس المظهر المحدّد.

أزِل أي ألوان غير قابلة للتغيير في البرنامج، مثل ألوان الخلفية التي تم ضبطها آليًا على اللون الأبيض. يمكنك استخدام سمة المظهر ?android:attr/colorBackground بدلاً من ذلك.

تغييرات الإعدادات

عندما يتغير مظهر التطبيق، سواء من خلال إعداد النظام أو AppCompat، يؤدي ذلك إلى حدوث تغيير في إعدادات uiMode. وهذا يعني أنّه تتم إعادة إنشاء الأنشطة تلقائيًا.

في بعض الحالات، قد ترغب في أن يتعامل أحد التطبيقات مع تغيير الضبط. على سبيل المثال، قد تحتاج إلى تأجيل تغيير الإعدادات بسبب تشغيل الفيديو.

يمكن لأي تطبيق التعامل مع تنفيذ المظهر الداكن من خلال الإعلان عن أنّ كل Activity يمكنه التعامل مع التغيير في إعدادات uiMode على النحو التالي:

<activity
    android:name=".MyActivity"
    android:configChanges="uiMode" />

عندما يعلن Activity عن أنّه يعالج تغييرات الإعدادات، يتم استدعاء طريقة onConfigurationChanged() الخاصة بها عند إجراء تغيير على المظهر.

للتحقّق من المظهر الحالي، يمكن للتطبيقات تشغيل رموز برمجية على النحو التالي:

Kotlin

val currentNightMode = configuration.uiMode and Configuration.UI_MODE_NIGHT_MASK
when (currentNightMode) {
    Configuration.UI_MODE_NIGHT_NO -> {} // Night mode is not active, we're using the light theme.
    Configuration.UI_MODE_NIGHT_YES -> {} // Night mode is active, we're using dark theme.
}

Java

int currentNightMode = configuration.uiMode & Configuration.UI_MODE_NIGHT_MASK;
switch (currentNightMode) {
    case Configuration.UI_MODE_NIGHT_NO:
        // Night mode is not active, we're using the light theme
        break;
    case Configuration.UI_MODE_NIGHT_YES:
        // Night mode is active, we're using dark theme
        break;
}