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

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

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

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

कॉन्टेंट के लेखक के लिए स्टाइलिंग

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

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

एल्गोरिदम की वजह से कॉन्टेंट का दिखना कम होना

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

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

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

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

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

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

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

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

एल्गोरिदम के हिसाब से स्क्रीन को हल्का करने की सुविधा चालू करें (Android 13 या इसके बाद के वर्शन को टारगेट करने वाले ऐप्लिकेशन के लिए)

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

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

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

एल्गोरिदम के हिसाब से इमेज को हल्का करने की सुविधा चालू करें (Android 12 या इससे पहले के वर्शन को टारगेट करने वाले ऐप्लिकेशन के लिए)

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

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

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

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

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

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

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

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

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

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

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

• वेब थीम को गहरा करना: वेब डेवलपर, डार्क मोड में वेब पेज के दिखने के तरीके को कंट्रोल करने के लिए, @media (prefers-color-scheme: dark) लागू कर सकते हैं. वेबव्यू, इन सेटिंग के हिसाब से कॉन्टेंट रेंडर करता है. वेब थीम को डार्क करने के बारे में ज़्यादा जानने के लिए, स्पेसिफ़िकेशन देखें.
• यूज़र-एजेंट डार्किंग: इसमें WebView, वेब पेज के रंगों को अपने-आप उलट देता है. अगर उपयोगकर्ता एजेंट डार्किंग का इस्तेमाल किया जाता है, तो @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 WebView के डिफ़ॉल्ट मोड में, वेब पेज की prefers-color-scheme मीडिया क्वेरी को पूरा करने के लिए मेटा टैग की ज़रूरत होती है. DARK_STRATEGY_WEB_THEME_DARKENING_ONLY मोड के साथ वेबव्यू का इस्तेमाल किया जा सकता है. इस मोड में, वेबव्यू हमेशा मीडिया क्वेरी लागू करता है. भले ही, टैग को शामिल न किया गया हो.

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

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

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

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