অতিরিক্ত প্রচার নাকি প্রয়োজন? ডার্ক মোড সম্পর্কে সবকিছু জানুন এবং আপনার ব্যবহারকারীদের সুবিধার জন্য কীভাবে এটি ব্যবহার করবেন তা জানুন!
ভূমিকা
ডার্ক মোড-এর আগে ডার্ক মোড
আমরা ডার্ক মোডের সম্পূর্ণ অভিজ্ঞতা নিয়ে এসেছি। ব্যক্তিগত কম্পিউটিংয়ের শুরুর দিকে, ডার্ক মোড বেছে নেওয়ার কোনও সুযোগ ছিল না, কিন্তু এটি ছিল বাস্তব: মনোক্রোম CRT কম্পিউটার মনিটর ফসফরেসেন্ট স্ক্রিনে ইলেকট্রন বিম প্রয়োগ করে কাজ করত এবং প্রথম দিকের CRT-তে ব্যবহৃত ফসফর ছিল সবুজ রঙের। কারণ টেক্সট সবুজ রঙে দেখানো হত এবং স্ক্রিনের বাকি অংশ কালো ছিল, এই মডেলগুলিকে প্রায়শই গ্রিন স্ক্রিন বলা হত।
পরবর্তীকালে চালু হওয়া কালার CRT-তে লাল, সবুজ ও নীল ফসফর ব্যবহার করে একাধিক রঙ দেখানো হয়। তারা তিনটি ফসফর একসাথে অ্যাক্টিভেট করে সাদা রঙ তৈরি করেছিলেন। আরও উন্নত WYSIWYG ডেস্কটপ পাবলিশিং-এর আগমনের সাথে সাথে, ভার্চুয়াল ডকুমেন্টকে কাগজের শিটের মতো করে তোলার আইডিয়া জনপ্রিয় হয়ে ওঠে।
এখান থেকেই ডিজাইন ট্রেন্ড হিসেবে সাদার উপর কালো শুরু হয়, এবং এই ট্রেন্ড প্রথম দিকের ডকুমেন্ট-ভিত্তিক ওয়েব-এ ব্যবহার করা হয়। প্রথম ব্রাউজার, WorldWideWeb (মনে রাখবেন, CSS তখনও আবিষ্কৃত হয়নি), এইভাবে ওয়েবপেজ দেখাত। মজার তথ্য: দ্বিতীয় ব্রাউজার, লাইন মোড ব্রাউজার—একটি টার্মিনাল-ভিত্তিক ব্রাউজার— গাঢ় ব্যাকগ্রাউন্ডে সবুজ রঙের ছিল। আজকাল, ওয়েব পেজ ও ওয়েব অ্যাপ সাধারণত হালকা ব্যাকগ্রাউন্ডে গাঢ় টেক্সট দিয়ে ডিজাইন করা হয়, এটি একটি বেসলাইন অনুমান যা Chrome সহ ইউজার এজেন্ট স্টাইলশিটে হার্ড-কোড করা থাকে।
CRT-এর দিন অনেক আগেই শেষ হয়ে গেছে। কন্টেন্ট দেখা ও তৈরি করার কাজ এখন মোবাইল ডিভাইসে করা হয় যেখানে ব্যাকলিট LCD বা বিদ্যুৎ সাশ্রয়কারী AMOLED স্ক্রিন ব্যবহার করা হয়। আরও ছোট এবং সহজে বহনযোগ্য কম্পিউটার, ট্যাবলেট এবং স্মার্টফোন ব্যবহারের নতুন প্যাটার্ন তৈরি করেছে। ওয়েব ব্রাউজিং, মজার জন্য কোডিং এবং হাই-এন্ড গেমিংয়ের মতো অবসরকালীন টাস্ক অফিস টাইমের পরে প্রায়ই কম আলোয় করা হয়। এমনকি লোকজন রাতে বিছানায় শুয়েও ডিভাইস ব্যবহার করতে পছন্দ করেন। যত বেশি মানুষ অন্ধকারে তাদের ডিভাইস ব্যবহার করেন, তত বেশি লাইট-অন-ডার্ক-এর মূল ধারণায় ফিরে যাওয়ার ধারণাটি জনপ্রিয় হয়ে ওঠে।
ডার্ক মোড কেন ব্যবহার করবেন
নান্দনিক কারণে ডার্ক মোড
লোকজনকে যখন জিজ্ঞাসা করা হয় তারা কেন ডার্ক মোড পছন্দ করে বা চায়, সবচেয়ে জনপ্রিয় উত্তর হল "এটি চোখের পক্ষে আরামদায়ক," তারপরেই আসে "এটি মার্জিত ও সুন্দর।" Apple তাদের ডার্ক মোড ডেভেলপার ডকুমেন্টেশনে স্পষ্টভাবে লিখেছে: "লাইট বা ডার্ক মোড চালু করার সিদ্ধান্ত বেশিরভাগ ব্যবহারকারীর কাছে নান্দনিকতার বিষয় এবং এটি অ্যাম্বিয়েন্ট লাইটিংয়ের সাথে সম্পর্কিত নাও হতে পারে।"
অ্যাক্সেসিবিলিটি টুল হিসেবে ডার্ক মোড
এছাড়াও, এমন কিছু মানুষ আছেন যাদের ডার্ক মোড প্রয়োজন এবং তারা এটিকে আরেকটি অ্যাক্সেসিবিলিটি টুল হিসেবে ব্যবহার করেন, যেমন, স্বল্প দৃষ্টিশক্তি সম্পন্ন ব্যবহারকারী। এই ধরনের অ্যাক্সেসিবিলিটি টুলের প্রথম ব্যবহার আমি খুঁজে পেয়েছি System 7-এর CloseView ফিচারে, যেখানে সাদার উপর কালো এবং কালোর উপর সাদা টগল করার সুবিধা ছিল। System 7-এ কালার সাপোর্ট করলেও, ডিফল্ট ইউজার ইন্টারফেস এখনও সাদা-কালো।
রঙের ব্যবহার শুরু হওয়ার পর ইনভার্সন-ভিত্তিক এই প্রয়োগের দুর্বলতাগুলি সামনে আসে। Szpiro et al.-এর করা ব্যবহারকারী সম্পর্কে রিসার্চে স্বল্প দৃষ্টিশক্তি সম্পন্ন ব্যক্তিরা কীভাবে কম্পিউটিং ডিভাইস অ্যাক্সেস করেন তাতে দেখা গেছে যে ইন্টারভিউ নেওয়া সব ব্যবহারকারী ইনভার্ট করা ছবি অপছন্দ করেছেন, কিন্তু তাদের মধ্যে অনেকেই ডার্ক ব্যাকগ্রাউন্ডে হালকা রঙের টেক্সট পছন্দ করেছেন। Apple ব্যবহারকারীর এই পছন্দকে স্মার্ট ইনভার্ট নামক ফিচারের মাধ্যমে পূরণ করে, যা ছবি, মিডিয়া এবং ডার্ক কালার স্টাইল ব্যবহার করে এমন কিছু অ্যাপ ছাড়া ডিসপ্লের রঙ উল্টে দেয়।
কম্পিউটার ভিশন সিন্ড্রোম হল স্বল্প দৃষ্টিশক্তির একটি বিশেষ রূপ, যা ডিজিটাল আই স্ট্রেন নামেও পরিচিত। এটি সংজ্ঞায়িত হিসাবে "কম্পিউটার ব্যবহারের সাথে সম্পর্কিত চোখ এবং দৃষ্টিশক্তির সমস্যার সংমিশ্রণ (ডেস্কটপ, ল্যাপটপ এবং ট্যাবলেট সহ) এবং অন্যান্য ইলেকট্রনিক ডিসপ্লে (যেমন স্মার্টফোন এবং ইলেকট্রনিক রিডিং ডিভাইস)।" এটি বলা হয়েছে যে কিশোর-কিশোরীদের ইলেকট্রনিক ডিভাইস ব্যবহার, বিশেষ করে রাতে, তাদের কম ঘুমানো, ঘুম আসতে দেরি হওয়া এবং ঘুমের ঘাটতি হওয়ার ঝুঁকি বাড়ায়। এছাড়াও, সার্কাডিয়ান রিদম ও ঘুমের চক্রের রেগুলেশনের সাথে নীল আলোর সংস্পর্শে আসার বিষয়টি রিপোর্ট করা হয়েছে এবং রোজেনফিল্ডের গবেষণা অনুযায়ী, অনিয়মিত আলোর পরিবেশের কারণে ঘুমের অভাব হতে পারে, যা সম্ভবত মেজাজ ও টাস্ক পারফর্ম্যান্সকে প্রভাবিত করে। এইসব নেতিবাচক প্রভাব সীমিত করতে, iOS-এর নাইট শিফ্ট বা Android-এর নাইট লাইট-এর মতো ফিচারের মাধ্যমে ডিসপ্লে কালার টেম্পারেচার অ্যাডজাস্ট করে নীল আলো কমানো সাহায্য করতে পারে, পাশাপাশি ডার্ক থিম বা ডার্ক মোডের মাধ্যমে উজ্জ্বল আলো বা অনিয়মিত আলো এড়ানোও সাহায্য করতে পারে।
AMOLED স্ক্রিনে ডার্ক মোড পাওয়ার সেভিংস
সবশেষে, ডার্ক মোড AMOLED স্ক্রিনে প্রচুর এনার্জি সাশ্রয় করে বলে জানা গেছে। YouTube-এর মতো জনপ্রিয় Google অ্যাপের উপর ফোকাস করা Android কেস স্টাডি থেকে দেখা গেছে যে ব্যাটারির চার্জ ৬০% পর্যন্ত সাশ্রয় করা যেতে পারে। এই কেস স্টাডি এবং অ্যাপ প্রতি ব্যাটারি সাশ্রয় সম্পর্কে আরও জানতে নিচের ভিডিওটি দেখুন।
অপারেটিং সিস্টেমে ডার্ক মোড চালু করা
ডার্ক মোড কেন অনেক ব্যবহারকারীর কাছে এত গুরুত্বপূর্ণ তা আমি ব্যাখ্যা করেছি, এবার আপনি কীভাবে এটি ব্যবহার করতে পারেন তা পর্যালোচনা করা যাক।
যেসব অপারেটিং সিস্টেমে ডার্ক মোড বা ডার্ক থিম কাজ করে, সেগুলিতে সাধারণত সেটিংসের মধ্যে কোথাও এটি চালু করার বিকল্প থাকে। macOS X-এ, এটি সিস্টেম প্রেফারেন্সের সাধারণ বিভাগে থাকে এবং এটিকে অ্যাপিয়ারেন্স (স্ক্রিনশট) বলা হয়, এবং Windows 10-এ, এটি রঙ বিভাগে থাকে এবং এটিকে আপনার রঙ বেছে নিন (স্ক্রিনশট) বলা হয়। Android Q-এর ক্ষেত্রে, আপনি এটি ডিসপ্লে বিকল্পের মধ্যে ডার্ক থিম টগল সুইচ (স্ক্রিনশট) হিসেবে দেখতে পাবেন, এবং iOS 13-এর ক্ষেত্রে, আপনি সেটিংসের ডিসপ্লে ও উজ্জ্বলতা বিভাগে গিয়ে অ্যাপিয়ারেন্স পরিবর্তন করতে পারবেন (স্ক্রিনশট)।
prefers-color-scheme মিডিয়া কোয়েরি
শুরু করার আগে শেষ একটি থিওরি।
মিডিয়া কোয়েরি
লেখককে ইউজার এজেন্ট বা ডিসপ্লে ডিভাইসের ভ্যালু বা ফিচার পরীক্ষা ও কোয়েরি করার অনুমতি দেয়,
যা রেন্ডার করা ডকুমেন্টের উপর নির্ভর করে না।
এগুলি CSS @media নিয়মে কোনও ডকুমেন্টে শর্তসাপেক্ষে স্টাইল প্রয়োগ করতে ব্যবহার করা হয়,
এবং HTML ও JavaScript-এর মতো অন্যান্য বিভিন্ন প্রসঙ্গ ও ভাষায় ব্যবহার করা হয়।
মিডিয়া কোয়েরি লেভেল ৫
তথাকথিত ব্যবহারকারীর পছন্দ সংক্রান্ত মিডিয়া ফিচার নিয়ে আসে, অর্থাৎ,
ব্যবহারকারীর কন্টেন্ট দেখানোর পছন্দের উপায় শনাক্ত করার জন্য সাইটের একটি উপায়।
ব্যবহারকারী পৃষ্ঠায় হালকা বা গাঢ় রঙের থিম ব্যবহার করার অনুরোধ করেছেন কিনা তা শনাক্ত করতে
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-এর ভার্সন 76, Firefox-এর ভার্সন 67,
এবং macOS-এ Safari-এর ভার্সন 12.1 ও iOS-এ ভার্সন 13-এ।
অন্যান্য সব ব্রাউজারের জন্য, আপনি আমি কি সহায়তা টেবিল ব্যবহার করতে পারি ডকুমেন্ট চেক করতে পারেন।
অনুরোধ করার সময় ব্যবহারকারীর পছন্দ সম্পর্কে জানা
Sec-CH-Prefers-Color-Scheme Client Hint হেডার
সাইটকে অনুরোধের সময় ব্যবহারকারীর পছন্দের রঙের স্কিম ঐচ্ছিকভাবে পেতে দেয়,
যার ফলে সার্ভার সঠিক CSS ইনলাইন করতে পারে এবং ভুল রঙের থিমের ফ্ল্যাশ এড়ানো যায়।
প্র্যাকটিসে ডার্ক মোড
আসুন, ডার্ক মোড ব্যবহার করলে কেমন দেখায় তা বাস্তবে দেখে নেওয়া যাক। হাইল্যান্ডার-এর মতোই, ডার্ক মোডের ক্ষেত্রেও শুধু একটিই থাকতে পারে: ডার্ক বা লাইট, কিন্তু কখনওই দুটি একসাথে নয়! আমি কেন এটি উল্লেখ করছি? কারণ, এই তথ্যের প্রভাব লোডিং স্ট্র্যাটেজির উপর পড়তে পারে। ব্যবহারকারী বর্তমানে ব্যবহার করছেন না এমন মোডের জন্য ক্রিটিক্যাল রেন্ডারিং পাথে CSS ডাউনলোড করতে তাকে বাধ্য করবেন না। লোড স্পিড অপ্টিমাইজ করতে, আমি উদাহরণ হিসেবে দেখানো অ্যাপের জন্য CSS স্প্লিট করেছি যা নিম্নলিখিত সাজেশনগুলি বাস্তবে দেখায় নন-ক্রিটিক্যাল CSS ডিফার করার জন্য তিনটি ভাগে:
style.cssযাতে সাধারণ নিয়ম থাকে যা সাইটে সর্বজনীনভাবে ব্যবহার করা হয়।dark.cssযাতে শুধু ডার্ক মোডের জন্য প্রয়োজনীয় নিয়ম আছে।light.cssযাতে শুধু লাইট মোডের জন্য প্রয়োজনীয় নিয়ম আছে।
লোডিং স্ট্র্যাটেজি
পরের দুটি, light.css এবং dark.css,
<link media> কোয়েরির সাথে শর্তসাপেক্ষে লোড করা হয়।
প্রাথমিকভাবে,
সব ব্রাউজার prefers-color-scheme সাপোর্ট করবে না
(উপরের প্যাটার্ন ব্যবহার করে শনাক্ত করা যায়),
যা আমি ডিফল্ট light.css ফাইল লোড করার মাধ্যমে
ডায়নামিকভাবে ম্যানেজ করি
একটি ক্ষুদ্র ইনলাইন স্ক্রিপ্টে শর্তসাপেক্ষে যোগ করা <link rel="stylesheet"> এলিমেন্টের মাধ্যমে
(লাইট হল একটি ইচ্ছাকৃত পছন্দ, আমি ডার্ককেও ডিফল্ট ফলব্যাক অভিজ্ঞতা হিসেবে সেট করতে পারতাম)।
স্টাইল না করা কন্টেন্টের ফ্ল্যাশ এড়াতে,
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);
}
উপরের কোড স্যাম্পেলে, আপনি সম্ভবত স্পেস দিয়ে আলাদা করা ভ্যালু light dark সহ
color-scheme
প্রপার্টি লক্ষ্য করেছেন।
এটি ব্রাউজারকে জানায় যে আমার অ্যাপ কোন রঙের থিম সাপোর্ট করে
এবং এটি ইউজার এজেন্ট স্টাইলশিটের বিশেষ ভ্যারিয়েন্ট অ্যাক্টিভেট করার অনুমতি দেয়,
যা, উদাহরণস্বরূপ, ব্রাউজারকে ডার্ক ব্যাকগ্রাউন্ড ও হালকা টেক্সট সহ ফর্ম ফিল্ড রেন্ডার করতে,
স্ক্রল বার অ্যাডজাস্ট করতে অথবা থিম-অ্যাওয়ার হাইলাইট কালার চালু করতে সাহায্য করে।
color-scheme-এর সঠিক বিবরণ
CSS কালার অ্যাডজাস্টমেন্ট মডিউল লেভেল ১-এ উল্লেখ করা আছে।
এরপর আমার সাইটের জন্য গুরুত্বপূর্ণ বিষয়গুলির জন্য 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 লোড করি।
ডার্ক মোড টগল করে পৃষ্ঠাটি আবার লোড করে দেখুন:
বর্তমানে অমিল হওয়া নির্দিষ্ট স্টাইলশিটগুলি এখনও লোড করা আছে, তবে সবচেয়ে কম অগ্রাধিকার সহ,
যাতে সেগুলি এই মুহূর্তে সাইটের জন্য প্রয়োজনীয় রিসোর্সের সাথে কখনও প্রতিযোগিতা না করে।
prefers-color-scheme কাজ করে না এমন ব্রাউজারে, সবচেয়ে কম অগ্রাধিকার সহ ডার্ক মোড 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 কমান্ড রান করুন এবং তারপর CSS মিডিয়া ফিচার prefers-color-scheme এমুলেট করুন বিকল্প পরিবর্তন করুন।
Puppeteer-এর সাহায্যে prefers-color-scheme-এর স্ক্রিনশট নেওয়া হচ্ছে
Puppeteer হল একটি Node.js লাইব্রেরি
যা DevTools Protocol-এর মাধ্যমে Chrome বা Chromium কন্ট্রোল করার জন্য
হাই-লেভেল API প্রদান করে।
dark-mode-screenshot-এর মাধ্যমে, আমরা
একটি Puppeteer স্ক্রিপ্ট প্রদান করি যা আপনাকে ডার্ক এবং লাইট মোড, দুটিতেই আপনার পৃষ্ঠার স্ক্রিনশট তৈরি করতে দেয়।
আপনি এই স্ক্রিপ্টটি একবার চালাতে পারেন, অথবা বিকল্পভাবে এটিকে আপনার
কন্টিনিউয়াস ইন্টিগ্রেশন (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 সিউডো-ক্লাস-এর সাথে রেফার করতে পারি।
const filter = 'grayscale(70%)';
document.documentElement.style.setProperty('--image-filter', value);
ভেক্টর গ্রাফিক্স ও আইকন ইনভার্ট করুন
ভেক্টর গ্রাফিক্সের ক্ষেত্রে—যা আমার ক্ষেত্রে আইকন হিসেবে ব্যবহার করা হয় এবং আমি <img> এলিমেন্টের মাধ্যমে রেফারেন্স দিই—আমি
আলাদা রিকালারাইজেশন পদ্ধতি ব্যবহার করি।
রিসার্চ থেকে জানা গেছে যে
মানুষ ফটো ইনভার্ট করা পছন্দ করেন না, তবে বেশিরভাগ আইকনের ক্ষেত্রে এটি খুব ভালো কাজ করে।
আবার আমি CSS ভেরিয়েবল ব্যবহার করে রেগুলার ও :hover স্টেটে
ইনভার্সনের পরিমাণ নির্ধারণ করি।
লক্ষ্য করুন, কীভাবে আমি আবার 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 অ্যাট্রিবিউটের ভ্যালু হিসেবে ব্যবহার করা হয়,
তাহলে এটি কালার প্রপার্টির ইনহেরিট করা ভ্যালু থেকে এর ভ্যালু নেয়।
আরও ভাল: এটি
<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> লাইট মোডে।
<dark-mode-toggle> ডার্ক মোডে।
নিচের ডেমোতে উপরে ডানদিকের কোণে ডার্ক মোড কন্ট্রোলে ক্লিক বা ট্যাপ করে দেখুন। আপনি যদি তৃতীয় ও চতুর্থ কন্ট্রোলের চেকবক্সে টিকচিহ্ন দেন, তাহলে দেখুন কীভাবে আপনার মোড বেছে নেওয়ার বিষয়টি মনে রাখা হয়, এমনকি আপনি পৃষ্ঠাটি রিলোড করলেও। এর ফলে আপনার ভিজিটররা তাদের অপারেটিং সিস্টেম ডার্ক মোডে রাখতে পারবেন, কিন্তু আপনার সাইট লাইট মোডে উপভোগ করতে পারবেন অথবা এর উল্টোটাও করতে পারবেন।
উপসংহার
ডার্ক মোড নিয়ে কাজ করা এবং এটিকে সাপোর্ট করা খুবই মজার এবং এটি নতুন ডিজাইনের পথ খুলে দেয়।
আপনার কিছু ভিজিটরের জন্য এটি আপনার সাইট হ্যান্ডেল করতে না পারা
এবং একজন খুশি ব্যবহারকারী হওয়ার মধ্যে পার্থক্য হতে পারে।
কিছু সমস্যা হতে পারে এবং সতর্কতার সাথে পরীক্ষা করা অবশ্যই প্রয়োজন,
তবে ডার্ক মোড অবশ্যই আপনার জন্য একটি দুর্দান্ত সুযোগ যা দেখায় যে আপনি আপনার সমস্ত ব্যবহারকারীর যত্ন নেন।
এই পোস্টে উল্লেখ করা পেশাদার পদ্ধতি এবং
<dark-mode-toggle> কাস্টম এলিমেন্টের
মতো সহায়ক টুল আপনাকে একটি অসাধারণ ডার্ক মোড অভিজ্ঞতা তৈরি করার ব্যাপারে আত্মবিশ্বাসী করে তুলবে।
আপনি কী তৈরি করেছেন এবং এই পোস্টটি আপনার কাজে লেগেছে কিনা তা Twitter-এ আমাকে জানান
অথবা এটি আরও উন্নত করার জন্য সাজেশন দিন।
পড়ার জন্য ধন্যবাদ! 🌒
সম্পর্কিত লিঙ্ক
prefers-color-scheme মিডিয়া কোয়েরির জন্য রিসোর্স:
color-scheme মেটা ট্যাগ ও CSS প্রপার্টির জন্য রিসোর্স:
color-schemeCSS প্রপার্টি ও মেটা ট্যাগ- Chrome প্ল্যাটফর্ম স্ট্যাটাস পৃষ্ঠা
- Chromium বাগ
- CSS কালার অ্যাডজাস্টমেন্ট মডিউল লেভেল ১ স্পেসিফিকেশন
- মেটা ট্যাগ ও CSS প্রপার্টির জন্য CSS WG GitHub সমস্যা
- মেটা ট্যাগের জন্য HTML WHATWG GitHub সমস্যা
ডার্ক মোড সংক্রান্ত সাধারণ লিঙ্ক:
- মেটেরিয়াল ডিজাইন—ডার্ক থিম
- ওয়েব ইন্সপেক্টরে ডার্ক মোড
- WebKit-এ ডার্ক মোড সাপোর্ট
- Apple Human Interface Guidelines—ডার্ক মোড
এই পোস্টের জন্য ব্যাকগ্রাউন্ড রিসার্চ আর্টিকেল:
- ডার্ক মোডের "supported-color-schemes" আসলে কী করে? 🤔
- ডার্ক মোড চালু করুন! 🌚 হতে পারে…
- ডার্ক মোডের জন্য রঙ পরিবর্তন করা
স্বীকৃতি
prefers-color-scheme মিডিয়া ফিচার, color-scheme CSS প্রপার্টি
এবং সংশ্লিষ্ট মেটা ট্যাগ হল 👏 Rune Lillesveen-এর ইমপ্লিমেন্টেশন সংক্রান্ত কাজ।
এছাড়াও, রুন CSS কালার অ্যাডজাস্টমেন্ট মডিউল লেভেল ১ স্পেসিফিকেশনের সহ-সম্পাদক।
আমি 🙏 লুকাস জিবিলুট,
রোয়ান মেয়ারউড,
চিরাগ দেশাই
এবং রব ডডসন-কে
এই নিবন্ধটি পুঙ্খানুপুঙ্খভাবে পর্যালোচনা করার জন্য ধন্যবাদ জানাতে চাই।
লোডিং স্ট্র্যাটেজি হল জেক আর্চিবল্ড-এর মস্তিষ্কপ্রসূত।
Emilio Cobos Álvarez আমাকে সঠিক prefers-color-scheme শনাক্তকরণ পদ্ধতি দেখিয়েছেন।
রেফারেন্স করা SVG ও currentColor সহ পরামর্শ
Timothy Hatcher-এর থেকে এসেছে।
সবশেষে, আমি বিভিন্ন ব্যবহারকারী সম্পর্কিত গবেষণার অনেক বেনামী অংশগ্রহণকারীদের প্রতি কৃতজ্ঞ
যারা এই নিবন্ধে সুপারিশগুলি তৈরি করতে সাহায্য করেছেন।