वेबव्यू में वेब कॉन्टेंट को गहरा बनाएं

Android 10 और उसके बाद के वर्शन में, ऐप्लिकेशन में गहरे रंग वाली थीम काम कर सकती है. साथ ही, सिस्टम की थीम के हिसाब से, ऐप्लिकेशन की हल्के और गहरे रंग वाली थीम के बीच अपने-आप स्विच हो सकती है. ऐप्लिकेशन की मौजूदा थीम से मेल खाने के लिए, वेबव्यू में मौजूद वेब कॉन्टेंट में हल्के, गहरे रंग वाली या डिफ़ॉल्ट स्टाइल का इस्तेमाल भी किया जा सकता है.

वेबव्यू का व्यवहार, prefers-color-scheme और color-scheme वेब स्टैंडर्ड के साथ काम करता है. अगर हो सके, तो अगर आपने ऐसा वेब कॉन्टेंट लिखा है जिसे आपको वेबव्यू में ऐप्लिकेशन दिखाना है, तो अपनी वेबसाइट के लिए गहरे रंग वाली थीम तय करें और prefers-color-scheme लागू करें. इससे वेबव्यू, वेब कॉन्टेंट की थीम को आपके ऐप्लिकेशन की थीम से मैच कर पाएगा.

नीचे दी गई टेबल में बताया गया है कि वेब कॉन्टेंट की स्टाइल और आपके ऐप्लिकेशन की स्थितियों के आधार पर, WebView आपके ऐप्लिकेशन में वेब कॉन्टेंट को कैसे रेंडर करता है:

कॉन्टेंट के लेखक के हिसाब से स्टाइल

ऐप्लिकेशन के isLightTheme ऐट्रिब्यूट से पता चलता है कि ऐप्लिकेशन की थीम हल्की है या गहरी. वेबव्यू, हमेशा prefers-color-scheme को isLightTheme के हिसाब से सेट करता है. अगर isLightTheme की वैल्यू true है या इसे तय नहीं किया गया है, तो prefers-color-scheme की वैल्यू light होगी. अगर isLightTheme की वैल्यू true नहीं है, तो prefers-color-scheme की वैल्यू dark होगी.

इसका मतलब है कि अगर वेब कॉन्टेंट में prefers-color-scheme का इस्तेमाल किया जाता है और कॉन्टेंट के लेखक ने इसकी अनुमति दी है, तो ऐप्लिकेशन की थीम से मैच करने के लिए, वेब कॉन्टेंट पर लेखक की तय की गई लाइट या डार्क थीम अपने-आप लागू हो जाती है.

एल्गोरिदम की मदद से, वीडियो को गहरे रंग में बदलना

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

अगर आपका ऐप्लिकेशन, ऐप्लिकेशन-लेवल पर गहरे रंग वाली थीम को लागू करने के लिए, 'गहरे रंग वाली थीम को लागू करें' सुविधा का इस्तेमाल कर रहा है, तो नीचे दिए गए सेक्शन में 'गहरे रंग वाली थीम को लागू करें' सुविधा की मदद से, वेब कॉन्टेंट के लिए गहरे रंग वाली थीम को लागू करने की अनुमति देने का तरीका जानें.

अगर आपका ऐप्लिकेशन, फ़ोर्स डार्क मोड का इस्तेमाल नहीं कर रहा है, तो आपका ऐप्लिकेशन यह कैसे तय करता है कि वेबव्यू में एल्गोरिदम के हिसाब से रंग को गहरे रंग में कब बदलना है, यह आपके ऐप्लिकेशन के टारगेट एपीआई लेवल पर निर्भर करता है. Android 13 या उसके बाद के वर्शन को टारगेट करने वाले ऐप्लिकेशन और Android 12 या उससे पहले के वर्शन को टारगेट करने वाले ऐप्लिकेशन के बारे में ज़्यादा जानकारी के लिए, नीचे दिए गए सेक्शन देखें.

गहरे रंग वाली थीम को तुरंत लागू करने की सुविधा की मदद से, वेब कॉन्टेंट को गहरे रंग में दिखाने की अनुमति देना

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

• वेबव्यू और उसके पैरंट एलिमेंट, गहरे रंग वाली थीम को लागू करने की अनुमति देते हैं.
• मौजूदा गतिविधि की थीम को हल्के रंग के तौर पर मार्क किया गया है. साथ ही, isLightTheme को true पर सेट किया गया है.
• वेब कॉन्टेंट के लेखक ने, स्क्रीन को गहरे रंग में दिखाने की सुविधा को साफ़ तौर पर बंद न किया हो.
• Android 13 (एपीआई लेवल 33) या उसके बाद के वर्शन को टारगेट करने वाले ऐप्लिकेशन के लिए, वेब कॉन्टेंट में prefers-color-scheme का इस्तेमाल नहीं किया जाता.
• Android 12 (एपीआई लेवल 32) या इससे पहले के वर्शन को टारगेट करने वाले ऐप्लिकेशन के लिए: ऐप्लिकेशन ने WebView की forceDarkMode सेटिंग को FORCE_DARK_AUTO पर सेट किया हो और 'गहरे रंग में दिखाने की रणनीति को लागू करें' को DARK_STRATEGY_USER_AGENT_DARKENING_ONLY पर सेट किया हो.

