prefers-color-scheme: হ্যালো অন্ধকার, আমার পুরানো বন্ধু

অতিরঞ্জিত নাকি প্রয়োজনীয়তা? ডার্ক মোড সম্পর্কে সবকিছু জানুন এবং আপনার ব্যবহারকারীদের সুবিধার জন্য কীভাবে এটিকে সমর্থন করবেন তা শিখুন!

Thomas Steiner

ভূমিকা

ডার্ক মোডের আগে ডার্ক মোড

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

পরবর্তীকালে প্রবর্তিত কালার সিআরটি-গুলো লাল, সবুজ এবং নীল ফসফর ব্যবহারের মাধ্যমে একাধিক রঙ প্রদর্শন করত। এগুলো একই সাথে তিনটি ফসফর সক্রিয় করে সাদা রঙ তৈরি করত। আরও উন্নত WYSIWYG ডেস্কটপ পাবলিশিং- এর আবির্ভাবের সাথে সাথে, ভার্চুয়াল ডকুমেন্টকে একটি বাস্তব কাগজের মতো করে তোলার ধারণাটি জনপ্রিয় হয়ে ওঠে।

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

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

ডার্ক মোড কেন

নান্দনিক কারণে ডার্ক মোড

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

অ্যাক্সেসিবিলিটি টুল হিসেবে ডার্ক মোড

এমন কিছু মানুষও আছেন যাদের আসলেই ডার্ক মোডের প্রয়োজন এবং তারা এটিকে আরেকটি অ্যাক্সেসিবিলিটি টুল হিসেবে ব্যবহার করেন, যেমন স্বল্প দৃষ্টিসম্পন্ন ব্যবহারকারীরা। আমি এই ধরনের অ্যাক্সেসিবিলিটি টুলের সবচেয়ে পুরোনো যে উদাহরণটি খুঁজে পেয়েছি তা হলো সিস্টেম ৭ -এর ক্লোজভিউ (CloseView) ফিচার, যেটিতে সাদার উপর কালো এবং কালোর উপর সাদার জন্য একটি টগল ছিল। যদিও সিস্টেম ৭ রঙিন লেখা সমর্থন করত, এর ডিফল্ট ইউজার ইন্টারফেসটি তখনও সাদা-কালোই ছিল।

রঙ যুক্ত করার পর এই ইনভার্সন-ভিত্তিক বাস্তবায়নগুলো তাদের দুর্বলতা প্রকাশ করে। স্বল্প দৃষ্টিসম্পন্ন ব্যক্তিরা কীভাবে কম্পিউটিং ডিভাইস ব্যবহার করেন, সে বিষয়ে স্পিরো ও তার সহযোগীদের করা ব্যবহারকারী গবেষণায় দেখা গেছে যে, সাক্ষাৎকার দেওয়া সকল ব্যবহারকারীই উল্টানো ছবি অপছন্দ করেন, কিন্তু অনেকেই গাঢ় পটভূমিতে হালকা রঙের লেখা পছন্দ করেন। অ্যাপল ‘স্মার্ট ইনভার্ট’ নামক একটি ফিচারের মাধ্যমে ব্যবহারকারীদের এই পছন্দের বিষয়টি বিবেচনা করে, যা ছবি, মিডিয়া এবং গাঢ় রঙের স্টাইল ব্যবহারকারী কিছু অ্যাপ ছাড়া ডিসপ্লের রঙগুলোকে উল্টে দেয়।

স্বল্প দৃষ্টির একটি বিশেষ রূপ হলো কম্পিউটার ভিশন সিন্ড্রোম, যা ডিজিটাল আই স্ট্রেইন নামেও পরিচিত। একে "কম্পিউটার (ডেস্কটপ, ল্যাপটপ এবং ট্যাবলেট সহ) এবং অন্যান্য ইলেকট্রনিক ডিসপ্লে (যেমন স্মার্টফোন এবং ইলেকট্রনিক রিডিং ডিভাইস) ব্যবহারের সাথে সম্পর্কিত চোখ ও দৃষ্টিশক্তির সমস্যার সমষ্টি" হিসাবে সংজ্ঞায়িত করা হয়। এটি প্রস্তাব করা হয়েছে যে কিশোর-কিশোরীদের দ্বারা ইলেকট্রনিক ডিভাইস ব্যবহার, বিশেষ করে রাতে, ঘুমের সময়কাল কমে যাওয়া, ঘুম আসতে দেরি হওয়া এবং ঘুমের ঘাটতি বৃদ্ধির ঝুঁকি বাড়ায়। এছাড়াও, রোজেনফিল্ডের গবেষণা অনুসারে, সার্কাডিয়ান রিদম এবং ঘুমচক্র নিয়ন্ত্রণে নীল আলোর ভূমিকা রয়েছে বলে ব্যাপকভাবে জানা গেছে এবং অনিয়মিত আলোর পরিবেশ ঘুমের অভাব ঘটাতে পারে, যা সম্ভবত মেজাজ এবং কাজের পারফরম্যান্সকে প্রভাবিত করে। এই নেতিবাচক প্রভাবগুলো সীমিত করতে, iOS-এর নাইট শিফট বা অ্যান্ড্রয়েডের নাইট লাইটের মতো ফিচারের মাধ্যমে ডিসপ্লের কালার টেম্পারেচার সামঞ্জস্য করে নীল আলো কমানো সহায়ক হতে পারে, পাশাপাশি ডার্ক থিম বা ডার্ক মোডের মাধ্যমে উজ্জ্বল আলো বা সাধারণভাবে অনিয়মিত আলো এড়িয়ে চলাও সাহায্য করে।

