Dark mode আর থিম — prefers-color-scheme আর color-scheme

১ · মানুষ কেন dark mode চান — আর কেন সবাই চান না

রাত এগারোটা। লোডশেডিংয়ে ঘর অন্ধকার, আপনি বিছানায় শুয়ে ফোনে একটি খবরের সাইট খুললেন। হঠাৎ পুরো পর্দা ধবধবে সাদা — চোখ কুঁচকে যায়। অথচ ফোনের সেটিংসে আপনি অনেক আগেই “Dark” বেছে রেখেছেন, আর Facebook, YouTube, bKash অ্যাপ সবই অন্ধকার থিমে খোলে। সমস্যাটা ফোনের নয় — সাইটটি আপনার পছন্দ শোনেনি।

Dark mode মানে গাঢ় পটভূমিতে হালকা লেখা। এর উল্টোটা লাইট মোড — সাদা বা হালকা পটভূমিতে গাঢ় লেখা, ঠিক কাগজের বইয়ের মতো। আজ প্রায় সব অপারেটিং সিস্টেম (Windows, macOS, Android, iOS) ব্যবহারকারীকে এ দুটির একটি বেছে নিতে দেয়, আর ব্রাউজার সেই পছন্দ ওয়েবপেজকেও জানিয়ে দেয়। এই পর্বে দেখব, পাতা কীভাবে সেই পছন্দ শুনবে।

প্রথমে বুঝে নিই মানুষ কেন dark mode চান। কারণগুলো সত্যি, কিন্তু প্রায়ই বাড়িয়ে বলা হয়:

২ · color-scheme — ব্রাউজারকে বলুন “আমি দুই থিমই পারি”

অনেকে dark mode বানাতে গিয়ে শুধু body-র পটভূমি কালো আর লেখা সাদা করে দেন। তারপর দেখেন — ফর্মের input বাক্স তখনো সাদা, ড্রপডাউন সাদা, scrollbar সাদা, আর পাতা লোড হওয়ার মুহূর্তে এক ঝলক সাদা। কারণ এসব অংশের রং আপনার CSS ঠিক করে না, ঠিক করে ব্রাউজারের নিজস্ব user agent stylesheet আর অপারেটিং সিস্টেম।

এখানেই color-scheme property-র কাজ। এটি কোনো রং বসায় না; বরং ব্রাউজারকে জানায় পাতাটি কোন কোন থিমে ঠিকঠাক দেখায়। তখন ব্রাউজার নিজের আঁকা অংশগুলো — পাতার ডিফল্ট পটভূমি, ডিফল্ট লেখার রং, form control, scrollbar — সেই থিমে আঁকে। নিচের এডিটরে CSS-এ মাত্র একটি লাইন আছে:

:root {
  color-scheme: dark;
}

লিংকের রং খেয়াল করেছেন? ডার্ক অবস্থায় ব্রাউজার লিংকের ডিফল্ট নীলও হালকা করে দেয়, যাতে গাঢ় পটভূমিতে পড়া যায়। ভেতরে কী ঘটছে, ধাপে ধাপে দেখুন:

meta ট্যাগ — CSS আসার আগেই খবর দেওয়া

একই কাজ HTML-এ <meta> দিয়েও করা যায়। পার্থক্য সময়ে: <head>-এর একেবারে শুরুতে থাকা meta ব্রাউজার CSS ফাইল নামার আগেই পড়ে ফেলে। ফলে ধীর ইন্টারনেটে CSS আসতে দেরি হলেও প্রথম পর্দাটি গাঢ় হয়, সাদা ঝলক দেখা যায় না। পেশাদার পথ হলো দুটোই রাখা:

<head>
  <meta charset="utf-8">
  <meta name="color-scheme" content="light dark">
  <link rel="stylesheet" href="style.css">
</head>

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

color-scheme এখন সব প্রধান ব্রাউজারে আছে — Baseline Widely available. পুরোনো ব্রাউজার এটি না চিনলে শুধু উপেক্ষা করে, পাতা আগের মতো লাইট থাকে — কোনো ক্ষতি নেই।

