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

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

Thomas Steiner

ভূমিকা

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

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

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

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

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

ডার্ক মোড কেন?

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

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

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

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

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

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

AMOLED স্ক্রিনে ডার্ক মোড পাওয়ার সেভিং

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

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

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

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

prefers-color-scheme media query

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

ব্যবহারকারী পৃষ্ঠাটিকে হালকা বা গাঢ় রঙের থিম ব্যবহার করার জন্য অনুরোধ করেছেন কিনা তা সনাক্ত করতে 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 ক্রোম এবং এজ দ্বারা ডেস্কটপ এবং মোবাইলে (যেখানে উপলব্ধ) সমর্থিত 76 সংস্করণ, Firefox সংস্করণ 67 হিসাবে এবং Safari সংস্করণ 12.1 হিসাবে macOS এবং সংস্করণ 13-এ iOS-এ। অন্য সব ব্রাউজারগুলির জন্য, আপনি কি আমি সমর্থন টেবিল ব্যবহার করতে পারি চেক করতে পারেন।

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

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.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" />

স্টাইলশীট আর্কিটেকচার

আমি সিএসএস ভেরিয়েবলের সর্বাধিক ব্যবহার করি, এটি আমার জেনেরিক 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 pseudo-class- এ সংজ্ঞায়িত করা হয়েছে—একটি নির্বাচক যা HTML-এ <html> উপাদানকে উপস্থাপন করে এবং নির্বাচক html এর সাথে অভিন্ন, তবে এর নির্দিষ্টতা বেশি—এগুলি নিচে ক্যাসকেড করে, যা আমাকে গ্লোবাল সিএসএস ঘোষণা করার জন্য কাজ করে ভেরিয়েবল

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

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

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

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

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

