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

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

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

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

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

ينطبق "المظهر الداكن" على واجهة مستخدم نظام 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:

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

  • في المستوى 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() عند حدوث تغيير في المظهر.

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

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