गहरे रंग वाली थीम लागू करना

लिखने की सुविधा आज़माएं
Android के लिए, Jetpack Compose को यूज़र इंटरफ़ेस (यूआई) टूलकिट के तौर पर इस्तेमाल करने का सुझाव दिया जाता है. Compose में थीमिंग का इस्तेमाल करने का तरीका जानें.
कलर स्कीम - Material Design 3 →

पहली इमेज. गहरे रंग वाली थीम.

गहरे रंग वाली थीम, Android 10 (एपीआई लेवल 29) और इसके बाद के वर्शन पर उपलब्ध है. इसके ये फ़ायदे हैं:

  • इससे बैटरी की खपत काफ़ी कम हो जाती है. हालांकि, यह डिवाइस की स्क्रीन टेक्नोलॉजी पर निर्भर करता है.
  • कमज़ोर दृष्टि और चमकदार रोशनी के प्रति संवेदनशील उपयोगकर्ताओं को देखने में आसानी होती है.
  • इससे कम रोशनी वाली जगहों पर डिवाइस इस्तेमाल करना आसान हो जाता है.

गहरे रंग वाली थीम, Android सिस्टम के यूज़र इंटरफ़ेस (यूआई) और डिवाइस पर चलने वाले ऐप्लिकेशन पर लागू होती है.

Android 10 और इसके बाद के वर्शन में, गहरे रंग वाली थीम को चालू करने के तीन तरीके हैं:

  • गहरे रंग वाली थीम चालू करने के लिए, सिस्टम सेटिंग का इस्तेमाल करें. इसके लिए, सेटिंग > डिसप्ले > थीम पर जाएं.
  • इस सुविधा के चालू होने पर, सूचना ट्रे से थीम बदलने के लिए, क्विक सेटिंग टाइल का इस्तेमाल करें.
  • Pixel डिवाइसों पर, गहरे रंग वाली थीम को एक साथ चालू करने के लिए, बैटरी सेवर मोड चालू करें. ऐसा हो सकता है कि दूसरे डिवाइसों पर यह तरीका काम न करे.

वेबव्यू कॉम्पोनेंट का इस्तेमाल करके, वेब पर मौजूद कॉन्टेंट में गहरे रंग वाली थीम लागू करने के निर्देशों के लिए, वेबव्यू में वेब कॉन्टेंट को गहरा करना लेख पढ़ें.

अपने ऐप्लिकेशन में गहरे रंग वाली थीम की सुविधा उपलब्ध कराना

गहरे रंग वाली थीम को सपोर्ट करने के लिए, अपने ऐप्लिकेशन की थीम सेट करें. यह आम तौर पर 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 Components का इस्तेमाल करें. इसकी वजह यह है कि इसके कलर थीमिंग सिस्टम, जैसे कि थीम एट्रिब्यूट ?attr/colorSurface और ?attr/colorOnSurface, की मदद से सही रंगों को आसानी से ऐक्सेस किया जा सकता है. अपनी थीम में इन एट्रिब्यूट को पसंद के मुताबिक बनाया जा सकता है.

ऐप्लिकेशन में थीम बदलना

ऐप्लिकेशन के चालू रहने के दौरान, उपयोगकर्ताओं को ऐप्लिकेशन की थीम बदलने की सुविधा दी जा सकती है. यहां सुझाए गए विकल्प दिए गए हैं:

  • हल्का
  • गहरे रंग वाली थीम
  • सिस्टम डिफ़ॉल्ट (डिफ़ॉल्ट रूप से सुझाया गया विकल्प)

ये विकल्प सीधे तौर पर AppCompat.DayNight मोड से जुड़े होते हैं:

