অটোমেটিক ডার্ক থিম

André Cipriani Bandarra

Chrome 96, Android-এ অটো ডার্ক থিমের জন্য অরিজিন ট্রায়াল নিয়ে এসেছে। এই ফিচারের মাধ্যমে, ব্রাউজার লাইট থিমযুক্ত সাইটে অটোমেটিক জেনারেট করা ডার্ক থিম প্রয়োগ করে, যখন ব্যবহারকারী অপারেটিং সিস্টেমে ডার্ক থিম বেছে নেন। ব্যবহারকারীরা OS লেভেলে বিকল্পটি বন্ধ করে অথবা Chrome-এর নির্দিষ্ট সেটিংসে গিয়ে ডার্ক থিম বন্ধ করতে পারেন।

অরিজিন ট্রায়ালের জন্য সাইন-আপ করা

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

কীভাবে অরিজিন ট্রায়াল সেট-আপ করতে হয় তা জানতে ডকুমেন্টেশন দেখুন, তারপর টোকেন পেতে AutoDarkMode অরিজিন ট্রায়ালের জন্য সাইন-আপ করুন।

আপনার ডিভাইসে অটোমেটিক ডার্ক থিম পরীক্ষা করুন

DevTools সহ

DevTools-এ অটোমেটিক ডার্ক থিম চালু করতে:

  1. তিন ডট মেনুতে ক্লিক করুন।
  2. আরও টুল তারপর রেন্ডারিং বিকল্প বেছে নিন।
  3. অটোমেটিক ডার্ক মোড এমুলেট করুন বিকল্পে চালু করুন বিকল্প বেছে নিন।

Android ফোনে

আপনার Android ফোনে অটোমেটিক ডার্ক থিম টেস্ট করতে:

  1. chrome://flags-এ নেভিগেট করুন এবং #darken-websites-checkbox-in-theme-setting এক্সপেরিমেন্ট চালু করুন।
  2. তারপর, তিন ডট মেনুতে ট্যাপ করে সেটিংস ও তারপর থিম বিকল্প বেছে নিন এবং সম্ভব হলে, সাইটে ডার্ক থিম প্রয়োগ করুন বিকল্পের পাশে থাকা বক্সে টিকচিহ্ন দিন।

এখন, ফোনে হালকা রঙের পৃষ্ঠাগুলি অন্ধকার হয়ে যাবে।

এলিমেন্ট-ভিত্তিক কাস্টমাইজেশন

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

এই অরিজিন ট্রায়ালে, ব্যবহারকারী অটো ডার্ক থিম ব্যবহার করছেন কিনা তা শনাক্ত করতে জাভাস্ক্রিপ্ট ব্যবহার করে এবং তারপরে পছন্দসই এলিমেন্ট কাস্টমাইজ করে সেই কাস্টমাইজেশন করা সম্ভব।

অটোমেটিক ডার্ক থিম শনাক্ত করা হচ্ছে

ব্যবহারকারী অটোমেটিক ডার্ক থিম ব্যবহার করছেন কিনা তা শনাক্ত করতে, background-color-এর মান canvas এবং কালার-স্কিম লাইট হিসেবে সেট করে একটি এলিমেন্ট তৈরি করুন। ব্যাকগ্রাউন্ডের জন্য গণনা করা রঙ সাদা (rgb(255, 255, 255)) ছাড়া অন্য কিছু হলে, পৃষ্ঠায় অটোমেটিক ডার্ক থিম প্রয়োগ করা হয়।

<div id="detection"
     style="display: none; background-color: canvas; color>-<sche>me: light"
/div

const detectionDiv = document.querySelector('#detection');
// If the computed style is not white then the page is in Auto Dark Theme.
const isAutoDark = getComputedStyle(detectionDiv).backgroundColor != 'rgb(255, 255, 255)';
// Update element styles when Auto Dark Theme is applied.
if (isAutoDark) {
  const myElement = document.querySelector('#my-element');
  myElement.classList.add('autoDarkOnlyStyle');
}

অনেকগুলি এলিমেন্ট কাস্টমাইজ করা

আপনি যদি আরও বেশি সংখ্যক এলিমেন্ট কাস্টমাইজ করতে চান, তাহলে উপরের সমাধানটি স্কেল করা কঠিন হতে পারে। বিকল্প হিসেবে, পৃষ্ঠার বডিতে মার্কার ক্লাস যোগ করতে অটোমেটিক ডার্ক থিম শনাক্তকরণ ব্যবহার করুন:

function setAutoDarkClass() {
  // We can also use JavaScript to generate the detection element.
  const detectionDiv = document.createElement('div');
  detectionDiv.style.display = 'none';
  detectionDiv.style.backgroundColor = 'canvas';
  detectionDiv.style.colorScheme = 'light';
  document.body.appendChild(detectionDiv);
  // If the computed style is not white then the page is in Auto Dark Theme.
  const isAutoDark = getComputedStyle(detectionDiv).backgroundColor != 'rgb(255, 255, 255)';

  // remove the detection element from the DOM.
  document.body.removeChild(detectionDiv);

  // Set the marker class on the body if in Auto Dark Theme.
  if (isAutoDark) {
    document.body.classList.add('auto-dark-theme');
  }
}
document.addEventListener("DOMContentLoaded", setAutoDarkClass);

তারপর, প্রয়োজন অনুযায়ী এলিমেন্ট কাস্টমাইজ করতে CSS ব্যবহার করুন:

.auto-dark-theme > #my-element {
  border-color: red;
}

প্রতিটি এলিমেন্ট কাস্টমাইজ করার API এখনও প্রাথমিক ডেভেলপমেন্টের পর্যায়ে রয়েছে। আমরা স্ট্যান্ডার্ড টিমের সাথে কাজ করছি যাতে ডেভেলপারদের অপ্ট-আউট করার জন্য আরও বেশি এক্সপ্রেসিভ API প্রদান করা যায়। আপনি এই GitHub সমস্যা-তে কথোপকথন ফলো করতে পারবেন।

অটোমেটিক ডার্ক থিম কীভাবে বন্ধ করবেন

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

তবে, আপনার নিজস্ব ডার্ক থিম প্রয়োগ করা সম্ভব না হলে এবং অটো ডার্ক থিমের মাধ্যমে তৈরি করা ফলাফল সন্তোষজনক না হলে, এই ফিচার থেকে অপ্ট-আউট করা সম্ভব,

মেটা ট্যাগ ব্যবহার করা

অটোমেটিক ডার্ক থিম থেকে অপ্ট-আউট করার প্রথম বিকল্প হল আপনার পৃষ্ঠার হেডারে নিম্নলিখিত মেটা ট্যাগ যোগ করা। মেটা ট্যাগ ব্যবহার করার সুবিধা হল, এটি অটোমেটিক ডার্ক থিম প্রয়োগ করা থেকে সম্পূর্ণভাবে আটকায়, যার ফলে "ডার্ক কন্টেন্টের ফ্ল্যাশ" হতে পারে।

<head>
  <meta name="color-scheme" content=&q>uot;onl<y lig>ht"
  ...
/head

প্রতিটি এলিমেন্ট থেকে বেরিয়ে আসা

অপ্ট-আউট করার দ্বিতীয় বিকল্প হল color-scheme CSS প্রপার্টির ভ্যালু only light-এ সেট করা। যদিও অটোমেটিক ডার্ক মোড থেকে পুরো পৃষ্ঠাটি অপ্ট-আউট করতে প্রতি-এলিমেন্ট অপ্ট-আউট ব্যবহার করা যেতে পারে, এই পদ্ধতির একটি সুবিধা হল যে এটি পৃষ্ঠার শুধুমাত্র নির্দিষ্ট অংশ অপ্ট-আউট করার অনুমতি দেয়:

#my-element {
  color-scheme: only light;
}

:root এলিমেন্টে কালার-স্কিম সেট করে অটোমেটিক ডার্ক থিম থেকে সম্পূর্ণ পৃষ্ঠা অপ্ট-আউট করার জন্য এখনও এই পদ্ধতি ব্যবহার করা সম্ভব:

:root {
  color-scheme: only light;
}

আমাদের মতামত জানান!

অটোমেটিক ডার্ক থিম এখনও নির্দিষ্ট করা হচ্ছে, এবং আমরা বাস্তবায়নের সব ক্ষেত্রে মতামত খুঁজছি: ডার্কেনিং অ্যালগরিদমের ফলাফল থেকে শুরু করে এলিমেন্ট কাস্টমাইজেশন এবং অপ্ট-আউটের জন্য ডেভেলপার API পর্যন্ত।

আপনি অনেক চ্যানেলের মাধ্যমে আমাদের মতামত পাঠাতে পারেন:

Félix Besombes-এর তোলা ফটো।