/* 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"> পরিবর্তন করতে যা Chrome-এ URL বারের রঙ নির্ধারণ করে৷ উপরের সম্পূর্ণ উদাহরণটি এটিকে কার্যকরভাবে দেখায়, থিমের রঙ এবং ফেভিকন পরিবর্তনগুলি দেখতে, একটি পৃথক ট্যাবে ডেমো খুলুন।

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

Chromium 93 এবং Safari 15 হিসাবে, আপনি meta থিম রঙ উপাদানের media বৈশিষ্ট্যের সাথে একটি মিডিয়া কোয়েরির উপর ভিত্তি করে রঙ সামঞ্জস্য করতে পারেন। প্রথম যেটি মিলবে তাকে বাছাই করা হবে। উদাহরণস্বরূপ, আপনার হালকা মোডের জন্য একটি রঙ এবং অন্ধকার মোডের জন্য আরেকটি রঙ থাকতে পারে। লেখার সময়, আপনি আপনার ম্যানিফেস্টে সেগুলি সংজ্ঞায়িত করতে পারবেন না। w3c/manifest#975 GitHub সমস্যা দেখুন।

<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 এখন আপনাকে ব্যবহারকারীর পছন্দের রঙের স্কিমটি এমনভাবে অনুকরণ করতে দেয় যা শুধুমাত্র বর্তমানে দৃশ্যমান ট্যাবকে প্রভাবিত করে। কমান্ড মেনু খুলুন, Rendering টাইপ করা শুরু করুন, Show Rendering কমান্ডটি চালান এবং তারপর এমুলেট সিএসএস মিডিয়া বৈশিষ্ট্য পছন্দ-রঙ-স্কিম বিকল্পটি পরিবর্তন করুন।

Puppeteer-এর সাথে স্ক্রিনশট prefers-color-scheme

Puppeteer হল একটি Node.js লাইব্রেরি যা DevTools প্রোটোকলের মাধ্যমে Chrome বা Chromium নিয়ন্ত্রণ করতে একটি উচ্চ-স্তরের API প্রদান করে। 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);
}

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

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

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 মান ব্যবহার করতে দেয় যা ডিফল্টরূপে এটি গ্রহণ করে না। সুবিধাজনকভাবে, যদি SVG fill বা stroke বৈশিষ্ট্যের মান হিসাবে currentColor ব্যবহার করা হয় তবে এটি পরিবর্তে রঙের সম্পত্তির উত্তরাধিকারসূত্রে পাওয়া মান থেকে এর মান নেয়। আরও ভাল: এটি <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 এর সাথে কাজ করার পরামর্শ দিই, এমন পরিস্থিতিতে আপনি আসলে 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 মিডিয়া প্রশ্নের জন্য সম্পদ:

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

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

• color-scheme CSS প্রপার্টি এবং মেটা ট্যাগ
• Chrome প্ল্যাটফর্ম স্থিতি পৃষ্ঠা
• ক্রোমিয়াম বাগ
• CSS কালার অ্যাডজাস্টমেন্ট মডিউল লেভেল 1 স্পেক
• মেটা ট্যাগ এবং CSS সম্পত্তির জন্য CSS WG GitHub সমস্যা
• মেটা ট্যাগের জন্য HTML WHATWG GitHub সমস্যা

সাধারণ অন্ধকার মোড লিঙ্ক:

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

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

• ডার্ক মোডের "সমর্থিত-রঙ-স্কিম" আসলে কী করে? 🤔
• অন্ধকার থাকুক! 🌚 হয়তো…
• ডার্ক মোডের জন্য পুনরায় রঙিনকরণ

স্বীকৃতি

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

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

Thomas Steiner

ভূমিকা

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

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

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

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

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

ডার্ক মোড কেন?

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

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

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

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

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

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

AMOLED স্ক্রিনে ডার্ক মোড পাওয়ার সেভিং

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

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

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

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

prefers-color-scheme media query

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

ব্যবহারকারী পৃষ্ঠাটিকে হালকা বা গাঢ় রঙের থিম ব্যবহার করার জন্য অনুরোধ করেছেন কিনা তা সনাক্ত করতে 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 ডেস্কটপ এবং মোবাইল উভয় (যেখানে উপলভ্য) উভয় সংস্করণে 76 সংস্করণ হিসাবে ক্রোম এবং এজ দ্বারা সমর্থিত, সংস্করণ 67 হিসাবে ফায়ারফক্স এবং ম্যাকোসে সংস্করণ 12.1 হিসাবে সাফারি এবং সংস্করণ 13 হিসাবে আইওএসে অন্যান্য সমস্ত ব্রাউজারের জন্য, আপনি আমি সমর্থন টেবিলগুলি ব্যবহার করতে পারেন তা পরীক্ষা করতে পারেন।

অনুরোধের সময় কোনও ব্যবহারকারীর পছন্দ সম্পর্কে শিখতে

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

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

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

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

লোডিং কৌশল

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

স্টাইলশিট আর্কিটেকচার

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

/* 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 সিএসএস সিউডো-ক্লাস -একটি নির্বাচক যা এইচটিএমএল-তে <html> উপাদানটির প্রতিনিধিত্ব করে এবং নির্বাচক html এর সাথে অভিন্ন, এর সুনির্দিষ্টতা ব্যতীত-তারা বিশ্বব্যাপী সিএসএস ঘোষণার জন্য আমাকে পরিবেশন করে ভেরিয়েবল

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

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

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

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

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

/* 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'}.`);
});

ক্রোমিয়াম 93 এবং সাফারি 15 হিসাবে, আপনি meta থিম রঙ উপাদানটির media বৈশিষ্ট্যের সাথে মিডিয়া ক্যোয়ারির ভিত্তিতে রঙটি সামঞ্জস্য করতে পারেন। ম্যাচটি প্রথমটি বেছে নেওয়া হবে। উদাহরণস্বরূপ, আপনার হালকা মোডের জন্য একটি রঙ এবং গা dark ় মোডের জন্য অন্য একটি থাকতে পারে। লেখার সময়, আপনি আপনার প্রকাশ্যে থাকা ব্যক্তিদের সংজ্ঞা দিতে পারবেন না। ডাব্লু 3 সি/ম্যানিফেস্ট#975 গিটহাব ইস্যু দেখুন।

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

ডিবাগিং এবং ডার্ক মোড পরীক্ষা করা

অনুকরণটি ডিভটুলগুলিতে prefers-color-scheme

পুরো অপারেটিং সিস্টেমের রঙিন স্কিমটি স্যুইচ করা বিরক্তিকর বাস্তব দ্রুত পেতে পারে, তাই ক্রোম ডেভটুলগুলি এখন আপনাকে ব্যবহারকারীর পছন্দসই রঙ স্কিমটি এমনভাবে অনুকরণ করতে দেয় যা কেবল বর্তমানে দৃশ্যমান ট্যাবকে প্রভাবিত করে। কমান্ড মেনু খুলুন, টাইপিং Rendering শুরু করুন, Show Rendering কমান্ডটি চালান এবং তারপরে এমুলেট সিএসএস মিডিয়া বৈশিষ্ট্যটি পরিবর্তন করুন রঙ-স্কিম বিকল্পটি পছন্দ করে ।

স্ক্রিনশটিং পুতুলের সাথে prefers-color-scheme

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

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

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

খাঁটি সাদা এড়িয়ে চলুন

একটি ছোট বিবরণ আপনি লক্ষ্য করেছেন যে আমি খাঁটি সাদা ব্যবহার করি না। পরিবর্তে, আশেপাশের অন্ধকার সামগ্রীর বিরুদ্ধে জ্বলজ্বল এবং রক্তপাত রোধ করতে আমি কিছুটা গা er ় সাদা বেছে নিই। rgb(250, 250, 250) এর মতো কিছু ভাল কাজ করে।

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

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

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

যেহেতু কেবল ডার্ক মোডে পুনঃ-বর্ণের প্রয়োজন, অর্থাৎ, যখন dark.css সক্রিয় থাকে, light.css কোনও সম্পর্কিত নিয়ম নেই।

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

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

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

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

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

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

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

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

/* 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);
}

ইনলাইন এসভিজিগুলির জন্য currentColor ব্যবহার করুন

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

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

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

গা dark ় মোড থেকে লাইট মোডে বা তদ্বিপরীত স্যুইচ করা এই রঙের জন্য ধন্যবাদ যে color এবং background-color উভয়ই অ্যানিমেটেবল সিএসএস বৈশিষ্ট্য । অ্যানিমেশন তৈরি করা দুটি বৈশিষ্ট্যের জন্য দুটি 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);
}

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

সাধারণভাবে পারফরম্যান্সের কারণগুলি লোড করার জন্য আমি <link> উপাদানগুলির media অ্যাট্রিবিউটে (স্টাইলশিটগুলিতে ইনলাইন না করে) মিডিয়া prefers-color-scheme এ একচেটিয়াভাবে কাজ করার পরামর্শ দিচ্ছি, এমন পরিস্থিতি রয়েছে যেখানে আপনি আসলে prefers-color-scheme সাথে কাজ করতে চাইতে পারেন- আপনার এইচটিএমএল কোডে সরাসরি ইনলাইন 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>

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

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

<dark-mode-toggle> টগল> কাস্টম উপাদান

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

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

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

উপসংহার

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

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

prefers-color-scheme মিডিয়া ক্যোয়ারী:

• ক্রোম প্ল্যাটফর্মের স্থিতি পৃষ্ঠা
• ক্রোমিয়াম বাগ
• মিডিয়া ক্যোয়ারী স্তর 5 স্পেক

color-scheme মেটা ট্যাগ এবং সিএসএস সম্পত্তি জন্য সংস্থানসমূহ:

• color-scheme সিএসএস সম্পত্তি এবং মেটা ট্যাগ
• ক্রোম প্ল্যাটফর্মের স্থিতি পৃষ্ঠা
• ক্রোমিয়াম বাগ
• সিএসএস রঙ সমন্বয় মডিউল স্তর 1 স্পেক
• মেটা ট্যাগ এবং সিএসএস সম্পত্তির জন্য সিএসএস ডাব্লুজি গিটহাব ইস্যু
• মেটা ট্যাগের জন্য এইচটিএমএল হোয়াটডব্লিউজি গিটহাব ইস্যু

সাধারণ ডার্ক মোড লিঙ্কগুলি:

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

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

• ডার্ক মোডের "সমর্থিত-রঙ-স্কিমস" আসলে কী করে? 🤔
• অন্ধকার হতে দিন! 🌚 সম্ভবত…
• অন্ধকার মোডের জন্য পুনরায় রঙিনকরণ

স্বীকৃতি

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