AMOLED স্ক্রিনে ডার্ক মোডে বিদ্যুৎ সাশ্রয়

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

অপারেটিং সিস্টেমে ডার্ক মোড সক্রিয় করা

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

যেসব অপারেটিং সিস্টেমে ডার্ক মোড বা ডার্ক থিম সাপোর্ট করে, সেগুলোর সেটিংসে সাধারণত এটি চালু করার একটি অপশন থাকে। macOS X-এ, এটি সিস্টেম প্রেফারেন্সের ' জেনারেল' সেকশনে ' অ্যাপিয়ারেন্স' নামে থাকে ( স্ক্রিনশট ), এবং Windows 10-এ, এটি 'কালারস' সেকশনে ' চুজ ইওর কালার' নামে থাকে ( স্ক্রিনশট )। Android Q-এর জন্য, আপনি এটিকে 'ডিসপ্লে'- এর অধীনে একটি ডার্ক থিম টগল সুইচ হিসেবে খুঁজে পাবেন ( স্ক্রিনশট ), এবং iOS 13-এ, আপনি সেটিংসের 'ডিসপ্লে অ্যান্ড ব্রাইটনেস' সেকশনে এর 'অ্যাপিয়ারেন্স' পরিবর্তন করতে পারেন ( স্ক্রিনশট )।

prefers-color-scheme মিডিয়া কোয়েরি

শুরু করার আগে শেষ একটি তাত্ত্বিক আলোচনা। মিডিয়া কোয়েরি লেখকদেরকে রেন্ডার করা ডকুমেন্ট থেকে স্বাধীনভাবে ইউজার এজেন্ট বা ডিসপ্লে ডিভাইসের মান বা বৈশিষ্ট্য পরীক্ষা ও কোয়েরি করার সুযোগ দেয়। এগুলি CSS-এর @media রুলে একটি ডকুমেন্টে শর্তসাপেক্ষে স্টাইল প্রয়োগ করতে এবং HTML ও জাভাস্ক্রিপ্টের মতো বিভিন্ন প্রেক্ষাপট ও ভাষায় ব্যবহৃত হয়। মিডিয়া কোয়েরি লেভেল ৫ তথাকথিত ইউজার প্রেফারেন্স মিডিয়া ফিচার নিয়ে আসে, অর্থাৎ, সাইটগুলির জন্য এটি এমন একটি উপায় যার মাধ্যমে ব্যবহারকারীর কন্টেন্ট প্রদর্শনের পছন্দের পদ্ধতিটি শনাক্ত করা যায়।

ব্যবহারকারী পৃষ্ঠাটির জন্য হালকা নাকি গাঢ় রঙের থিম ব্যবহার করতে অনুরোধ করেছেন, তা শনাক্ত করতে prefers-color-scheme মিডিয়া ফিচারটি ব্যবহৃত হয়। এটি নিম্নলিখিত মানগুলির সাথে কাজ করে:

• light : এটি নির্দেশ করে যে ব্যবহারকারী সিস্টেমকে জানিয়েছেন যে তিনি একটি হালকা থিমের (হালকা পটভূমিতে গাঢ় লেখা) পৃষ্ঠা পছন্দ করেন।
• dark : এটি নির্দেশ করে যে ব্যবহারকারী সিস্টেমকে জানিয়েছেন যে তিনি ডার্ক থিমের (গাঢ় পটভূমিতে হালকা রঙের লেখা) একটি পৃষ্ঠা পছন্দ করেন।

ডার্ক মোড সমর্থন করে

ব্রাউজারটি ডার্ক মোড সমর্থন করে কিনা তা খুঁজে বের করা

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

if (window.matchMedia('(prefers-color-scheme)').media !== 'not all') {
  console.log('🎉 Dark mode is supported');
}

এই লেখাটি লেখার সময়, prefers-color-scheme ফিচারটি ডেস্কটপ এবং মোবাইল (যেখানে উপলব্ধ) উভয়ের জন্যই Chrome ও Edge-এর ৭৬তম সংস্করণ থেকে, Firefox-এর ৬৭তম সংস্করণ থেকে, এবং Safari-এর macOS-এর জন্য ১২.১তম সংস্করণ থেকে ও iOS-এর জন্য ১৩তম সংস্করণ থেকে সমর্থিত। অন্য সব ব্রাউজারের জন্য, আপনি “ Can I use support tables” ডকুমেন্টটি দেখতে পারেন।

অনুরোধের সময় ব্যবহারকারীর পছন্দ সম্পর্কে জানা