थीम बदलने के लिए, यह तरीका अपनाएं:

  • एपीआई लेवल 31 और उससे ऊपर के लेवल पर, UiModeManager#setApplicationNightMode का इस्तेमाल करें, ताकि सिस्टम को पता चल सके कि आपका ऐप्लिकेशन किस थीम पर चलता है. इससे सिस्टम को स्प्लैश स्क्रीन के दौरान थीम को मैच करने में मदद मिलती है.

  • एपीआई लेवल 30 और इससे पहले के लेवल पर, थीम बदलने के लिए AppCompatDelegate.setDefaultNightMode() का इस्तेमाल करें.

गहरे रंग वाली थीम को तुरंत लागू करने की सुविधा

Android 10 में, डेवलपर के लिए फ़ोर्स डार्क की सुविधा उपलब्ध है. इसकी मदद से, डेवलपर DayNight थीम को साफ़ तौर पर सेट किए बिना, गहरे रंग वाली थीम को तुरंत लागू कर सकते हैं.

फ़ोर्स डार्क मोड, हल्के रंग वाली थीम वाले आपके ऐप्लिकेशन के हर व्यू का विश्लेषण करता है. साथ ही, स्क्रीन पर ड्रॉ होने से पहले, गहरे रंग वाली थीम को अपने-आप लागू कर देता है. गहरे रंग वाली थीम को लागू करने में लगने वाले समय को कम करने के लिए, फ़ोर्स डार्क और नेटिव तरीके से लागू करने की सुविधा का एक साथ इस्तेमाल किया जा सकता है.

ऐप्लिकेशन को फ़ोर्स डार्क मोड के लिए ऑप्ट इन करना होगा. इसके लिए, गतिविधि की थीम में android:forceDarkAllowed="true" सेट करना होगा. यह एट्रिब्यूट, सिस्टम और AndroidX की ओर से उपलब्ध कराई गई सभी लाइट थीम पर सेट होता है. जैसे, Theme.Material.Light. फ़ोर्स डार्क मोड का इस्तेमाल करते समय, अपने ऐप्लिकेशन की अच्छी तरह से जांच करें. साथ ही, ज़रूरत के मुताबिक व्यू को बाहर रखें.

अगर आपका ऐप्लिकेशन गहरे रंग वाली थीम का इस्तेमाल करता है, जैसे कि Theme.Material), तो फ़ोर्स डार्क मोड लागू नहीं होता. इसी तरह, अगर आपके ऐप्लिकेशन की थीम, DayNight थीम से इनहेरिट होती है, तो थीम अपने-आप स्विच होने की वजह से, फ़ोर्स डार्क मोड लागू नहीं होता.

किसी व्यू पर डार्क मोड को ज़बरदस्ती लागू करने की सुविधा बंद करना

android:forceDarkAllowed लेआउट एट्रिब्यूट या setForceDarkAllowed() की मदद से, फ़ोर्स डार्क मोड को कुछ खास व्यू पर कंट्रोल किया जा सकता है.

वेब कॉन्टेंट

वेब पर मौजूद कॉन्टेंट में गहरे रंग वाली थीम इस्तेमाल करने के बारे में जानकारी के लिए, WebView में वेब कॉन्टेंट को गहरे रंग में दिखाना लेख पढ़ें. किसी वेबव्यू पर गहरे रंग वाली थीम लागू करने का उदाहरण देखने के लिए, GitHub पर WebView का डेमो देखें .

सबसे सही तरीके

यहां दिए गए सेक्शन में, डार्क थीम लागू करने के सबसे सही तरीके बताए गए हैं.

सूचनाएं और विजेट

डिवाइस पर दिखाए जाने वाले ऐसे यूज़र इंटरफ़ेस (यूआई) के लिए जिन पर आपका सीधा कंट्रोल नहीं होता, पक्का करें कि इस्तेमाल किए गए सभी व्यू, होस्ट ऐप्लिकेशन की थीम को दिखाते हों. इसके दो उदाहरण हैं: सूचनाएं और लॉन्चर विजेट.

सूचनाएं

सिस्टम की ओर से उपलब्ध कराए गए सूचना टेंप्लेट, जैसे कि 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;
}