অটো ডার্ক থিম

আন্দ্রে সিপ্রিয়ানি বান্দারা

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

মূল বিচারের জন্য সাইন আপ করুন

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

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

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

DevTools সহ

DevTools-এ অটো ডার্ক থিম সক্ষম করতে:

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

একটি অ্যান্ড্রয়েড ফোনে

আপনার অ্যান্ড্রয়েড ফোনে অটো ডার্ক থিম পরীক্ষা করতে:

  1. chrome://flags এ নেভিগেট করুন এবং #darken-websites-checkbox-in-theme-setting পরীক্ষা সক্ষম করুন৷
  2. তারপরে, তিনটি বিন্দুর মেনুতে আলতো চাপুন, সেটিংস তারপর থিম নির্বাচন করুন এবং যখন সম্ভব সাইটগুলিতে গাঢ় থিম প্রয়োগ করুন সহ বাক্সটি চেক করুন৷

এখন, ফোনে হালকা পাতা অন্ধকার হয়ে যাবে।

প্রতি-উপাদান কাস্টমাইজেশন

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

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

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

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

<div id="detection"
     style="display: none; background-color: canvas; color-scheme: 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="only light">
  ...
</head>

প্রতি উপাদান অপ্ট-আউট

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

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

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

:root {
  color-scheme: only light;
}

আমাদের প্রতিক্রিয়া পাঠান!

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

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

ফেলিক্স বেসোমবেসের ছবি।