Sec-CH-Prefers-Color-Scheme ক্লায়েন্ট হিন্ট হেডারটি সাইটগুলোকে অনুরোধের সময় ঐচ্ছিকভাবে ব্যবহারকারীর কালার স্কিমের পছন্দগুলো সংগ্রহ করার সুযোগ দেয়, যার ফলে সার্ভারগুলো সঠিক CSS ইনলাইন করতে পারে এবং ভুল কালার থিমের আকস্মিক ঝলকানি এড়াতে পারে।

বাস্তবে ডার্ক মোড

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

• style.css ফাইলে এমন সাধারণ নিয়মাবলী রয়েছে যা সাইট জুড়ে সর্বজনীনভাবে ব্যবহৃত হয়।
• dark.css ফাইলটিতে শুধুমাত্র ডার্ক মোডের জন্য প্রয়োজনীয় নিয়মগুলো রয়েছে।
• light.css ফাইলটিতে শুধুমাত্র লাইট মোডের জন্য প্রয়োজনীয় নিয়মগুলো রয়েছে।

লোডিং কৌশল

শেষের দুটি ফাইল, light.css এবং dark.css , একটি <link media> কোয়েরির মাধ্যমে শর্তসাপেক্ষে লোড করা হয়। প্রাথমিকভাবে, সব ব্রাউজার prefers-color-scheme সাপোর্ট করে না (যা উপরের প্যাটার্নটি দেখে বোঝা যায়), যার সমাধান আমি ডাইনামিকভাবে করি। এর জন্য আমি একটি অতি ক্ষুদ্র ইনলাইন স্ক্রিপ্টে শর্তসাপেক্ষে একটি <link rel="stylesheet"> এলিমেন্ট যুক্ত করে ডিফল্ট light.css ফাইলটি লোড করি (light রঙটি এখানে ইচ্ছামতো বেছে নেওয়া হয়েছে, আমি dark-কেও ডিফল্ট ফলব্যাক হিসেবে রাখতে পারতাম)। স্টাইলবিহীন কন্টেন্টের ঝলকানি এড়ানোর জন্য, light.css লোড না হওয়া পর্যন্ত আমি পেজের কন্টেন্ট লুকিয়ে রাখি।

<script>
  // If `prefers-color-scheme` is not supported, fall back to light mode.
  // In this case, light.css will be downloaded with `highest` priority.
  if (window.matchMedia('(prefers-color-scheme: dark)').media === 'not all') {
    document.documentElement.style.display = 'none';
    document.head.insertAdjacentHTML(
      'beforeend',
      '<link rel="stylesheet" href="/light.css" onload="document.documentElement.style.display = \'\'">',
    );
  }
</script>
<!--
  Conditionally either load the light or the dark stylesheet. The matching file
  will be downloaded with `highest`, the non-matching file with `lowest`
  priority. If the browser doesn't support `prefers-color-scheme`, the media
  query is unknown and the files are downloaded with `lowest` priority (but
  above I already force `highest` priority for my default light experience).
-->
<link rel="stylesheet" href="/dark.css" media="(prefers-color-scheme: dark)" />
<link
  rel="stylesheet"
  href="/light.css"
  media="(prefers-color-scheme: light)"
/>
<!-- The main stylesheet -->
<link rel="stylesheet" href="/style.css" />

স্টাইলশিট স্থাপত্য

আমি CSS ভ্যারিয়েবলের সর্বোচ্চ ব্যবহার করি, যা আমার সাধারণ style.css সাধারণই থাকতে সাহায্য করে এবং লাইট বা ডার্ক মোডের সমস্ত কাস্টমাইজেশন dark.css ও light.css অন্য দুটি ফাইলে করা হয়। নিচে আপনি আসল স্টাইলগুলোর একটি অংশ দেখতে পারেন, তবে এটিই মূল ধারণাটি বোঝানোর জন্য যথেষ্ট। আমি -⁠-⁠color এবং -⁠-⁠background-color দুটি ভ্যারিয়েবল ডিক্লেয়ার করি, যা মূলত একটি ডার্ক-অন-লাইট এবং একটি লাইট-অন-ডার্ক বেসলাইন থিম তৈরি করে।

/* light.css: 👉 dark-on-light */
:root {
  --color: rgb(5, 5, 5);
  --background-color: rgb(250, 250, 250);
}

/* dark.css: 👉 light-on-dark */
:root {
  --color: rgb(250, 250, 250);
  --background-color: rgb(5, 5, 5);
}

আমার style.css ফাইলে, আমি এই ভেরিয়েবলগুলো body { … } রুলের মধ্যে ব্যবহার করি। যেহেতু এগুলো :root CSS সিউডো-ক্লাসে সংজ্ঞায়িত করা থাকে—যা HTML-এ <html> এলিমেন্টকে বোঝায় এবং html সিলেক্টরের অনুরূপ, শুধু এর স্পেসিফিসিটি বেশি—তাই এগুলো নিচের দিকে ছড়িয়ে পড়ে, যা আমার জন্য গ্লোবাল CSS ভেরিয়েবল ডিক্লেয়ার করার কাজে লাগে।

