WebView-এ ওয়েব কন্টেন্ট গাঢ় করুন

অ্যান্ড্রয়েড ১০ এবং এর পরবর্তী সংস্করণগুলোতে, একটি অ্যাপ ডার্ক থিম সমর্থন করতে পারে এবং সিস্টেম থিম অনুযায়ী স্বয়ংক্রিয়ভাবে লাইট ও ডার্ক অ্যাপ থিমের মধ্যে পরিবর্তন হতে পারে। বর্তমান অ্যাপ থিমের সাথে সামঞ্জস্য রাখতে, WebView- এর ভেতরের ওয়েব কন্টেন্টও লাইট, ডার্ক বা ডিফল্ট স্টাইলিং ব্যবহার করতে পারে।

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

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

অ্যাপের শর্তাবলী ওয়েব কন্টেন্ট যা prefers-color-scheme ব্যবহার করে যে ওয়েব কন্টেন্ট prefers-color-scheme ব্যবহার করে না
অ্যাপটি একটি লাইট থিম ব্যবহার করছে, যেখানে isLightTheme true সেট করা আছে অথবা নেই। WebView যে লাইট থিম ব্যবহার করে কন্টেন্ট রেন্ডার করে বিষয়বস্তুর লেখক সংজ্ঞায়িত করেছেন। WebView কন্টেন্ট লেখকের দ্বারা নির্ধারিত ডিফল্ট স্টাইলিং অনুসারে কন্টেন্টটি রেন্ডার করে।
অ্যাপটি অ্যালগরিদমের মাধ্যমে ডার্ক থিম প্রয়োগ করতে ফোর্স ডার্ক ব্যবহার করছে। WebView কন্টেন্টটিকে ডার্ক থিমে রেন্ডার করে যা বিষয়বস্তুর লেখক সংজ্ঞায়িত করেছেন। কন্টেন্ট লেখকের অনুমতি থাকলে, WebView একটি অ্যালগরিদম ব্যবহার করে তৈরি ডার্ক থিমে কন্টেন্টটি রেন্ডার করে।
অ্যাপটি একটি ডার্ক থিম ব্যবহার করছে যেখানে isLightTheme false সেট করা হয়েছে এবং অ্যাপটি WebView-এর জন্য অ্যালগরিদমিক ডার্কেনিং অনুমোদন করে না WebView কন্টেন্টটিকে ডার্ক থিমে রেন্ডার করে যা বিষয়বস্তুর লেখক সংজ্ঞায়িত করেছেন। WebView কন্টেন্ট লেখকের দ্বারা নির্ধারিত ডিফল্ট স্টাইলিং অনুসারে কন্টেন্টটি রেন্ডার করে।
অ্যাপটি একটি ডার্ক থিম ব্যবহার করছে যেখানে isLightTheme false সেট করা হয়েছে এবং অ্যাপটি WebView-এর জন্য অ্যালগরিদমিক ডার্কেনিং-এর অনুমতি দেয় WebView কন্টেন্টটিকে ডার্ক থিমে রেন্ডার করে যা বিষয়বস্তুর লেখক সংজ্ঞায়িত করেছেন। কন্টেন্ট লেখকের অনুমতি থাকলে, WebView একটি অ্যালগরিদম ব্যবহার করে তৈরি ডার্ক থিমে কন্টেন্টটি রেন্ডার করে।

বিষয়বস্তু-লেখক স্টাইলিং

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

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

অ্যালগরিদমিক অন্ধকার

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

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

