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

Compose को आज़माएं

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

कलर स्कीम - मटीरियल डिज़ाइन 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: यह आइकॉन के रंग को सामान्य तौर पर दिखाता है. इसमें बंद किया गया स्टेटस शामिल है.

हमारा सुझाव है कि आप मटीरियल डिज़ाइन Components का इस्तेमाल करें. इसकी वजह यह है कि इसके कलर थीमिंग सिस्टम, जैसे कि थीम एट्रिब्यूट ?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 थीम से इनहेरिट होती है, तो थीम अपने-आप स्विच होने की वजह से, ForceDark लागू नहीं होता.

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

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

वेब कॉन्टेंट

वेब पर मौजूद कॉन्टेंट में गहरे रंग वाली थीम इस्तेमाल करने के बारे में जानकारी के लिए, 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;
}