/* style.css */
:root {
  color-scheme: light dark;
}

body {
  color: var(--color);
  background-color: var(--background-color);
}

উপরের কোড স্যাম্পলটিতে, আপনি সম্ভবত color-scheme একটি প্রপার্টি লক্ষ্য করেছেন, যেখানে light dark ভ্যালুটি স্পেস দিয়ে আলাদা করা আছে।

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

এরপর বাকি সবকিছুই আমার সাইটের জন্য গুরুত্বপূর্ণ বিষয়গুলোর জন্য CSS ভ্যারিয়েবল নির্ধারণ করার ব্যাপার মাত্র। ডার্ক মোড নিয়ে কাজ করার সময় স্টাইলগুলোকে অর্থগতভাবে সাজানো অনেক সাহায্য করে। উদাহরণস্বরূপ, -⁠-⁠highlight-yellow এর পরিবর্তে -⁠-⁠accent-color ভ্যারিয়েবলটির নাম দেওয়ার কথা ভাবতে পারেন, কারণ ডার্ক মোডে "yellow" রঙটি হয়তো হলুদ নাও থাকতে পারে বা এর উল্টোটাও হতে পারে। নিচে আমার উদাহরণে ব্যবহৃত আরও কিছু ভ্যারিয়েবলের একটি নমুনা দেওয়া হলো।

/* dark.css */
:root {
  --color: rgb(250, 250, 250);
  --background-color: rgb(5, 5, 5);
  --link-color: rgb(0, 188, 212);
  --main-headline-color: rgb(233, 30, 99);
  --accent-background-color: rgb(0, 188, 212);
  --accent-color: rgb(5, 5, 5);
}

/* light.css */
:root {
  --color: rgb(5, 5, 5);
  --background-color: rgb(250, 250, 250);
  --link-color: rgb(0, 0, 238);
  --main-headline-color: rgb(0, 0, 192);
  --accent-background-color: rgb(0, 0, 238);
  --accent-color: rgb(250, 250, 250);
}

সম্পূর্ণ উদাহরণ

নিচের গ্লিচ এমবেডটিতে, আপনি একটি সম্পূর্ণ উদাহরণ দেখতে পাবেন যেখানে উপরের ধারণাগুলোকে বাস্তবে প্রয়োগ করা হয়েছে। আপনার নির্দিষ্ট অপারেটিং সিস্টেমের সেটিংসে ডার্ক মোড চালু বা বন্ধ করে দেখুন পৃষ্ঠাটি কীভাবে প্রতিক্রিয়া দেখায়।

লোডিং প্রভাব

এই উদাহরণটি নিয়ে কাজ করলে আপনি বুঝতে পারবেন, কেন আমি মিডিয়া কোয়েরির মাধ্যমে আমার dark.css এবং light.css লোড করি। ডার্ক মোড টগল করে পেজটি রিলোড করে দেখুন: বর্তমানে যে নির্দিষ্ট স্টাইলশিটগুলো মিলছে না, সেগুলো ঠিকই লোড হবে, কিন্তু সর্বনিম্ন প্রায়োরিটিতে, যাতে সেগুলো সাইটের জন্য এই মুহূর্তে প্রয়োজনীয় রিসোর্সের সাথে কখনো প্রতিযোগিতা না করে।

ডার্ক মোড পরিবর্তনের প্রতিক্রিয়া

অন্যান্য মিডিয়া কোয়েরি পরিবর্তনের মতোই, জাভাস্ক্রিপ্টের মাধ্যমে ডার্ক মোড পরিবর্তনেও সাবস্ক্রাইব করা যায়। উদাহরণস্বরূপ, এটি ব্যবহার করে আপনি কোনো পেজের ফেভিকন ডাইনামিকভাবে পরিবর্তন করতে পারেন অথবা ক্রোমের ইউআরএল বারের রঙ নির্ধারণকারী <meta name="theme-color"> পরিবর্তন করতে পারেন। উপরের সম্পূর্ণ উদাহরণটিতে এটি কীভাবে কাজ করে তা দেখানো হয়েছে; থিমের রঙ এবং ফেভিকনের পরিবর্তনগুলো দেখতে, ডেমোটি একটি আলাদা ট্যাবে খুলুন।

const darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
darkModeMediaQuery.addEventListener('change', (e) => {
  const darkModeOn = e.matches;
  console.log(`Dark mode is ${darkModeOn ? '🌒 on' : '☀️ off'}.`);
});

ক্রোমিয়াম ৯৩ এবং সাফারি ১৫ থেকে, আপনি meta থিম কালার এলিমেন্টের media অ্যাট্রিবিউট ব্যবহার করে মিডিয়া কোয়েরির মাধ্যমে রঙ পরিবর্তন করতে পারেন। যেটি প্রথমে মিলবে, সেটিই বেছে নেওয়া হবে। উদাহরণস্বরূপ, আপনি লাইট মোডের জন্য একটি রঙ এবং ডার্ক মোডের জন্য আরেকটি রঙ রাখতে পারেন। এই লেখাটি লেখার সময়, আপনি আপনার ম্যানিফেস্টে এগুলো নির্ধারণ করতে পারবেন না। w3c/manifest#975 গিটহাব ইস্যুটি দেখুন।