আপনার অ্যাপ যদি ফোর্স ডার্ক ব্যবহার না করে, তাহলে WebView-তে কখন অ্যালগরিদমিক ডার্কেনিং চালু হবে তা আপনার অ্যাপের টার্গেট এপিআই লেভেলের উপর নির্ভর করে। বিস্তারিত তথ্যের জন্য অ্যান্ড্রয়েড ১৩ বা তার উচ্চতর সংস্করণকে টার্গেট করা অ্যাপ এবং অ্যান্ড্রয়েড ১২ বা তার নিম্নতর সংস্করণকে টার্গেট করা অ্যাপের জন্য নিম্নলিখিত বিভাগগুলি দেখুন।

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

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

  • WebView এবং এর প্যারেন্ট এলিমেন্টগুলোতে ফোর্স ডার্ক (Force Dark) অপশন রয়েছে।
  • isLightTheme true সেট করার মাধ্যমে বর্তমান অ্যাক্টিভিটির থিমটিকে লাইট হিসেবে চিহ্নিত করা হয়েছে।
  • ওয়েব কন্টেন্টের লেখক স্পষ্টভাবে ডার্কেনিং নিষ্ক্রিয় করেন না।
  • অ্যান্ড্রয়েড ১৩ (এপিআই লেভেল ৩৩) বা তার উচ্চতর সংস্করণকে লক্ষ্য করে তৈরি অ্যাপগুলোর ওয়েব কন্টেন্টে prefers-color-scheme ব্যবহার করা হয় না।
  • অ্যান্ড্রয়েড ১২ (এপিআই লেভেল ৩২) বা তার নিচের সংস্করণকে লক্ষ্য করে তৈরি অ্যাপগুলোর জন্য: অ্যাপটি WebView-এর forceDarkMode সেটিংটি FORCE_DARK_AUTO তে এবং তাদের Force Dark স্ট্র্যাটেজিটি DARK_STRATEGY_USER_AGENT_DARKENING_ONLY তে সেট করেছে।

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

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

অ্যালগরিদমিক ডার্কেনিং-এর অনুমতি দিন (অ্যান্ড্রয়েড ১৩ বা তার উচ্চতর সংস্করণের জন্য তৈরি অ্যাপগুলোর ক্ষেত্রে)

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

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

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

অ্যালগরিদমিক ডার্কেনিং-এর অনুমতি দিন (অ্যান্ড্রয়েড ১২ বা তার নিম্নস্তরের অ্যাপের জন্য)

যেসব অ্যাপ অ্যাপ-লেভেল ফোর্স ডার্ক ব্যবহার করছে না এবং অ্যান্ড্রয়েড ১২ (এপিআই লেভেল ৩২) বা তার নিচের সংস্করণকে টার্গেট করে, সেগুলোতে অ্যালগরিদমিক ডার্কেনিং চালু করতে FORCE_DARK_ON ব্যবহার করুন।

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

ফিচারটি সমর্থিত কিনা তা পরীক্ষা করতে, আপনার WebView অবজেক্ট কনফিগার করার যেকোনো জায়গায়, যেমন Activity.onCreate এ, নিম্নলিখিত কোড লাইনগুলো যোগ করুন:

কোটলিন

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

জাভা

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

যদি আপনার অ্যাপ সিস্টেম প্রেফারেন্সের পরিবর্তন শনাক্ত করার উপর নির্ভর করে, তবে আপনার অ্যাপের উচিত থিমের পরিবর্তনগুলো স্পষ্টভাবে পর্যবেক্ষণ করা এবং FORCE_DARK_ONFORCE_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;
    }
}

ডার্ক থিম হ্যান্ডলিং কাস্টমাইজ করুন

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

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

  • ওয়েব থিম ডার্কেনিং : ওয়েব ডেভেলপাররা ডার্ক মোডে ওয়েব পেজের চেহারা নিয়ন্ত্রণ করতে @media (prefers-color-scheme: dark) প্রয়োগ করতে পারেন। 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"> ট্যাগটিকে ঐচ্ছিক হিসেবে গণ্য করে, অ্যান্ড্রয়েড ওয়েবভিউ-এর ডিফল্ট মোডে ওয়েব পেজের prefers-color-scheme মিডিয়া কোয়েরিগুলো মেনে চলার জন্য মেটা ট্যাগটি থাকা আবশ্যক। আপনি DARK_STRATEGY_WEB_THEME_DARKENING_ONLY মোডে ওয়েবভিউ ব্যবহার করতে পারেন, সেক্ষেত্রে ট্যাগটি বাদ দেওয়া হলেও ওয়েবভিউ সর্বদা মিডিয়া কোয়েরি প্রয়োগ করে।

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

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

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

ডার্ক থিম প্রয়োগের একটি উদাহরণের জন্য, গিটহাবে WebView ডেমোটি দেখুন।