৩ · prefers-color-scheme — ব্যবহারকারীর পছন্দ জিজ্ঞেস করা

color-scheme শুধু ব্রাউজারের ডিফল্ট রং বদলায়। কিন্তু আপনার ব্র্যান্ডের সবুজ বোতাম, কার্ডের পটভূমি, ব্যাজের রং — এগুলো আপনি নিজে লিখেছেন, তাই ডার্ক থিমে এদের নতুন মান আপনাকেই দিতে হবে। সেই সুযোগ দেয় একটি media query: prefers-color-scheme. এর মান হয় light অথবা dark.

:root { color-scheme: light dark; }
body  { font-family: sans-serif; background: #f4f4f5; color: #1f2937; }
.card { background: #ffffff; padding: 12px 16px; border-radius: 10px;
        border: 1px solid #d4d4d8; }
.badge { background: #dcfce7; color: #166534;
         padding: 2px 8px; border-radius: 6px; }

@media (prefers-color-scheme: dark) {
  body   { background: #18181b; color: #e4e4e7; }
  .card  { background: #27272a; border-color: #3f3f46; }
  .badge { background: #14532d; color: #bbf7d0; }
}

JavaScript থেকেও একই প্রশ্ন করা যায় — matchMedia() দিয়ে। নিচের কোড চালান; ফলাফল আপনার নিজের যন্ত্রের সেটিং অনুযায়ী আসবে। এর সাথে আরও কয়েকটি user preference media feature-ও দেখানো হলো, যেগুলো একই পরিবারের সদস্য:

const dark = matchMedia('(prefers-color-scheme: dark)');
console.log('ডার্ক থিম পছন্দ?', dark.matches);
console.log('কম অ্যানিমেশন পছন্দ?',
  matchMedia('(prefers-reduced-motion: reduce)').matches);
console.log('বেশি contrast চান?',
  matchMedia('(prefers-contrast: more)').matches);
console.log('forced colors চালু?',
  matchMedia('(forced-colors: active)').matches);

// সিস্টেমের থিম বদলালে সাথে সাথে খবর পাওয়া
dark.addEventListener('change', e =>
  console.log('থিম বদলাল →', e.matches ? 'dark' : 'light'));

৪ · থিমের কাঠামো — semantic token দিয়ে এক জায়গায় রং

উপরের উদাহরণে একটা সমস্যা লুকিয়ে আছে। প্রতিটি selector-এর রং দুই জায়গায় লেখা — একবার স্বাভাবিক নিয়মে, আরেকবার media query-র ভেতরে। ৩টি selector-এ এটা চলে; বাস্তবের সাইটে শত শত selector থাকলে কোথাও না কোথাও একটি ডার্ক রং লিখতে ভুলে যাবেনই। সমাধান হলো পর্ব ৩৩-এ (CSS variable — একবার লিখে বারবার ব্যবহার) দেখা custom property.

কিন্তু শুধু variable বানালেই হয় না, নাম দেওয়ার কৌশলটাই আসল। --white: #fff নামের variable ডার্ক থিমে #18181b হয়ে গেলে নামটাই মিথ্যা হয়ে যায়। তাই দুই স্তরে ভাবুন:

কম্পোনেন্ট (কার্ড, বোতাম, ব্যাজ) শুধু semantic নাম ব্যবহার করবে — --surface (পটভূমি), --text (লেখা), --accent (ব্র্যান্ডের রং), --border. থিম মানে এই কয়েকটি নামের এক সেট মান। এই নামগুলোকেই ডিজাইনের ভাষায় বলে design token. নিচের এডিটরে একই কার্ড তিনবার আছে, প্রতিটি আলাদা data-theme-এর ভেতরে — তৃতীয়টি পহেলা বৈশাখের মৌসুমি থিম:

/* ১. কাঁচা রং — নাম বলে রংটি কেমন */
:root { --green-700: #15803d; --green-400: #4ade80;
        --zinc-900: #18181b; --zinc-200: #e4e4e7; --red-700: #b91c1c; }

/* ২. semantic token — নাম বলে রংটি কী কাজে */
.theme { --surface: #ffffff; --text: #1f2937;
         --accent: var(--green-700); --border: #d4d4d8; }
.theme[data-theme="dark"] {
  --surface: var(--zinc-900); --text: var(--zinc-200);
  --accent: var(--green-400); --border: #3f3f46; }
.theme[data-theme="boishakh"] {
  --surface: #fff7ed; --text: #431407;
  --accent: var(--red-700); --border: #fdba74; }

/* ৩. কম্পোনেন্ট — শুধু semantic নাম, কোনো সরাসরি রং নেই */
.card { background: var(--surface); color: var(--text);
        border: 2px solid var(--border); border-radius: 10px;
        padding: 12px; margin: 0 0 8px; font-family: sans-serif; }
.card button { background: var(--accent); color: var(--surface);
               border: 0; border-radius: 6px; padding: 6px 14px; margin-top: 8px; }

এই কাঠামো কেন কাজ করে, তা বুঝতে inheritance আর computed value-এর কথা মনে করুন। নিচের ডায়াগ্রামে দেখুন একটি attribute বদলালে ব্রাউজার কীভাবে শত শত element-এর রং বদলে দেয়:

:root               { --surface: #ffffff; }
:root[data-theme="dark"] { --surface: #18181b; }
.card               { background: var(--surface); }

<html>  → --surface = #ffffff

<html data-theme="dark">

:root[data-theme="dark"] এখন মিলে গেছে
specificity বেশি → --surface = #18181b

html     --surface: #18181b
 └ body   --surface: #18181b  (উত্তরাধিকার)
    └ .card  --surface: #18181b
       background: var(--surface) → #18181b

বদলানো CSS নিয়ম:        ০টি
বদলানো attribute:       ১টি (<html>-এ)
নতুন রঙে আঁকা element:   পাতার সব

৫ · light-dark() — একই লাইনে দুই রং

টোকেন থাকলেও এখনো প্রতিটি টোকেন দুই জায়গায় লিখতে হয় — একবার স্বাভাবিক, একবার media query-তে। আধুনিক CSS এটিও সহজ করেছে light-dark() ফাংশন দিয়ে: light-dark(লাইটের-রং, ডার্কের-রং). ব্রাউজার সেই element-এর used color scheme দেখে দুটির একটি বেছে নেয়।

:root {
  color-scheme: light;   /* dark করে দেখুন, তারপর light dark */
  --surface: light-dark(#ffffff, #18181b);
  --text:    light-dark(#1f2937, #e4e4e7);
  --accent:  light-dark(#15803d, #4ade80);
  --soft:    light-dark(#f0fdf4, #052e16);
}
body  { font-family: sans-serif;
        background: var(--surface); color: var(--text); }
.note { background: var(--soft); padding: 8px 12px;
        border-left: 4px solid var(--accent); }

এর একটি বড় সুবিধা পরের অংশে কাজে লাগবে: থিম বদলের বোতাম শুধু color-scheme বদলালেই সব light-dark() নিজে থেকে মেনে নেয়। আর color-scheme উত্তরাধিকারে যায়, তাই পাতার শুধু একটি অংশকে (যেমন সবসময়-গাঢ় ভিডিও প্লেয়ার বা footer) color-scheme: dark দিলে সেখানকার সব টোকেন ডার্ক হয়ে যায় — যা media query দিয়ে করা যায় না।

:root {
  --surface: #ffffff;                       /* পুরোনো ব্রাউজার: শুধু লাইট */
  --surface: light-dark(#ffffff, #18181b);  /* নতুন ব্রাউজার */
}
@supports not (color: light-dark(#fff, #000)) {
  @media (prefers-color-scheme: dark) { :root { --surface: #18181b; } }
}

৬ · নিজের থিম বোতাম — data-theme, মনে রাখা আর ঝলক এড়ানো

সিস্টেমের পছন্দ মানা প্রথম ধাপ। কিন্তু কেউ হয়তো ফোন রেখেছেন লাইটে, অথচ আপনার লম্বা প্রবন্ধটি রাতে ডার্কে পড়তে চান। তাই ভালো সাইট তিনটি বিকল্প দেয়: সিস্টেম (ডিফল্ট), লাইট, ডার্ক. কৌশলটা সহজ — <html>-এ একটি attribute, আর CSS-এ সেই attribute দেখে color-scheme বদল:

<style>
  :root { color-scheme: light dark;
    --surface: light-dark(#ffffff, #18181b);
    --text: light-dark(#1f2937, #e4e4e7);
    --accent: light-dark(#15803d, #4ade80); }
  :root[data-theme="light"] { color-scheme: light; }
  :root[data-theme="dark"]  { color-scheme: dark; }
  body { background: var(--surface); color: var(--text); font-family: sans-serif; }
  .offer { color: var(--accent); font-weight: bold; }
  [aria-pressed="true"] { outline: 3px solid var(--accent); }
</style>
<p>থিম:
  <button type="button" data-set="system" aria-pressed="true">সিস্টেম</button>
  <button type="button" data-set="light" aria-pressed="false">লাইট</button>
  <button type="button" data-set="dark" aria-pressed="false">ডার্ক</button></p>
<p>আজকের অফার: <span class="offer">মিনিকেট চাল ৳৭২/কেজি</span></p>
<script>
  let choice = 'system';   // আসল সাইটে এটি localStorage-এ থাকবে
  const buttons = document.querySelectorAll('[data-set]');
  buttons.forEach(b => b.addEventListener('click', () => {
    choice = b.dataset.set;
    if (choice === 'system') delete document.documentElement.dataset.theme;
    else document.documentElement.dataset.theme = choice;
    buttons.forEach(x => x.setAttribute('aria-pressed', x === b));
    console.log('থিম → ' + choice);
  }));
</script>

পছন্দ মনে রাখা — localStorage

localStorage হলো ব্রাউজারের ছোট একটি স্থায়ী খাতা — প্রতিটি সাইটের (আসলে প্রতিটি origin-এর) আলাদা। ব্রাউজার বন্ধ করে আবার খুললেও লেখা থাকে। বিস্তারিত জানতে JavaScript কোর্সের Web Storage পর্ব দেখুন। থিমের জন্য দরকার মাত্র দুটি কাজ:

function setTheme(t) {               // t = 'system' | 'light' | 'dark'
  const root = document.documentElement;
  if (t === 'system') delete root.dataset.theme;
  else root.dataset.theme = t;
  try {                               // প্রাইভেট মোড বা কড়া সেটিংয়ে localStorage না-ও থাকতে পারে
    if (t === 'system') localStorage.removeItem('theme');
    else localStorage.setItem('theme', t);
  } catch (e) { /* না পারলে শুধু এই পাতার জন্য থিম থাকবে */ }
}

“সিস্টেম” বাছলে মান মুছে দেওয়াটা গুরুত্বপূর্ণ: তখন সিস্টেমের থিম বদলালে পাতাও বদলাবে। কিন্তু আসল কৌশল হলো পাতা খোলার সময় সেই মান পড়া — আর কখন পড়ছেন, সেটাই সব পার্থক্য গড়ে দেয়। নিচের ডায়াগ্রামে দেখুন:

<head>  <link rel="stylesheet" href="style.css">  </head>
<body>  … পুরো পাতা …
        <script src="theme.js"></script>   ← একেবারে শেষে
</body>

data-theme নেই → লাইট টোকেন → পাতা আঁকা হলো সাদা

localStorage.theme = "dark" → data-theme="dark" → আবার আঁকা
ফল: এক ঝলক সাদা, তারপর কালো

<head>
  <meta name="color-scheme" content="light dark">
  <script> /* ৫ লাইনের ছোট script */ </script>
  <link rel="stylesheet" href="style.css">
</head>

<html data-theme="dark">   ← body তৈরির আগেই বসে গেছে
CSS এলো → ডার্ক টোকেন মিলল → প্রথম আঁকাই গাঢ়

সেই ছোট script-টি এমন:

<head>
  <meta charset="utf-8">
  <meta name="color-scheme" content="light dark">
  <script>
    try {
      const t = localStorage.getItem('theme');
      if (t === 'light' || t === 'dark') document.documentElement.dataset.theme = t;
    } catch (e) {}
  </script>
  <link rel="stylesheet" href="style.css">
  <script src="theme-toggle.js" defer></script>
</head>

আরেকটি ছোট সংযোজন: পর্ব ১৩-এ দেখা theme-color meta-তে media attribute দিলে মোবাইল ব্রাউজারের ওপরের বারও থিম মেনে চলে — <meta name="theme-color" content="#18181b" media="(prefers-color-scheme: dark)">. তবে এটি সিস্টেমের পছন্দ দেখে, আপনার বোতামের নয়; বোতামের সাথে মেলাতে JavaScript দিয়ে content বদলাতে হয়।

৭ · ডার্ক প্যালেটের নকশা — উল্টো রং নয়, নতুন করে ভাবা

সবচেয়ে সহজ ভুল হলো “সাদাকে কালো, কালোকে সাদা” করে দেওয়া, আর ব্র্যান্ডের রং যেমন ছিল তেমন রাখা। ফল হয় চোখ-ধাঁধানো, কিংবা পড়াই যায় না। ভালো ডার্ক প্যালেটের চারটি নিয়ম:

• খাঁটি কালো নয়, গাঢ় ধূসর। #000-এর ওপর #fff-এর contrast সর্বোচ্চ (২১:১) — এত বেশি যে লেখার কিনারা যেন জ্বলে ওঠে আর ছড়িয়ে পড়ে, বিশেষ করে astigmatism থাকলে। #121212 থেকে #1e1e1e-এর মতো গাঢ় ধূসর পটভূমি আর পুরো সাদার বদলে একটু ধূসর লেখা (#e4e4e7) বেশি আরামদায়ক। Google-এর Material Design নির্দেশিকাও বহু বছর ধরে এমন গাঢ় ধূসর সুপারিশ করে এসেছে।
• রঙের তীব্রতা কমান (desaturate). সাদা পটভূমিতে মানানসই গাঢ়, তীব্র রং গাঢ় পটভূমিতে হয় মিশে যায়, নয় চোখে কাঁপে। ডার্কে একই রঙের হালকা, কম তীব্র সংস্করণ নিন — গাঢ় সবুজ #15803d-এর বদলে #4ade80. পর্ব ২০-এর oklch()-এ এটা সহজ: hue একই রেখে lightness বাড়ান, chroma কমান।
• উচ্চতা (elevation) মানে একটু হালকা। লাইট থিমে ওপরে ভাসা কার্ড বা মেনু বোঝানো হয় ছায়া দিয়ে। গাঢ় পটভূমিতে ছায়া প্রায় দেখাই যায় না, তাই ডার্কে elevation বোঝানো হয় পটভূমি একটু একটু হালকা করে — পাতা #121212, কার্ড #1e1e1e, তার ওপরের মেনু #2a2a2a.
• দুই থিমেই আলাদা করে contrast মাপুন। লাইটে পাস করা রং ডার্কে ফেল করতে পারে। WCAG 2.2-এর AA স্তরে সাধারণ লেখার contrast ratio অন্তত ৪.৫:১, বড় লেখা আর বোতামের কিনারা, আইকনের মতো UI অংশে ৩:১. প্রতিটি থিম আলাদা একটি “নকশা” — দুটোকেই পাস করতে হবে।

<style>
  .panel { font-family: sans-serif; padding: 12px; border-radius: 10px;
           margin-bottom: 10px; }
  .panel div { padding: 8px 10px; margin-top: 8px; border-radius: 8px; }
  /* ভুল: খাঁটি কালো, খাঁটি সাদা, লাইটের সেই তীব্র রং */
  .bad { background: #000000; color: #ffffff; }
  .bad div { background: #000000; box-shadow: 0 2px 8px rgb(0 0 0 / .5); }
  .bad b { color: #1d4ed8; }
  /* ভালো: গাঢ় ধূসর, একটু নরম লেখা, হালকা করা রং, স্তরে স্তরে উচ্চতা */
  .good { background: #121212; color: #e4e4e7; }
  .good .e1 { background: #1e1e1e; }
  .good .e2 { background: #2a2a2a; }
  .good b { color: #93c5fd; }
</style>
<div class="panel bad">ভুল: সব একই কালো
  <div class="e1">কার্ড — <b>বিস্তারিত দেখুন</b>
    <div class="e2">মেনু — ছায়া দেখা যায় না</div></div></div>
<div class="panel good">ভালো: স্তরে স্তরে হালকা
  <div class="e1">কার্ড — <b>বিস্তারিত দেখুন</b>
    <div class="e2">মেনু — ওপরের স্তর স্পষ্ট</div></div></div>

চোখে দেখার পাশাপাশি সংখ্যাতেও যাচাই করা দরকার। নিচের কোডটি WCAG-এর সূত্র দিয়ে কয়েক জোড়া রঙের contrast ratio হিসাব করে — লাইট আর ডার্ক দুই থিমের জোড়া পাশাপাশি:

function lum(hex) {                     // WCAG-এর relative luminance
  const [r, g, b] = hex.match(/\w\w/g).map(h => parseInt(h, 16) / 255)
    .map(c => c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4);
  return 0.2126 * r + 0.7152 * g + 0.0722 * b;
}
function ratio(a, b) {
  const [hi, lo] = [lum(a), lum(b)].sort((x, y) => y - x);
  return (hi + 0.05) / (lo + 0.05);
}
const pairs = [
  ['লাইট: লেখা', '#1f2937', '#ffffff'],
  ['লাইট: সবুজ বোতাম/লিংক', '#15803d', '#ffffff'],
  ['ডার্ক: লেখা', '#e4e4e7', '#18181b'],
  ['ডার্ক: সেই একই গাঢ় সবুজ', '#15803d', '#18181b'],
  ['ডার্ক: হালকা সবুজ', '#4ade80', '#18181b'],
  ['খাঁটি সাদা-কালো', '#ffffff', '#000000'],
];
for (const [label, fg, bg] of pairs) {
  const r = ratio(fg, bg);
  const verdict = r >= 4.5 ? 'AA পাস' : r >= 3 ? 'শুধু বড় লেখা/UI' : 'ফেল';
  console.log(label + ': ' + r.toFixed(2) + ':1 → ' + verdict);
}

৮ · ছবি, লোগো আর forced colors

রং তো টোকেনে বদলাল, কিন্তু ছবি? সাদা পটভূমির জন্য বানানো গাঢ় সবুজ লোগো ডার্ক পাতায় প্রায় অদৃশ্য। আর বড় উজ্জ্বল ছবি অন্ধকার পাতায় টর্চের মতো জ্বলে। তিনটি কৌশল আছে, প্রতিটির নিজস্ব সতর্কতাসহ:

1. আলাদা ছবি: পর্ব ৩২-এর <picture>-এ <source media="(prefers-color-scheme: dark)"> দিলে ডার্ক সিস্টেমে আলাদা ফাইল নামে — লোগোর জন্য সবচেয়ে নির্ভরযোগ্য।
2. SVG-র ভেতরে currentColor: একরঙা আইকন বা লোগোর রং যদি currentColor হয়, সেটি লেখার রং মেনে নিজেই থিম বদলায় (বিস্তারিত পর্ব ৪৪-এ)।
3. filter — সাবধানে: ডার্কে ফটোকে filter: brightness(.85) দিয়ে একটু নিষ্প্রভ করা ভালো কৌশল। কিন্তু invert(1) সব রং উল্টে দেয় — কালো লোগো সাদা হয় ঠিকই, তবে লাল হয় আকাশি, সবুজ হয় বেগুনি-গোলাপি।

<style>
  body { font-family: sans-serif; }
  @media (prefers-color-scheme: dark) {
    body { background: #18181b; color: #e4e4e7; }
    .photo { filter: brightness(.85); }
  }
  .photo { width: 160px; height: 60px; border-radius: 8px;
           background: linear-gradient(#fde68a, #f97316); }
  .inv { filter: invert(1); }
  .inv-hue { filter: invert(1) hue-rotate(180deg); }
</style>
<picture>
  <source media="(prefers-color-scheme: dark)" srcset="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='34'%3E%3Ctext x='0' y='26' font-family='sans-serif' font-size='24' font-weight='700' fill='%2386efac'%3ERahim Store%3C/text%3E%3C/svg%3E">
  <img alt="রহিম স্টোর" width="170" height="34" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='34'%3E%3Ctext x='0' y='26' font-family='sans-serif' font-size='24' font-weight='700' fill='%23166534'%3ERahim Store%3C/text%3E%3C/svg%3E">
</picture>
<div class="photo" role="img" aria-label="সূর্যাস্তের ছবির বদলে একটি রঙিন বাক্স"></div>
<p>পতাকা: আসল · invert(1) · invert + hue-rotate</p>
<svg width="60" height="36" aria-hidden="true"><rect width="60" height="36" fill="#006a4e"/><circle cx="27" cy="18" r="12" fill="#f42a41"/></svg>
<svg class="inv" width="60" height="36" aria-hidden="true"><rect width="60" height="36" fill="#006a4e"/><circle cx="27" cy="18" r="12" fill="#f42a41"/></svg>
<svg class="inv-hue" width="60" height="36" aria-hidden="true"><rect width="60" height="36" fill="#006a4e"/><circle cx="27" cy="18" r="12" fill="#f42a41"/></svg>

Forced colors — ব্যবহারকারীর রং সবার ওপরে

কিছু মানুষের জন্য dark mode-ও যথেষ্ট নয় — কম দৃষ্টিশক্তি বা আলোর প্রতি তীব্র সংবেদনশীলতার কারণে তাঁরা Windows-এর contrast theme-এর মতো সেটিং চালু রাখেন। তখন ব্রাউজার forced colors mode-এ চলে যায়: আপনার দেওয়া প্রায় সব রং, পটভূমির ছবি আর ছায়া বাদ দিয়ে ব্যবহারকারীর বেছে নেওয়া অল্প কয়েকটি রং বসিয়ে দেয়। এখানে আপনার কাজ লড়াই করা নয়, সাহায্য করা:

@media (forced-colors: active) {
  /* রং দিয়ে বোঝানো সীমানা হারিয়ে যায় — স্বচ্ছ বর্ডার দিন, তখন সেটি দেখা যাবে */
  .card   { border: 1px solid transparent; }
  /* রঙের বদলে system color — ব্যবহারকারীর থিমের রংই নেবে */
  .badge  { border: 1px solid CanvasText; }
  .active { outline: 2px solid Highlight; }
}
/* forced-color-adjust: none — শুধু বিরল ক্ষেত্রে, যেমন রঙের নমুনা দেখানোর ঘর */

এখানে system color-এর নামগুলো (Canvas, CanvasText, Highlight) আবার এলো — অংশ ২-এর সেই একই ব্যবস্থা, শুধু এবার রং ঠিক করছেন ব্যবহারকারী নিজে। প্রধান ব্রাউজারগুলো forced-colors media query চেনে; বাস্তবে এটি সবচেয়ে বেশি চালু হয় Windows-এ। অ্যাক্সেসিবল CSS-এর বাকি দিক পর্ব ৪৫-এ বিস্তারিত দেখব।

৯ · পরীক্ষা — সেটিং না বদলেই দুই থিম দেখা

প্রতিবার পরীক্ষার জন্য ফোন বা Windows-এর থিম বদলানো ঝামেলার। DevTools এটা এক ক্লিকে করে দেয়:

1. Chrome বা Edge-এ DevTools খুলুন (F12), তারপর Ctrl+Shift+P চেপে Command Menu-তে Show Rendering লিখে Enter চাপুন।
2. Rendering প্যানেলে Emulate CSS media feature prefers-color-scheme থেকে dark বা light বেছে নিন — পাতা সাথে সাথে বদলাবে, সিস্টেম যেমন ছিল তেমনই থাকবে।
3. একই প্যানেলে forced-colors আর prefers-contrast-ও অনুকরণ করা যায়, আর দৃষ্টির নানা সীমাবদ্ধতা (যেমন বর্ণান্ধতা) অনুকরণের ব্যবস্থাও আছে।
4. Firefox-এ Inspector-এর Rules অংশের ওপরে আলো ও অন্ধকারের দুটি বোতাম দিয়ে একই কাজ হয়।

পরীক্ষার একটি ছোট তালিকা মাথায় রাখুন: দুই থিমে প্রতিটি পাতা একবার; ফর্মের ঘর, ড্রপডাউন আর scrollbar; লোগো আর আইকন; focus-এর দাগ (ডার্কে নীল outline হারিয়ে যায় কি না); আর পাতা reload করে ঝলক আছে কি না — ধীর নেটওয়ার্ক অনুকরণ করলে (Network প্যানেলে “Slow 4G”) ঝলক আরও স্পষ্ট ধরা পড়ে। শেষে Lighthouse-এর অ্যাক্সেসিবিলিটি পরীক্ষা দুই থিমে আলাদা করে চালান, কারণ contrast-এর ফল দুই জায়গায় আলাদা।

১০ · AI-এর যুগে — dark mode-এর কাজ AI-কে দিলে কী দেখবেন

“আমার সাইটে dark mode যোগ করো” বললে AI কয়েক সেকেন্ডে একটি বোতাম আর কিছু CSS দেয়, আর প্রথম দেখায় কাজও করে। কিন্তু AI নিজের কোড ধীর নেটওয়ার্কে reload করে ঝলক দেখে না, ডার্কে input বাক্স সাদা থেকে গেল কি না খেয়াল করে না, আর contrast মাপে না। ইন্টারনেটে বহু বছরের পুরোনো dark mode টিউটোরিয়াল থেকে শেখায় সে প্রায়ই পুরোনো কৌশল দেয়।

AI সাধারণত যেসব ভুল করে

AI-এর দেওয়া dark mode হাতে পেলে — যাচাইয়ের চেকলিস্ট

• DevTools-এর Rendering প্যানেলে prefers-color-scheme বদলে দুই থিমে প্রতিটি পাতা দেখেছি — ফর্ম, ড্রপডাউন, scrollbar-ও
• ধীর নেটওয়ার্কে ডার্ক বেছে reload করেছি — এক মুহূর্তের সাদা ঝলকও নেই
• DevTools-এর color picker-এ দুই থিমেই লেখা ও লিংকের contrast দেখেছি — ৪.৫:১ বা তার বেশি
• শুধু কীবোর্ডে Tab চেপে দেখেছি — ডার্কেও focus-এর দাগ স্পষ্ট; forced-colors অনুকরণেও বোতামের সীমানা দেখা যায়
• নতুন কোনো ফিচার (light-dark(), color-scheme: only) পেলে MDN আর Can I use-এ Baseline অবস্থা দেখেছি; HTML validator.w3.org-এ আর Lighthouse রিপোর্টও দুই থিমে চালিয়েছি