<meta
  name="theme-color"
  media="(prefers-color-scheme: light)"
  content="white"
/>
<meta name="theme-color" media="(prefers-color-scheme: dark)" content="black" />

ডার্ক মোড ডিবাগিং এবং টেস্টিং

DevTools-এ prefers-color-scheme অনুকরণ করা

পুরো অপারেটিং সিস্টেমের কালার স্কিম পরিবর্তন করা খুব দ্রুতই বিরক্তিকর হয়ে উঠতে পারে, তাই Chrome DevTools এখন ব্যবহারকারীর পছন্দের কালার স্কিম অনুকরণ করার সুযোগ দেয়, যা শুধুমাত্র বর্তমানে দৃশ্যমান ট্যাবটিকেই প্রভাবিত করে। Command Menu খুলুন, Rendering টাইপ করা শুরু করুন, Show Rendering কমান্ডটি চালান, এবং তারপর Emulate CSS media feature-এর prefers-color-scheme অপশনটি পরিবর্তন করুন।

পাপেটিয়ার দিয়ে স্ক্রিনশট নেওয়ার ক্ষেত্রে prefers-color-scheme

পাপেটিয়ার হলো একটি Node.js লাইব্রেরি যা ডেভটুলস প্রোটোকলের মাধ্যমে ক্রোম বা ক্রোমিয়াম নিয়ন্ত্রণ করার জন্য একটি উচ্চ-স্তরের এপিআই প্রদান করে। dark-mode-screenshot সাথে আমরা একটি পাপেটিয়ার স্ক্রিপ্ট দিই, যা দিয়ে আপনি আপনার পেজগুলোর ডার্ক এবং লাইট উভয় মোডে স্ক্রিনশট নিতে পারবেন। আপনি এই স্ক্রিপ্টটি একবারের জন্য চালাতে পারেন, অথবা এটিকে আপনার কন্টিনিউয়াস ইন্টিগ্রেশন (CI) টেস্ট স্যুটের অংশ করে নিতে পারেন।

npx dark-mode-screenshot --url https://googlechromelabs.github.io/dark-mode-toggle/demo/ --output screenshot --fullPage --pause 750

ডার্ক মোডের সেরা অনুশীলন

বিশুদ্ধ সাদা এড়িয়ে চলুন

একটি ছোট বিষয় যা আপনি হয়তো লক্ষ্য করেছেন, তা হলো আমি নিখুঁত সাদা ব্যবহার করি না। এর পরিবর্তে, চারপাশের গাঢ় কন্টেন্টের উপর রঙ যাতে উজ্জ্বল বা ছড়িয়ে না পড়ে, সেজন্য আমি সামান্য গাঢ় সাদা রঙ বেছে নিই। rgb(250, 250, 250) মতো কোনো শেড এক্ষেত্রে ভালোভাবে কাজ করে।

ফটোগ্রাফিক চিত্রগুলিকে পুনরায় রঙিন এবং গাঢ় করুন

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

আমার ছবিগুলোতে একটি CSS ফিল্টার ব্যবহার করে পুনরায় রঙ করা যায়। আমি এমন একটি CSS সিলেক্টর ব্যবহার করি যা সেই সমস্ত ছবির সাথে মেলে যাদের URL-এ .svg নেই। এর পেছনের উদ্দেশ্য হলো, আমি যেন ভেক্টর গ্রাফিক্সকে (আইকন) আমার ছবিগুলোর (ফটো) চেয়ে ভিন্নভাবে পুনরায় রঙ করতে পারি; এ বিষয়ে পরের অনুচ্ছেদে আরও আলোচনা করা হবে। লক্ষ্য করুন, আমি এখানেও একটি CSS ভ্যারিয়েবল ব্যবহার করেছি, যাতে আমি পরবর্তীতে সুবিধামতো আমার ফিল্টারটি পরিবর্তন করতে পারি।

যেহেতু শুধুমাত্র ডার্ক মোডে, অর্থাৎ dark.css সক্রিয় থাকলেই, রঙ পরিবর্তনের প্রয়োজন হয়, তাই light.css এ এর জন্য কোনো অনুরূপ নিয়ম নেই।

/* dark.css */
--image-filter: grayscale(50%);

img:not([src*='.svg']) {
  filter: var(--image-filter);
}

জাভাস্ক্রিপ্ট ব্যবহার করে ডার্ক মোডের পুনঃরঙকরণের তীব্রতা কাস্টমাইজ করা

