WebView-তে ওয়েব কন্টেন্ট ডার্ক করা

Android 10 এবং এর পরবর্তী ভার্সনে, কোনও অ্যাপে ডার্ক থিম কাজ করতে পারে এবং সিস্টেম থিম অনুযায়ী লাইট ও ডার্ক অ্যাপ থিমের মধ্যে অটোমেটিক পরিবর্তন করতে পারে। বর্তমান অ্যাপ থিমের সাথে ম্যাচ করতে, WebView-এ ওয়েব কন্টেন্টও লাইট, ডার্ক বা ডিফল্ট স্টাইলিং ব্যবহার করতে পারে।

WebView-এর আচরণ prefers-color-scheme এবং color-scheme ওয়েব স্ট্যান্ডার্ডের সাথে ইন্টারঅপারেট করে। সম্ভব হলে, আপনি যদি এমন ওয়েব কন্টেন্ট তৈরি করেন যা আপনার অ্যাপে WebView-তে দেখাতে চান, তাহলে আপনাকে আপনার ওয়েবসাইটের জন্য ডার্ক থিম নির্ধারণ করতে এবং prefers-color-scheme প্রয়োগ করতে হবে যাতে WebView, ওয়েব কন্টেন্টের থিমকে আপনার অ্যাপের থিমের সাথে ম্যাচ করতে পারে।

ওয়েব কন্টেন্টের স্টাইলিং এবং আপনার অ্যাপের শর্তের উপর নির্ভর করে, WebView কীভাবে আপনার অ্যাপে ওয়েব কন্টেন্ট রেন্ডার করে তা নিম্নলিখিত সারণীতে বর্ণনা করা হয়েছে:

কন্টেন্ট-লেখক স্টাইলিং

অ্যাপের isLightTheme অ্যাট্রিবিউট নির্দেশ করে যে অ্যাপের থিম লাইট নাকি ডার্ক। WebView সবসময় isLightTheme অনুযায়ী prefers-color-scheme সেট করে। isLightTheme যদি true হয় অথবা উল্লেখ করা না থাকে, তাহলে prefers-color-scheme হল light; অন্যথায়, এটি হল dark।

এর অর্থ হল, ওয়েব কন্টেন্ট যদি prefers-color-scheme ব্যবহার করে এবং কন্টেন্ট লেখক এটির অনুমতি দেন, তাহলে কন্টেন্ট লেখকের দ্বারা সংজ্ঞায়িত লাইট বা ডার্ক থিম অ্যাপের থিমের সাথে ম্যাচ করার জন্য সবসময় অটোমেটিক ওয়েব কন্টেন্টে প্রয়োগ করা হয়।

অ্যালগরিদমিক ডার্কেনিং

যেসব ক্ষেত্রে ওয়েব কন্টেন্ট prefers-color-scheme ব্যবহার করে না, সেগুলি কভার করতে, আপনার অ্যাপ, প্রয়োজন হলে, ওয়েবভিউকে, রেন্ডার করা ওয়েব কন্টেন্টে অ্যালগরিদম অনুযায়ী ডার্ক থিম প্রয়োগ করার অনুমতি দিতে পারে।

আপনার অ্যাপে অ্যালগরিদম অনুযায়ী ডার্ক থিম প্রয়োগ করতে, অ্যাপ-লেভেল ফোর্স ডার্ক ব্যবহার করলে, নিম্নলিখিত বিভাগটি দেখুন যেখানে ফোর্স ডার্কের মাধ্যমে ওয়েব কন্টেন্টের জন্য অ্যালগরিদম অনুযায়ী ডার্কেনিংয়ের অনুমতি কীভাবে দেবেন তা বর্ণনা করা হয়েছে।

আপনার অ্যাপ যদি 'ফোর্স ডার্ক' ব্যবহার না করে, তাহলে WebView-তে অ্যালগরিদমিক ডার্কেনিং কখন অনুমোদন করতে হবে তা আপনার অ্যাপ কীভাবে নির্দিষ্ট করে তা আপনার অ্যাপের টার্গেট API লেভেল-এর উপর নির্ভর করে। বিস্তারিত জানতে Android 13 বা তার পরবর্তী যেকোনও ভার্সনকে টার্গেট করা অ্যাপ এবং Android 12 বা তার আগের যেকোনও ভার্সনকে টার্গেট করা অ্যাপ সংক্রান্ত নিম্নলিখিত বিভাগগুলি দেখুন।