WebView और उसके सभी पैरंट, View.setForceDarkAllowed() का इस्तेमाल करके, फ़ोर्स डार्क मोड की अनुमति दे सकते हैं. डिफ़ॉल्ट वैल्यू, Android थीम के setForceDarkAllowed() एट्रिब्यूट से ली जाती है. इसे भी true पर सेट किया जाना चाहिए.

फ़ोर्स डार्क मोड की सुविधा, मुख्य रूप से उन ऐप्लिकेशन के लिए उपलब्ध कराई गई है जो अपनी डार्क थीम उपलब्ध नहीं कराते. अगर आपका ऐप्लिकेशन 'गहरे रंग वाली थीम को ज़बरदस्ती लागू करें' सुविधा का इस्तेमाल करता है, तो हमारा सुझाव है कि आप गहरे रंग वाली थीम के लिए सहायता जोड़ें.

ऐल्गोरिदम की मदद से स्क्रीन को गहरे रंग में दिखाने की अनुमति देना (Android 13 या उसके बाद के वर्शन को टारगेट करने वाले ऐप्लिकेशन)

जिन ऐप्लिकेशन में ऐप्लिकेशन-लेवल पर फ़ोर्स डार्क मोड का इस्तेमाल नहीं किया जा रहा है और जो Android 13 (एपीआई लेवल 33) या उसके बाद के वर्शन को टारगेट करते हैं उनके लिए, AndroidX setAlgorithmicDarkeningAllowed() तरीका इस्तेमाल करें. साथ ही, true को पास करके यह बताएं कि वेबव्यू में एल्गोरिदम के हिसाब से डार्क मोड चालू किया जा सकता है. यह तरीका, Android के पुराने वर्शन के साथ काम करता है.

इसके बाद, WebView एल्गोरिदम के हिसाब से स्क्रीन को गहरे रंग में तब बदलता है, जब ये शर्तें पूरी होती हैं:

• वेब कॉन्टेंट में prefers-color-scheme का इस्तेमाल नहीं किया गया है.
• वेब कॉन्टेंट के लेखक ने, स्क्रीन को गहरे रंग में दिखाने की सुविधा को साफ़ तौर पर बंद न किया हो.

एल्गोरिदम की मदद से स्क्रीन को गहरे रंग में दिखाने की अनुमति दें (Android 12 या उससे पहले के वर्शन को टारगेट करने वाले ऐप्लिकेशन)

जो ऐप्लिकेशन ऐप्लिकेशन-लेवल पर फ़ोर्स डार्क मोड का इस्तेमाल नहीं कर रहे हैं और Android 12 (एपीआई लेवल 32) या उससे पहले के वर्शन को टारगेट कर रहे हैं उनके लिए, एल्गोरिदम के हिसाब से स्क्रीन को गहरे रंग में दिखाने की अनुमति देने के लिए, FORCE_DARK_ON का इस्तेमाल करें.

अगर आपका ऐप्लिकेशन, हल्के और गहरे रंग वाली थीम के बीच स्विच करने का अपना तरीका उपलब्ध कराता है, तो FORCE_DARK_ON को FORCE_DARK_OFF के साथ इस्तेमाल करें. जैसे, यूज़र इंटरफ़ेस (यूआई) में टॉगल किया जा सकने वाला एलिमेंट या समय के हिसाब से अपने-आप चुनी जाने वाली थीम.

यह देखने के लिए कि यह सुविधा काम करती है या नहीं, Activity.onCreate जैसे वेबव्यू ऑब्जेक्ट को कॉन्फ़िगर करने के लिए, कोड की ये लाइनें जोड़ें:

if (WebViewFeature.isFeatureSupported(WebViewFeature.FORCE_DARK)) {
    WebSettingsCompat.setForceDark(...)
}

if (WebViewFeature.isFeatureSupported(WebViewFeature.FORCE_DARK)) {
    WebSettingsCompat.setForceDark(...);
}

अगर आपका ऐप्लिकेशन, सिस्टम की सेटिंग में होने वाले बदलावों का पता लगाने पर निर्भर करता है, तो आपके ऐप्लिकेशन को थीम में होने वाले बदलावों को साफ़ तौर पर सुनना चाहिए और इन्हें FORCE_DARK_ON और FORCE_DARK_OFF स्थितियों के साथ वेबव्यू पर लागू करना चाहिए.

नीचे दिए गए कोड स्निपेट में, थीम का फ़ॉर्मैट बदलने का तरीका बताया गया है:

if (WebViewFeature.isFeatureSupported(WebViewFeature.FORCE_DARK)) {
    when (resources.configuration.uiMode and Configuration.UI_MODE_NIGHT_MASK) {
        Configuration.UI_MODE_NIGHT_YES -> {
            WebSettingsCompat.setForceDark(myWebView.settings, FORCE_DARK_ON)
        }
        Configuration.UI_MODE_NIGHT_NO, Configuration.UI_MODE_NIGHT_UNDEFINED -> {
            WebSettingsCompat.setForceDark(myWebView.settings, FORCE_DARK_OFF)
        }
        else -> {
            //
        }
    }
}