সবাই একরকম নয় এবং প্রত্যেকের ডার্ক মোডের চাহিদা ভিন্ন ভিন্ন হয়। উপরে বর্ণিত পুনঃরঙকরণ পদ্ধতিটি অনুসরণ করে, আমি সহজেই গ্রেস্কেল ইনটেনসিটিকে একটি ইউজার প্রেফারেন্সে পরিণত করতে পারি যা আমি জাভাস্ক্রিপ্টের মাধ্যমে পরিবর্তন করতে পারব, এবং এর মান 0% সেট করে আমি পুনঃরঙকরণ সম্পূর্ণরূপে নিষ্ক্রিয়ও করতে পারি। উল্লেখ্য যে, document.documentElement ডকুমেন্টের রুট এলিমেন্টের একটি রেফারেন্স প্রদান করে, অর্থাৎ, সেই একই এলিমেন্ট যা আমি :root CSS সিউডো-ক্লাস দিয়ে রেফারেন্স করতে পারি।

const filter = 'grayscale(70%)';
document.documentElement.style.setProperty('--image-filter', value);

ভেক্টর গ্রাফিক্স এবং আইকনগুলি উল্টে দিন

ভেক্টর গ্রাফিক্সের জন্য—যা আমি <img> এলিমেন্টের মাধ্যমে আইকন হিসেবে ব্যবহার করি—আমি একটি ভিন্ন পুনঃরঙকরণ পদ্ধতি ব্যবহার করি। যদিও গবেষণায় দেখা গেছে যে মানুষ ছবির ক্ষেত্রে ইনভার্সন পছন্দ করে না, তবে এটি বেশিরভাগ আইকনের জন্য বেশ ভালোভাবে কাজ করে। এক্ষেত্রেও আমি সাধারণ এবং :hover অবস্থায় ইনভার্সনের পরিমাণ নির্ধারণ করতে CSS ভ্যারিয়েবল ব্যবহার করি।

লক্ষ্য করুন, আমি কীভাবে আবারও শুধুমাত্র dark.css এ আইকন ইনভার্ট করি, কিন্তু light.css এ করি না, এবং কীভাবে ব্যবহারকারীর নির্বাচিত মোডের উপর নির্ভর করে আইকনটিকে সামান্য গাঢ় বা সামান্য উজ্জ্বল দেখানোর জন্য, এই দুটি ক্ষেত্রে :hover ভিন্ন ইনভার্সন ইনটেনসিটি ব্যবহার করে।

/* dark.css */
--icon-filter: invert(100%);
--icon-filter_hover: invert(40%);

img[src*='.svg'] {
  filter: var(--icon-filter);
}

/* light.css */
--icon-filter_hover: invert(60%);

/* style.css */
img[src*='.svg']:hover {
  filter: var(--icon-filter_hover);
}

ইনলাইন SVG-এর জন্য currentColor ব্যবহার করুন

ইনলাইন SVG ইমেজের জন্য, ইনভার্সন ফিল্টার ব্যবহার করার পরিবর্তে, আপনি currentColor CSS কীওয়ার্ডটি ব্যবহার করতে পারেন, যা একটি এলিমেন্টের ` color প্রপার্টির মানকে নির্দেশ করে। এর ফলে আপনি সেইসব প্রপার্টিতে color ভ্যালুটি ব্যবহার করতে পারবেন, যেগুলো ডিফল্টভাবে এটি পায় না। সুবিধাজনকভাবে, যদি currentColor SVG-এর fill বা stroke অ্যাট্রিবিউটের ভ্যালু হিসেবে ব্যবহার করা হয়, তবে এটি `color` প্রপার্টির উত্তরাধিকারসূত্রে প্রাপ্ত ভ্যালু থেকে তার মান গ্রহণ করে। আরও ভালো ব্যাপার হলো: এটি <svg><use href="…"></svg> জন্যও কাজ করে, ফলে আপনি আলাদা রিসোর্স ব্যবহার করলেও currentColor কনটেক্সটের মধ্যেই প্রয়োগ হবে। অনুগ্রহ করে মনে রাখবেন যে, এটি শুধুমাত্র ইনলাইন বা <use href="…"> ` ট্যাগযুক্ত SVG-এর ক্ষেত্রেই কাজ করে, কিন্তু সেইসব SVG-এর ক্ষেত্রে নয় যেগুলো কোনো ইমেজের src হিসেবে বা কোনোভাবে CSS-এর মাধ্যমে রেফারেন্স করা হয়েছে। নিচের ডেমোতে আপনি এর প্রয়োগ দেখতে পারেন।

<!-- Some inline SVG -->
<svg xmlns="http://www.w3.org/2000/svg"
    stroke="currentColor"
>
  […]
</svg>

মোডগুলির মধ্যে মসৃণ রূপান্তর

ডার্ক মোড থেকে লাইট মোডে বা এর বিপরীতে পরিবর্তনকে মসৃণ করা যায়, কারণ color এবং background-color উভয়ই অ্যানিমেটযোগ্য CSS প্রপার্টি । এই দুটি প্রপার্টির জন্য দুটি transition ' ডিক্লেয়ার করলেই অ্যানিমেশন তৈরি করা যায়। নিচের উদাহরণটি পুরো ধারণাটি ব্যাখ্যা করে, আপনি ডেমোতে এটি সরাসরি অভিজ্ঞতা করতে পারেন।

