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

تجربة ميزة "الكتابة"

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

الألوان - تصميم المواد 3 →

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ننصحك باستخدام مكونات Material Design، لأنّ نظام تنسيق الألوان، مثل سمتَي ?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. عند استخدام ميزة Force Dark (فرض وضع الداكن)، اختبِر تطبيقك بدقة واستبعِد طرق العرض حسب الحاجة.

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

إيقاف ميزة "فرض الوضع الداكن" في عرض

يمكن التحكّم في ميزة "فرض الوضع الداكن" في طرق عرض معيّنة باستخدام سمة android:forceDarkAllowed layout أو باستخدام 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;
}