if (WebViewFeature.isFeatureSupported(WebViewFeature.FORCE_DARK)) {
    switch (getResources().getConfiguration().uiMode & Configuration.UI_MODE_NIGHT_MASK) {
        case Configuration.UI_MODE_NIGHT_YES:
            WebSettingsCompat.setForceDark(myWebView.getSettings(), FORCE_DARK_ON);
            break;
        case Configuration.UI_MODE_NIGHT_NO:
        case Configuration.UI_MODE_NIGHT_UNDEFINED:
            WebSettingsCompat.setForceDark(myWebView.getSettings(), FORCE_DARK_OFF);
            break;
    }
}

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

AndroidX में ForceDarkStrategy API का इस्तेमाल करके भी यह कंट्रोल किया जा सकता है कि किसी वेबव्यू पर डार्क मोड कैसे लागू किया जाए. यह एपीआई सिर्फ़ तब लागू होता है, जब डार्क डार्क को FORCE_DARK_ON या FORCE_DARK_AUTO पर सेट किया गया हो.

एपीआई का इस्तेमाल करके, आपका ऐप्लिकेशन वेब थीम को डार्क करने या उपयोगकर्ता एजेंट को डार्क करने के लिए इस्तेमाल कर सकता है:

• वेब थीम को गहरे रंग में बदलना: वेब डेवलपर, गहरे रंग के मोड में वेब पेज के दिखने के तरीके को कंट्रोल करने के लिए, @media (prefers-color-scheme: dark) लागू कर सकते हैं. वेबव्यू इन सेटिंग के हिसाब से कॉन्टेंट रेंडर करता है. वेब थीम को गहरे रंग में बदलने के बारे में ज़्यादा जानने के लिए, स्पेसिफ़िकेशन देखें.
• यूज़र-एजेंट को गहरे रंग में बदलना: वेबव्यू, वेब पेज के रंगों को अपने-आप उलट देता है. अगर यूज़र-एजेंट को डार्क करने की सुविधा का इस्तेमाल किया जाता है, तो @media (prefers-color-scheme: dark) क्वेरी का आकलन false के तौर पर किया जाता है.

इन दोनों में से किसी एक रणनीति को चुनने के लिए, नीचे दिए गए एपीआई का इस्तेमाल करें:

if (WebViewFeature.isFeatureSupported(WebViewFeature.FORCE_DARK_STRATEGY)) {
    WebSettingsCompat.setForceDarkStrategy(...)
}

if (WebViewFeature.isFeatureSupported(WebViewFeature.FORCE_DARK_STRATEGY)) {
    WebSettingsCompat.setForceDarkStrategy(...);
}

रणनीति के ये विकल्प काम करते हैं:

• DARK_STRATEGY_PREFER_WEB_THEME_OVER_USER_AGENT_DARKENING: यह डिफ़ॉल्ट विकल्प है. ज़्यादातर ब्राउज़र, <meta name="color-scheme" content="dark light"> टैग को वैकल्पिक मानते हैं. हालांकि, Android वेबव्यू के डिफ़ॉल्ट मोड में, वेब पेज की prefers-color-scheme मीडिया क्वेरी को पूरा करने के लिए, मेटा टैग की ज़रूरत होती है. DARK_STRATEGY_WEB_THEME_DARKENING_ONLY मोड के साथ वेबव्यू का इस्तेमाल किया जा सकता है. इस स्थिति में, वेबव्यू हमेशा मीडिया क्वेरी लागू करता है, भले ही टैग हटा दिया गया हो.

  हालांकि, हमारा सुझाव है कि वेब डेवलपर अपनी वेबसाइटों में <meta name="color-scheme" content="dark light"> टैग जोड़ें, ताकि यह पक्का किया जा सके कि डिफ़ॉल्ट कॉन्फ़िगरेशन के साथ वेबव्यू में कॉन्टेंट सही तरीके से रेंडर हो.

• DARK_STRATEGY_USER_AGENT_DARKENING_ONLY: इसे "उपयोगकर्ता-एजेंट को गहरे रंग में बदलना" कहा जाता है. वेबव्यू, वेब पेज को गहरे रंग में बदलने की सुविधा को अनदेखा करता है और गहरे रंग में बदलने की सुविधा को अपने-आप लागू करता है.

अगर आपका ऐप्लिकेशन, पहले पक्ष का ऐसा वेब कॉन्टेंट दिखाता है जिसे आपने prefers-color-scheme मीडिया क्वेरी की मदद से पसंद के मुताबिक बनाया है, तो हमारा सुझाव है कि आप यह पक्का करें कि वेबव्यू, पसंद के मुताबिक बनाई गई थीम का इस्तेमाल करे.DARK_STRATEGY_WEB_THEME_DARKENING_ONLY

गहरे रंग वाली थीम लागू करने का उदाहरण देखने के लिए, GitHub पर वेबव्यू का डेमो देखें