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

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

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

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

অ্যাপের শর্ত ওয়েব কন্টেন্ট যা prefers-color-scheme ব্যবহার করে ওয়েব সামগ্রী যা prefers-color-scheme ব্যবহার করে না
অ্যাপটি একটি হালকা থিম ব্যবহার করছে যার সাথে isLightTheme সেট true বা সেট নয়। ওয়েবভিউ হালকা থিমের সাথে বিষয়বস্তু রেন্ডার করে বিষয়বস্তু লেখক সংজ্ঞায়িত করেছেন। 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, প্রয়োজনে, অ্যালগরিদমিকভাবে ওয়েব কন্টেন্টে একটি অন্ধকার থিম প্রয়োগ করার অনুমতি দিতে পারে যা এটি রেন্ডার করে।

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

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

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

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

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

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

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

অ্যালগরিদমিক গাঢ় করার অনুমতি দিন (অ্যান্ড্রয়েড 13 বা তার বেশির দিকে লক্ষ্য করে এমন অ্যাপ)

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

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

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

অ্যালগরিদমিক ডার্কিং করার অনুমতি দিন (অ্যান্ড্রয়েড 12 বা তার নিচের অ্যাপ্লিকেশানগুলিকে লক্ষ্য করে)

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

FORCE_DARK_OFF এর সাথে একসাথে FORCE_DARK_ON ব্যবহার করুন যদি আপনার অ্যাপ হালকা এবং অন্ধকার থিমের মধ্যে স্যুইচ করার জন্য নিজস্ব পদ্ধতি প্রদান করে, যেমন 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;
    }
}

অন্ধকার থিম পরিচালনা কাস্টমাইজ করুন

প্রদত্ত ওয়েবভিউতে কীভাবে অন্ধকার প্রয়োগ করা হয় তা নিয়ন্ত্রণ করতে আপনি AndroidX-এ ForceDarkStrategy API ব্যবহার করতে পারেন। ফোর্স ডার্ক FORCE_DARK_ON বা FORCE_DARK_AUTO এ সেট করা থাকলেই এই APIটি প্রযোজ্য।

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

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

  • DARK_STRATEGY_USER_AGENT_DARKENING_ONLY : যাকে "ব্যবহারকারী-এজেন্ট অন্ধকার করা" বলা হয়, ওয়েবভিউ যেকোনও ওয়েব পৃষ্ঠা অন্ধকারকে উপেক্ষা করে এবং স্বয়ংক্রিয়ভাবে অন্ধকার প্রয়োগ করে৷

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

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