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

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

गहरे रंग वाली थीम, 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 मोड से सीधे तौर पर मैप होते हैं:

हल्का: 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 पर गहरे रंग वाली थीम लागू करने का उदाहरण देखने के लिए, 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;
}

ध्यान दें: कॉन्फ़िगरेशन में हुए बदलावों के बारे में ज़्यादा जानने के लिए, कॉन्फ़िगरेशन में हुए बदलावों को मैनेज करें पेज देखें. इस पेज पर, आपको यह भी पता चलेगा कि अगर ज़रूरत हो, तो गतिविधि को फिर से बनाने की सुविधा को कैसे सीमित किया जाए. साथ ही, व्यू सिस्टम और Jetpack Compose से, कॉन्फ़िगरेशन में हुए बदलावों पर कैसे प्रतिक्रिया दी जाए.