ফোর্স ডার্কের মাধ্যমে ওয়েব কন্টেন্টের জন্য অ্যালগরিদমিক ডার্কেনিংয়ের অনুমতি দিন

আপনার অ্যাপ যদি অ্যাপ-লেভেল ডার্ক মোড প্রয়োগ করুন ব্যবহার করে, তাহলে নিম্নলিখিত শর্ত পূরণ হলে WebView ওয়েব কন্টেন্টে অ্যালগরিদমিক ডার্কেনিং প্রয়োগ করে:

• WebView এবং এর পেরেন্ট এলিমেন্ট ফোর্স ডার্কের অনুমতি দেয়।
• বর্তমান অ্যাক্টিভিটি থিম লাইট হিসেবে চিহ্নিত করা হয়েছে এবং isLightTheme true-এ সেট করা হয়েছে।
• ওয়েব কন্টেন্টের লেখক স্পষ্টভাবে ডার্কেনিং বন্ধ করেননি।
• Android 13 (API লেভেল 33) বা তার পরবর্তী ভার্সনকে টার্গেট করা অ্যাপের ক্ষেত্রে, ওয়েব কন্টেন্ট prefers-color-scheme ব্যবহার করে না।
• Android 12 (API লেভেল 32) বা তার আগের ভার্সনকে টার্গেট করা অ্যাপের ক্ষেত্রে: অ্যাপটি WebView-এর forceDarkMode সেটিং FORCE_DARK_AUTO হিসেবে সেট করেছে এবং এর ফোর্স ডার্ক স্ট্র্যাটেজি DARK_STRATEGY_USER_AGENT_DARKENING_ONLY হিসেবে সেট করেছে।

WebView এবং এর সব পেরেন্ট View.setForceDarkAllowed() ব্যবহার করে ফোর্স ডার্কের অনুমতি দিতে পারে। ডিফল্ট ভ্যালু Android থিমের setForceDarkAllowed() অ্যাট্রিবিউট থেকে নেওয়া হয়, যা অবশ্যই true-এ সেট করতে হবে।

যেসব অ্যাপে নিজস্ব ডার্ক থিম নেই, সেগুলিতে ব্যাকওয়ার্ড কম্প্যাটিবিলিটির জন্য প্রাথমিকভাবে ফোর্স ডার্ক মোড প্রদান করা হয়। আপনার অ্যাপ যদি ফোর্স ডার্ক ব্যবহার করে, তাহলে আমরা ডার্ক থিমের জন্য সহায়তা যোগ করার সাজেশন দিই।

অ্যালগরিদমিক ডার্কেনিংয়ের অনুমতি দিন (Android 13 বা তার পরবর্তী ভার্সনকে টার্গেট করা অ্যাপ)

যেসব অ্যাপ, অ্যাপ-লেভেল ফোর্স ডার্ক ব্যবহার করছে না এবং Android 13 (API লেভেল 33) বা তার পরবর্তী ভার্সনকে টার্গেট করছে, সেগুলির ক্ষেত্রে Jetpack Webkit setAlgorithmicDarkeningAllowed() পদ্ধতি ব্যবহার করুন এবং WebView-এর অ্যালগরিদম অনুযায়ী ডার্কেনিংয়ের অনুমতি দেওয়া উচিত কিনা তা নির্দিষ্ট করতে true পাস করুন। এই পদ্ধতিটি Android-এর আগের ভার্সনের সাথে ব্যাকওয়ার্ড কম্প্যাটিবল।

নিম্নলিখিত শর্ত পূরণ হলে WebView অ্যালগরিদম অনুযায়ী ডার্ক মোড প্রয়োগ করে:

• ওয়েব কন্টেন্ট prefers-color-scheme ব্যবহার করে না।
• ওয়েব কন্টেন্টের লেখক স্পষ্টভাবে ডার্কেনিং বন্ধ করেন না।

অ্যালগরিদমিক ডার্কেনিংয়ের অনুমতি দিন (Android 12 বা তার আগের ভার্সনকে টার্গেট করা অ্যাপ)