body {
  --duration: 0.5s;
  --timing: ease;

  color: var(--color);
  background-color: var(--background-color);

  transition: color var(--duration) var(--timing), background-color var(
        --duration
      ) var(--timing);
}

ডার্ক মোড সহ শিল্প নির্দেশনা

যদিও লোডিং পারফরম্যান্সের কারণে আমি সাধারণত <link> এলিমেন্টের media অ্যাট্রিবিউটে prefers-color-scheme ব্যবহার করার পরামর্শ দিই (স্টাইলশিটে ইনলাইন ব্যবহারের পরিবর্তে), এমন কিছু পরিস্থিতি আছে যেখানে আপনি আপনার HTML কোডে সরাসরি ইনলাইন prefers-color-scheme ব্যবহার করতে চাইতে পারেন। আর্ট ডিরেকশন এমনই একটি পরিস্থিতি। ওয়েবে, আর্ট ডিরেকশন একটি পেজের সামগ্রিক ভিজ্যুয়াল চেহারা এবং এটি কীভাবে দৃশ্যগতভাবে ভাব প্রকাশ করে, মেজাজ তৈরি করে, বৈশিষ্ট্যগুলোর মধ্যে বৈপরীত্য তুলে ধরে এবং একটি নির্দিষ্ট দর্শকগোষ্ঠীকে মনস্তাত্ত্বিকভাবে আকর্ষণ করে, তা নিয়ে কাজ করে।

ডার্ক মোডের ক্ষেত্রে, কোনো নির্দিষ্ট মোডে কোন ছবিটি সবচেয়ে ভালো হবে এবং ছবির রঙ পরিবর্তন করা যথেষ্ট ভালো হবে কি না , তা ডিজাইনারের বিবেচনার উপর নির্ভর করে। <picture> এলিমেন্টের সাথে ব্যবহার করা হলে, প্রদর্শিতব্য ছবির <source> কে media অ্যাট্রিবিউটের উপর নির্ভরশীল করা যেতে পারে। নিচের উদাহরণে, আমি ডার্ক মোডের জন্য পশ্চিম গোলার্ধ এবং লাইট মোডের জন্য বা কোনো পছন্দ নির্দিষ্ট না করা হলে পূর্ব গোলার্ধ দেখিয়েছি; অন্য সব ক্ষেত্রে ডিফল্ট হিসেবে পূর্ব গোলার্ধ ব্যবহৃত হয়েছে। এটি অবশ্যই শুধুমাত্র দৃষ্টান্তমূলক উদ্দেশ্যে দেখানো হয়েছে। পার্থক্যটি দেখতে আপনার ডিভাইসে ডার্ক মোড চালু বা বন্ধ করুন।

<picture>
  <source srcset="western.webp" media="(prefers-color-scheme: dark)" />
  <source srcset="eastern.webp" media="(prefers-color-scheme: light)" />
  <img src="eastern.webp" />
</picture>

ডার্ক মোড, কিন্তু অপ্ট-আউটের একটি অপশন যোগ করুন।

উপরে ‘ডার্ক মোড কেন’ অংশে যেমন উল্লেখ করা হয়েছে, বেশিরভাগ ব্যবহারকারীর জন্য ডার্ক মোড একটি নান্দনিক পছন্দ। ফলস্বরূপ, কিছু ব্যবহারকারী হয়তো তাদের অপারেটিং সিস্টেমের UI ডার্ক মোডে রাখতে পছন্দ করেন, কিন্তু তারপরও তাদের ওয়েবপেজগুলো সেভাবেই দেখতে চান যেভাবে তারা দেখতে অভ্যস্ত। একটি চমৎকার পদ্ধতি হলো, প্রাথমিকভাবে ব্রাউজার prefers-color-scheme এর মাধ্যমে যে সংকেত পাঠায় তা মেনে চলা, কিন্তু পরে ব্যবহারকারীদেরকে ঐচ্ছিকভাবে তাদের সিস্টেম-স্তরের সেটিং পরিবর্তন করার সুযোগ দেওয়া।

<dark-mode-toggle> কাস্টম এলিমেন্ট

আপনি অবশ্যই এর জন্য কোড নিজে তৈরি করতে পারেন, কিন্তু আপনি আমার তৈরি করা একটি রেডিমেড কাস্টম এলিমেন্ট (ওয়েব কম্পোনেন্ট) ব্যবহার করতে পারেন, যা আমি ঠিক এই কাজের জন্যই তৈরি করেছি। এর নাম <dark-mode-toggle> এবং এটি আপনার পেজে একটি টগল (ডার্ক মোড: অন/অফ) অথবা একটি থিম সুইচার (থিম: লাইট/ডার্ক) যোগ করে, যা আপনি সম্পূর্ণরূপে কাস্টমাইজ করতে পারবেন। নিচের ডেমোতে এলিমেন্টটির কার্যকারিতা দেখানো হয়েছে (ওহ, এবং আমি উপরের অন্য সব উদাহরণেও 🤫 চুপিচুপি এটি ঢুকিয়ে দিয়েছি)।

