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

تجربة طريقة Compose

‫Jetpack Compose هي مجموعة أدوات واجهة المستخدم المقترَحة لنظام التشغيل Android. تعرَّف على كيفية استخدام ميزة "المظاهر" في Compose.

Color Scheme - Material Design 3 →

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

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

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

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

• استخدِم إعدادات النظام من خلال الانتقال إلى الإعدادات > العرض > المظهر لتفعيل المظهر الداكن.
• استخدِم مربّع "الإعدادات السريعة" لتبديل المظاهر من لوحة الإشعارات، عند تفعيلها.
• على أجهزة 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:

• الوضع الفاتح: MODE_NIGHT_NO

• الوضع الداكن: MODE_NIGHT_YES.

• الإعداد التلقائي للنظام: MODE_NIGHT_FOLLOW_SYSTEM.

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

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

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

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

يوفّر Android 10 ميزة فرض المظهر الداكن، وهي ميزة تتيح للمطوّرين تطبيق مظهر داكن بسرعة بدون ضبط مظهر 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() عند تغيير المظهر.

للتحقّق من المظهر الحالي، يمكن للتطبيقات تشغيل رمز مثل هذا:

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.
}

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;
}