যেসব অ্যাপ, অ্যাপ-লেভেল ফোর্স ডার্ক ব্যবহার করছে না এবং Android 12 (API লেভেল 32) বা তার আগের ভার্সনকে টার্গেট করছে, সেগুলির ক্ষেত্রে অ্যালগরিদম অনুযায়ী ডার্কেনিংয়ের অনুমতি দিতে FORCE_DARK_ON ব্যবহার করুন।

FORCE_DARK_ON-এর সাথে FORCE_DARK_OFF ব্যবহার করুন, যদি আপনার অ্যাপ লাইট ও ডার্ক থিমের মধ্যে পরিবর্তন করার জন্য নিজস্ব পদ্ধতি প্রদান করে, যেমন UI-তে টগল করা যায় এমন এলিমেন্ট বা অটোমেটিক সময়-ভিত্তিক বেছে নেওয়া।

ফিচারটি কাজ করে কিনা তা চেক করতে, যেখানেই আপনি 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;
    }
}

ডার্ক থিম ম্যানেজ করার সুবিধা কাস্টমাইজ করুন

এছাড়াও, আপনি ForceDarkStrategy API ব্যবহার করতে পারেন Jetpack লাইব্রেরিতে, কোনও নির্দিষ্ট WebView-তে কীভাবে ডার্কেনিং প্রয়োগ করা হয় তা নিয়ন্ত্রণ করতে। এই API তখনই প্রযোজ্য হয় যখন ফোর্স ডার্ক FORCE_DARK_ON বা FORCE_DARK_AUTO-এ সেট করা থাকে।

API ব্যবহার করে, আপনার অ্যাপ ওয়েব থিম ডার্কেনিং বা ইউজার-এজেন্ট ডার্কেনিং ব্যবহার করতে পারে:

• ওয়েব থিম ডার্ক করা: ডার্ক মোডে ওয়েব পেজের উপস্থিতি নিয়ন্ত্রণ করতে ওয়েব ডেভেলপাররা @media (prefers-color-scheme: dark) প্রয়োগ করতে পারেন। WebView এইসব সেটিংস অনুযায়ী কন্টেন্ট রেন্ডার করে। ওয়েব থিম ডার্কেনিং সম্পর্কে আরও জানতে, স্পেসিফিকেশন দেখুন।
• ইউজার-এজেন্ট ডার্কেনিং: WebView অটোমেটিক ওয়েবপেজের রঙ ইনভার্ট করে। আপনি ইউজার-এজেন্ট ডার্কেনিং ব্যবহার করলে, @media (prefers-color-scheme: dark) কোয়েরি false হিসেবে মূল্যায়ন করে।

দুটি স্ট্র্যাটেজির মধ্যে থেকে বেছে নিতে, নিম্নলিখিত API ব্যবহার করুন:

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 মোডের সাথে WebView ব্যবহার করতে পারেন, যেক্ষেত্রে ট্যাগ বাদ দেওয়া হলেও WebView সবসময় মিডিয়া কোয়েরি প্রয়োগ করে।

  তবে, আমরা ওয়েব ডেভেলপারদের তাদের ওয়েবসাইটে <meta name="color-scheme" content="dark light"> ট্যাগ যোগ করার সাজেশন দিই যাতে ডিফল্ট কনফিগারেশন সহ ওয়েবভিউতে কন্টেন্ট সঠিকভাবে রেন্ডার হয়।

• DARK_STRATEGY_USER_AGENT_DARKENING_ONLY: "ইউজার-এজেন্ট ডার্কেনিং" বলা হয়, WebView যেকোনও ওয়েব পেজ ডার্কেনিংকে উপেক্ষা করে এবং অটোমেটিক ডার্কেনিং প্রয়োগ করে।

আপনার অ্যাপ যদি ফার্স্ট-পার্টি ওয়েব কন্টেন্ট দেখায় যা আপনি prefers-color-scheme মিডিয়া কোয়েরি দিয়ে কাস্টমাইজ করেছেন, তাহলে আমরা সাজেস্ট করি DARK_STRATEGY_WEB_THEME_DARKENING_ONLY যাতে WebView কাস্টম থিম ব্যবহার করে।

ডার্ক থিম প্রয়োগ করার উদাহরণ দেখতে, GitHub-এ WebView ডেমো দেখুন