<dark-mode-toggle
  legend="Theme Switcher"
  appearance="switch"
  dark="Dark"
  light="Light"
  remember="Remember this"
></dark-mode-toggle>

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

উপসংহার

ডার্ক মোড নিয়ে কাজ করা এবং একে সমর্থন করা বেশ মজার এবং এটি ডিজাইনের নতুন দিগন্ত উন্মোচন করে। আপনার কিছু ভিজিটরের জন্য, এটি আপনার সাইটটি ব্যবহার করতে না পারা এবং একজন সন্তুষ্ট ব্যবহারকারী হওয়ার মধ্যে পার্থক্য গড়ে দিতে পারে। এতে কিছু সমস্যা রয়েছে এবং সতর্কতার সাথে পরীক্ষা করা অবশ্যই প্রয়োজন, কিন্তু ডার্ক মোড নিঃসন্দেহে আপনার সকল ব্যবহারকারীর প্রতি আপনার যত্নশীলতা দেখানোর একটি দারুণ সুযোগ। এই পোস্টে উল্লেখিত সেরা অনুশীলনগুলো এবং <dark-mode-toggle> কাস্টম এলিমেন্টের মতো সহায়ক উপাদানগুলো একটি চমৎকার ডার্ক মোড অভিজ্ঞতা তৈরি করার ব্যাপারে আপনাকে আত্মবিশ্বাসী করে তুলবে। আপনি কী তৈরি করেছেন এবং এই পোস্টটি আপনার জন্য উপকারী ছিল কিনা, অথবা এটিকে আরও উন্নত করার জন্য কোনো পরামর্শ থাকলে টুইটারে আমাকে জানান । পড়ার জন্য ধন্যবাদ! 🌒

সম্পর্কিত লিঙ্ক

prefers-color-scheme মিডিয়া কোয়েরির জন্য রিসোর্স:

• ক্রোম প্ল্যাটফর্ম স্ট্যাটাস পৃষ্ঠা
• ক্রোমিয়াম বাগ
• মিডিয়া কোয়েরি লেভেল ৫ স্পেক

color-scheme মেটা ট্যাগ এবং CSS প্রপার্টির জন্য রিসোর্স:

• color-scheme CSS প্রপার্টি এবং মেটা ট্যাগ
• ক্রোম প্ল্যাটফর্ম স্ট্যাটাস পৃষ্ঠা
• ক্রোমিয়াম বাগ
• CSS কালার অ্যাডজাস্টমেন্ট মডিউল লেভেল ১ স্পেক
• মেটা ট্যাগ এবং CSS প্রপার্টির জন্য CSS WG গিটহাব ইস্যু।
• মেটা ট্যাগের জন্য HTML WHATWG গিটহাব ইস্যু

ডার্ক মোড সম্পর্কিত সাধারণ লিঙ্কসমূহ:

• ম্যাটেরিয়াল ডিজাইন—ডার্ক থিম
• ওয়েব ইন্সপেক্টরে ডার্ক মোড
• WebKit-এ ডার্ক মোড সাপোর্ট
• অ্যাপল হিউম্যান ইন্টারফেস নির্দেশিকা—ডার্ক মোড

এই পোস্টের জন্য প্রাসঙ্গিক গবেষণা প্রবন্ধ:

• ডার্ক মোডের 'supported-color-schemes' আসলে কী কাজ করে? 🤔
• অন্ধকার নেমে আসুক! 🌚 হয়তো…
• ডার্ক মোডের জন্য পুনরায় রঙ করা

কৃতজ্ঞতা স্বীকার

prefers-color-scheme মিডিয়া ফিচার, color-scheme CSS প্রপার্টি এবং সম্পর্কিত মেটা ট্যাগটি 👏 রুন লিলিসভিন -এর বাস্তবায়ন। রুন CSS কালার অ্যাডজাস্টমেন্ট মডিউল লেভেল ১ স্পেক-এর একজন সহ-সম্পাদকও। এই নিবন্ধটির পুঙ্খানুপুঙ্খ পর্যালোচনার জন্য আমি 🙏 লুকাস জিবলুট , রোয়ান মেরেউড , চিরাগ দেসাই এবং রব ডডসনকে ধন্যবাদ জানাতে চাই। লোডিং স্ট্র্যাটেজিটি জেক আর্চিবল্ড -এর মস্তিষ্কপ্রসূত। এমিলিও কোবোস আলভারেজ আমাকে prefers-color-scheme শনাক্তকরণের সঠিক পদ্ধতির সন্ধান দিয়েছেন। রেফারেন্সকৃত SVG এবং currentColor সম্পর্কিত পরামর্শটি টিমোথি হ্যাচার-এর কাছ থেকে এসেছে। পরিশেষে, আমি বিভিন্ন ইউজার স্টাডির সেই অসংখ্য বেনামী অংশগ্রহণকারীদের প্রতি কৃতজ্ঞ, যারা এই নিবন্ধের সুপারিশগুলোকে রূপ দিতে সাহায্য করেছেন।