কালার-স্কিম সিএসএস প্রপার্টি এবং সংশ্লিষ্ট মেটা ট্যাগ সহ উন্নত ডার্ক মোড ডিফল্ট স্টাইলিং

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

Thomas Steiner

পটভূমি

prefers-color-scheme ব্যবহারকারীদের পছন্দ মিডিয়া বৈশিষ্ট্য

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

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

ব্রাউজার সমর্থন

prefers-color-scheme

color-scheme

ব্যবহারকারী এজেন্ট স্টাইলশীট

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

WebKit এর UA স্টাইলশীট এবং এটি অন্ধকার মোড সম্পর্কিত কী করে তা আরও ঘনিষ্ঠভাবে দেখুন। (স্টাইলশীটে "অন্ধকার" এর জন্য একটি সম্পূর্ণ পাঠ্য অনুসন্ধান করুন৷) স্টাইলশীট দ্বারা প্রদত্ত ডিফল্ট ডার্ক মোড চালু বা বন্ধ কিনা তার উপর ভিত্তি করে পরিবর্তিত হয়৷ এটিকে ব্যাখ্যা করার জন্য, এখানে এমন একটি সিএসএস নিয়ম রয়েছে যা ব্যবহার করে :matches সিউডো ক্লাস এবং ওয়েবকিট-অভ্যন্তরীণ ভেরিয়েবল যেমন -apple-system-control-background , সেইসাথে WebKit-অভ্যন্তরীণ প্রিপ্রসেসর নির্দেশিকা #if defined :

input,
input:matches([type="password"], [type="search"]) {
  -webkit-appearance: textfield;
  #if defined(HAVE_OS_DARK_MODE_SUPPORT) &&
      HAVE_OS_DARK_MODE_SUPPORT
    color: text;
    background-color: -apple-system-control-background;
  #else
    background-color: white;
  #endif
  /* snip */
}

উপরের color এবং background-color বৈশিষ্ট্যগুলির জন্য আপনি কিছু অ-মানক মান লক্ষ্য করবেন। text বা -apple-system-control-background কোনটিই বৈধ CSS রঙ নয়। তারা WebKit-অভ্যন্তরীণ শব্দার্থিক রং.

দেখা যাচ্ছে, CSS-এর মানসম্মত শব্দার্থিক সিস্টেমের রং রয়েছে। সেগুলি CSS কালার মডিউল লেভেল 4 -এ নির্দিষ্ট করা হয়েছে। উদাহরণস্বরূপ, Canvas ( <canvas> ট্যাগের সাথে বিভ্রান্ত না হওয়া) অ্যাপ্লিকেশন সামগ্রী বা নথির পটভূমির জন্য, যেখানে CanvasText হল অ্যাপ্লিকেশন সামগ্রী বা নথিতে পাঠ্যের জন্য৷ দুটি একসাথে যায় এবং বিচ্ছিন্নভাবে ব্যবহার করা উচিত নয়।

ডিফল্টরূপে HTML উপাদানগুলি কীভাবে রেন্ডার করা উচিত তা নির্ধারণ করতে UA স্টাইলশীটগুলি তাদের নিজস্ব মালিকানা বা প্রমিত শব্দার্থিক সিস্টেমের রঙ ব্যবহার করতে পারে। অপারেটিং সিস্টেম ডার্ক মোডে সেট করা থাকলে বা একটি অন্ধকার থিম ব্যবহার করলে, CanvasText (বা text ) শর্তসাপেক্ষে সাদাতে সেট করা হবে এবং Canvas (বা -apple-system-control-background ) কালোতে সেট করা হবে। UA স্টাইলশীট তারপর শুধুমাত্র একবার নিম্নলিখিত CSS বরাদ্দ করে, এবং হালকা এবং অন্ধকার উভয় মোড কভার করে।

/**
  Not actual UA stylesheet code.
  For illustrative purposes only.
*/
body {
  color: CanvasText;
  background-color: Canvas
}

color-scheme CSS প্রপার্টি

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

এতে সংজ্ঞায়িত color-scheme বৈশিষ্ট্য একটি উপাদানকে নির্দেশ করতে দেয় যে এটি কোন রঙের স্কিমগুলির সাথে রেন্ডার করা আরামদায়ক। এই মানগুলি ব্যবহারকারীর পছন্দগুলির সাথে আলোচনা করা হয়, যার ফলে একটি নির্বাচিত রঙের স্কিম তৈরি হয় যা ব্যবহারকারী ইন্টারফেস (UI) জিনিসগুলিকে প্রভাবিত করে যেমন ফর্ম নিয়ন্ত্রণ এবং স্ক্রোল বারগুলির ডিফল্ট রঙগুলি, সেইসাথে CSS সিস্টেমের রঙগুলির ব্যবহৃত মানগুলিকে প্রভাবিত করে৷ নিম্নলিখিত মান বর্তমানে সমর্থিত:

• normal নির্দেশ করে যে উপাদানটি মোটেই রঙের স্কিম সম্পর্কে সচেতন নয়, এবং তাই উপাদানটিকে ব্রাউজারের ডিফল্ট রঙের স্কিম দিয়ে রেন্ডার করা উচিত।

• [ light | dark ]+ নির্দেশ করে যে উপাদানটি সচেতন এবং তালিকাভুক্ত রঙের স্কিমগুলি পরিচালনা করতে পারে এবং তাদের মধ্যে একটি অর্ডারকৃত পছন্দ প্রকাশ করে।

এই তালিকায়, light একটি হালকা রঙের স্কিমকে প্রতিনিধিত্ব করে, হালকা পটভূমির রঙ এবং গাঢ় ফোরগ্রাউন্ড রঙের সাথে, যেখানে গাঢ় পটভূমির রঙ এবং হালকা ফোরগ্রাউন্ড রঙের সাথে dark তার বিপরীতে প্রতিনিধিত্ব করে।

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

:root এলিমেন্টে, একটি রঙের স্কিম দিয়ে রেন্ডারিং অতিরিক্তভাবে ক্যানভাসের পৃষ্ঠের রঙকে (অর্থাৎ, বিশ্বব্যাপী পটভূমির রঙ), color বৈশিষ্ট্যের প্রাথমিক মান এবং সিস্টেমের রঙের ব্যবহৃত মানগুলিকে প্রভাবিত করতে হবে এবং এটিও উচিত। ভিউপোর্টের স্ক্রল বারগুলিকে প্রভাবিত করে।

/*
  The page supports both dark and light color schemes,
  and the page author prefers dark.
*/
:root {
  color-scheme: dark light;
}

color-scheme মেটা ট্যাগ

color-scheme সিএসএস প্রপার্টিকে সম্মান করার জন্য সিএসএসকে প্রথমে ডাউনলোড করতে হবে (যদি এটি <link rel="stylesheet"> এর মাধ্যমে উল্লেখ করা হয়) এবং পার্স করতে হবে। অবিলম্বে পছন্দসই রঙের স্কিম সহ পৃষ্ঠার পটভূমি রেন্ডার করতে ব্যবহারকারী এজেন্টদের সাহায্য করার জন্য, একটি <meta name="color-scheme"> উপাদানে একটি color-scheme মানও প্রদান করা যেতে পারে।

<!--
  The page supports both dark and light color schemes,
  and the page author prefers dark.
-->
<meta name="color-scheme" content="dark light">

color-scheme এবং prefers-color-scheme একত্রিত করা

যেহেতু মেটা ট্যাগ এবং CSS প্রপার্টি উভয়ই (যদি :root এলিমেন্টে প্রয়োগ করা হয়) শেষ পর্যন্ত একই আচরণের ফলস্বরূপ, আমি সবসময় মেটা ট্যাগের মাধ্যমে রঙের স্কিম নির্দিষ্ট করার পরামর্শ দিই, যাতে ব্রাউজার দ্রুত পছন্দের স্কিমটি গ্রহণ করতে পারে।

যদিও নিখুঁত বেসলাইন পৃষ্ঠাগুলির জন্য কোনও অতিরিক্ত CSS নিয়মের প্রয়োজন নেই, সাধারণ ক্ষেত্রে আপনার সর্বদা color-scheme prefers-color-scheme এর সাথে একত্রিত করা উচিত। উদাহরণস্বরূপ, মালিকানাধীন WebKit CSS রঙ -webkit-link , যা WebKit এবং Chrome দ্বারা ব্যবহৃত ক্লাসিক লিঙ্ক নীল rgb(0,0,238) এর জন্য, একটি কালো পটভূমিতে 2.23:1 এর অপর্যাপ্ত বৈসাদৃশ্য অনুপাত রয়েছে এবং WCAG AA উভয়ই ব্যর্থ হয় পাশাপাশি WCAG AAA প্রয়োজনীয়তা ।

আমি Chrome , WebKit , এবং Firefox- এর জন্য বাগগুলি খুলেছি সেইসাথে HTML স্ট্যান্ডার্ডে একটি মেটা সমস্যার সমাধান করার জন্য।

prefers-color-scheme এর সাথে ইন্টারপ্লে

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

<head>
  <meta name="color-scheme" content="dark light">
  <style>
    fieldset {
      background-color: gainsboro;
    }
    @media (prefers-color-scheme: dark) {
      fieldset {
        background-color: darkslategray;
      }
    }
  </style>
</head>
<body>
  <p>
    Lorem ipsum dolor sit amet, legere ancillae ne vis.
  </p>
  <form>
    <fieldset>
      <legend>Lorem ipsum</legend>
      <button type="button">Lorem ipsum</button>
    </fieldset>
  </form>
</body>

পৃষ্ঠার ইনলাইন CSS কোডটি <fieldset> উপাদানের background-color সাধারণ ক্ষেত্রে gainsboro সেট করে এবং ব্যবহারকারী যদি prefers-color-scheme ব্যবহারকারীর পছন্দ মিডিয়া বৈশিষ্ট্য অনুযায়ী একটি dark রঙের স্কিম পছন্দ করে তাহলে darkslategray সেট করে।

<meta name="color-scheme" content="dark light"> উপাদানের মাধ্যমে, পৃষ্ঠাটি ব্রাউজারকে বলে যে এটি একটি অন্ধকার এবং একটি হালকা থিম সমর্থন করে, একটি অন্ধকার থিমের জন্য অগ্রাধিকার দেয়৷

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

পৃষ্ঠায় বিকাশকারী-প্রদত্ত ইনলাইন স্টাইলশীটে নিয়ম অনুসরণ করে, ডার্ক মোড সক্ষম কিনা তার উপর ভিত্তি করে কীভাবে <fieldset> উপাদানটির background-color পরিবর্তন হয় তা লক্ষ্য করুন। এটি হয় gainsboro বা darkslategray ।

<button> উপাদানটির উপস্থিতি ব্যবহারকারী এজেন্ট স্টাইলশীট দ্বারা নিয়ন্ত্রিত হয়। এর color ButtonText সিস্টেমের রঙে সেট করা হয়েছে, এবং এর background-color এবং চারটি border-color সিস্টেম রঙে সেট করা হয়েছে ButtonFace ।

এখন লক্ষ্য করুন কিভাবে <button> উপাদানটির border-color পরিবর্তন হয়। border-top-color এবং border-bottom-color জন্য গণনা করা মান rgba(0, 0, 0, 0.847) (কালো) থেকে rgba(255, 255, 255, 0.847) (সাদা) হয়ে যায়, যেহেতু ব্যবহারকারী এজেন্ট রং স্কিমের উপর ভিত্তি করে গতিশীলভাবে ButtonFace আপডেট করে। একই <button> উপাদানের color জন্য প্রযোজ্য যা সংশ্লিষ্ট সিস্টেমের রঙ ButtonText এ সেট করা আছে।

ডেমো

আপনি গ্লিচ-এ একটি ডেমোতে প্রচুর সংখ্যক HTML উপাদানগুলিতে প্রয়োগ করা color-scheme প্রভাবগুলি দেখতে পারেন। ডেমো ইচ্ছাকৃতভাবে WCAG AA এবং WCAG AAA লঙ্ঘন দেখায় উপরের সতর্কতায় উল্লিখিত লিঙ্ক রঙের সাথে।

স্বীকৃতি

color-scheme CSS প্রপার্টি এবং সংশ্লিষ্ট মেটা ট্যাগ Rune Lillesveen দ্বারা প্রয়োগ করা হয়েছিল। রুনও CSS কালার অ্যাডজাস্টমেন্ট মডিউল লেভেল 1 স্পেসিফিকেশনের একজন সহ-সম্পাদক। আনস্প্ল্যাশে ফিলিপ লিওনের হিরো ছবি।

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

Thomas Steiner

পটভূমি

prefers-color-scheme ব্যবহারকারীদের পছন্দ মিডিয়া বৈশিষ্ট্য

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

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

ব্রাউজার সমর্থন

prefers-color-scheme

color-scheme

ব্যবহারকারী এজেন্ট স্টাইলশীট

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

WebKit এর UA স্টাইলশীট এবং এটি অন্ধকার মোড সম্পর্কিত কী করে তা আরও ঘনিষ্ঠভাবে দেখুন। (স্টাইলশীটে "অন্ধকার" এর জন্য একটি সম্পূর্ণ পাঠ্য অনুসন্ধান করুন৷) স্টাইলশীট দ্বারা প্রদত্ত ডিফল্ট ডার্ক মোড চালু বা বন্ধ কিনা তার উপর ভিত্তি করে পরিবর্তিত হয়৷ এটিকে ব্যাখ্যা করার জন্য, এখানে এমন একটি সিএসএস নিয়ম রয়েছে যা ব্যবহার করে :matches সিউডো ক্লাস এবং ওয়েবকিট-অভ্যন্তরীণ ভেরিয়েবল যেমন -apple-system-control-background , সেইসাথে WebKit-অভ্যন্তরীণ প্রিপ্রসেসর নির্দেশিকা #if defined :

input,
input:matches([type="password"], [type="search"]) {
  -webkit-appearance: textfield;
  #if defined(HAVE_OS_DARK_MODE_SUPPORT) &&
      HAVE_OS_DARK_MODE_SUPPORT
    color: text;
    background-color: -apple-system-control-background;
  #else
    background-color: white;
  #endif
  /* snip */
}

উপরের color এবং background-color বৈশিষ্ট্যগুলির জন্য আপনি কিছু অ-মানক মান লক্ষ্য করবেন। text বা -apple-system-control-background কোনটিই বৈধ CSS রঙ নয়। তারা WebKit-অভ্যন্তরীণ শব্দার্থিক রং.

দেখা যাচ্ছে, CSS-এর মানসম্মত শব্দার্থিক সিস্টেমের রং রয়েছে। সেগুলি CSS কালার মডিউল লেভেল 4 -এ নির্দিষ্ট করা হয়েছে। উদাহরণস্বরূপ, Canvas ( <canvas> ট্যাগের সাথে বিভ্রান্ত না হওয়া) অ্যাপ্লিকেশন সামগ্রী বা নথির পটভূমির জন্য, যেখানে CanvasText হল অ্যাপ্লিকেশন সামগ্রী বা নথিতে পাঠ্যের জন্য৷ দুটি একসাথে যায় এবং বিচ্ছিন্নভাবে ব্যবহার করা উচিত নয়।

ডিফল্টরূপে HTML উপাদানগুলি কীভাবে রেন্ডার করা উচিত তা নির্ধারণ করতে UA স্টাইলশীটগুলি তাদের নিজস্ব মালিকানা বা প্রমিত শব্দার্থিক সিস্টেমের রঙ ব্যবহার করতে পারে। অপারেটিং সিস্টেম ডার্ক মোডে সেট করা থাকলে বা একটি অন্ধকার থিম ব্যবহার করলে, CanvasText (বা text ) শর্তসাপেক্ষে সাদাতে সেট করা হবে এবং Canvas (বা -apple-system-control-background ) কালোতে সেট করা হবে। UA স্টাইলশীট তারপর শুধুমাত্র একবার নিম্নলিখিত CSS বরাদ্দ করে, এবং হালকা এবং অন্ধকার উভয় মোড কভার করে।

/**
  Not actual UA stylesheet code.
  For illustrative purposes only.
*/
body {
  color: CanvasText;
  background-color: Canvas
}

color-scheme CSS প্রপার্টি

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

এতে সংজ্ঞায়িত color-scheme বৈশিষ্ট্য একটি উপাদানকে নির্দেশ করতে দেয় যে এটি কোন রঙের স্কিমগুলির সাথে রেন্ডার করা আরামদায়ক। এই মানগুলি ব্যবহারকারীর পছন্দগুলির সাথে আলোচনা করা হয়, যার ফলে একটি নির্বাচিত রঙের স্কিম তৈরি হয় যা ব্যবহারকারী ইন্টারফেস (UI) জিনিসগুলিকে প্রভাবিত করে যেমন ফর্ম নিয়ন্ত্রণ এবং স্ক্রোল বারগুলির ডিফল্ট রঙগুলি, সেইসাথে CSS সিস্টেমের রঙগুলির ব্যবহৃত মানগুলিকে প্রভাবিত করে৷ নিম্নলিখিত মান বর্তমানে সমর্থিত:

• normal নির্দেশ করে যে উপাদানটি মোটেই রঙের স্কিম সম্পর্কে সচেতন নয়, এবং তাই উপাদানটিকে ব্রাউজারের ডিফল্ট রঙের স্কিম দিয়ে রেন্ডার করা উচিত।

• [ light | dark ]+ নির্দেশ করে যে উপাদানটি সচেতন এবং তালিকাভুক্ত রঙের স্কিমগুলি পরিচালনা করতে পারে এবং তাদের মধ্যে একটি অর্ডারকৃত পছন্দ প্রকাশ করে।

এই তালিকায়, light একটি হালকা রঙের স্কিমকে প্রতিনিধিত্ব করে, হালকা পটভূমির রঙ এবং গাঢ় ফোরগ্রাউন্ড রঙের সাথে, যেখানে গাঢ় পটভূমির রঙ এবং হালকা ফোরগ্রাউন্ড রঙের সাথে dark তার বিপরীতে প্রতিনিধিত্ব করে।

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

:root এলিমেন্টে, একটি রঙের স্কিম দিয়ে রেন্ডারিং অতিরিক্তভাবে ক্যানভাসের পৃষ্ঠের রঙকে (অর্থাৎ, বিশ্বব্যাপী পটভূমির রঙ), color বৈশিষ্ট্যের প্রাথমিক মান এবং সিস্টেমের রঙের ব্যবহৃত মানগুলিকে প্রভাবিত করতে হবে এবং এটিও উচিত। ভিউপোর্টের স্ক্রল বারগুলিকে প্রভাবিত করে।

/*
  The page supports both dark and light color schemes,
  and the page author prefers dark.
*/
:root {
  color-scheme: dark light;
}

color-scheme মেটা ট্যাগ

color-scheme সিএসএস প্রপার্টিকে সম্মান করার জন্য সিএসএসকে প্রথমে ডাউনলোড করতে হবে (যদি এটি <link rel="stylesheet"> এর মাধ্যমে উল্লেখ করা হয়) এবং পার্স করতে হবে। অবিলম্বে পছন্দসই রঙের স্কিম সহ পৃষ্ঠার পটভূমি রেন্ডার করতে ব্যবহারকারী এজেন্টদের সাহায্য করার জন্য, একটি <meta name="color-scheme"> উপাদানে একটি color-scheme মানও প্রদান করা যেতে পারে।

<!--
  The page supports both dark and light color schemes,
  and the page author prefers dark.
-->
<meta name="color-scheme" content="dark light">

color-scheme এবং prefers-color-scheme একত্রিত করা

যেহেতু মেটা ট্যাগ এবং CSS প্রপার্টি উভয়ই (যদি :root এলিমেন্টে প্রয়োগ করা হয়) শেষ পর্যন্ত একই আচরণের ফলস্বরূপ, আমি সবসময় মেটা ট্যাগের মাধ্যমে রঙের স্কিম নির্দিষ্ট করার পরামর্শ দিই, যাতে ব্রাউজার দ্রুত পছন্দের স্কিমটি গ্রহণ করতে পারে।

যদিও নিখুঁত বেসলাইন পৃষ্ঠাগুলির জন্য কোনও অতিরিক্ত CSS নিয়মের প্রয়োজন নেই, সাধারণ ক্ষেত্রে আপনার সর্বদা color-scheme prefers-color-scheme এর সাথে একত্রিত করা উচিত। উদাহরণস্বরূপ, মালিকানাধীন WebKit CSS রঙ -webkit-link , যা WebKit এবং Chrome দ্বারা ব্যবহৃত ক্লাসিক লিঙ্ক নীল rgb(0,0,238) এর জন্য, একটি কালো পটভূমিতে 2.23:1 এর অপর্যাপ্ত বৈসাদৃশ্য অনুপাত রয়েছে এবং WCAG AA উভয়ই ব্যর্থ হয় পাশাপাশি WCAG AAA প্রয়োজনীয়তা ।

আমি Chrome , WebKit , এবং Firefox- এর জন্য বাগগুলি খুলেছি সেইসাথে HTML স্ট্যান্ডার্ডে একটি মেটা সমস্যার সমাধান করার জন্য।

prefers-color-scheme এর সাথে ইন্টারপ্লে

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

<head>
  <meta name="color-scheme" content="dark light">
  <style>
    fieldset {
      background-color: gainsboro;
    }
    @media (prefers-color-scheme: dark) {
      fieldset {
        background-color: darkslategray;
      }
    }
  </style>
</head>
<body>
  <p>
    Lorem ipsum dolor sit amet, legere ancillae ne vis.
  </p>
  <form>
    <fieldset>
      <legend>Lorem ipsum</legend>
      <button type="button">Lorem ipsum</button>
    </fieldset>
  </form>
</body>

পৃষ্ঠার ইনলাইন CSS কোডটি <fieldset> উপাদানের background-color সাধারণ ক্ষেত্রে gainsboro সেট করে এবং ব্যবহারকারী যদি prefers-color-scheme ব্যবহারকারীর পছন্দ মিডিয়া বৈশিষ্ট্য অনুযায়ী একটি dark রঙের স্কিম পছন্দ করে তাহলে darkslategray সেট করে।

<meta name="color-scheme" content="dark light"> উপাদানের মাধ্যমে, পৃষ্ঠাটি ব্রাউজারকে বলে যে এটি একটি অন্ধকার এবং একটি হালকা থিম সমর্থন করে, একটি অন্ধকার থিমের জন্য অগ্রাধিকার দেয়৷

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

পৃষ্ঠায় বিকাশকারী-প্রদত্ত ইনলাইন স্টাইলশীটে নিয়ম অনুসরণ করে, ডার্ক মোড সক্ষম কিনা তার উপর ভিত্তি করে কীভাবে <fieldset> উপাদানটির background-color পরিবর্তন হয় তা লক্ষ্য করুন। এটি হয় gainsboro বা darkslategray ।

<button> উপাদানটির উপস্থিতি ব্যবহারকারী এজেন্ট স্টাইলশীট দ্বারা নিয়ন্ত্রিত হয়। এর color ButtonText সিস্টেমের রঙে সেট করা হয়েছে, এবং এর background-color এবং চারটি border-color সিস্টেম রঙে সেট করা হয়েছে ButtonFace ।

এখন লক্ষ্য করুন কিভাবে <button> উপাদানটির border-color পরিবর্তন হয়। border-top-color এবং border-bottom-color জন্য গণনা করা মান rgba(0, 0, 0, 0.847) (কালো) থেকে rgba(255, 255, 255, 0.847) (সাদা) হয়ে যায়, যেহেতু ব্যবহারকারী এজেন্ট রং স্কিমের উপর ভিত্তি করে গতিশীলভাবে ButtonFace আপডেট করে। একই <button> উপাদানের color জন্য প্রযোজ্য যা সংশ্লিষ্ট সিস্টেমের রঙ ButtonText এ সেট করা আছে।

ডেমো

আপনি গ্লিচ-এ একটি ডেমোতে প্রচুর সংখ্যক HTML উপাদানগুলিতে প্রয়োগ করা color-scheme প্রভাবগুলি দেখতে পারেন। ডেমো ইচ্ছাকৃতভাবে WCAG AA এবং WCAG AAA লঙ্ঘন দেখায় উপরের সতর্কতায় উল্লিখিত লিঙ্ক রঙের সাথে।

স্বীকৃতি

color-scheme CSS প্রপার্টি এবং সংশ্লিষ্ট মেটা ট্যাগ Rune Lillesveen দ্বারা প্রয়োগ করা হয়েছিল। রুনও CSS কালার অ্যাডজাস্টমেন্ট মডিউল লেভেল 1 স্পেসিফিকেশনের একজন সহ-সম্পাদক। আনস্প্ল্যাশে ফিলিপ লিওনের হিরো ছবি।

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

Thomas Steiner

পটভূমি

prefers-color-scheme ব্যবহারকারীদের পছন্দ মিডিয়া বৈশিষ্ট্য

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

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

ব্রাউজার সমর্থন

prefers-color-scheme

color-scheme

ব্যবহারকারী এজেন্ট স্টাইলশীট

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

WebKit এর UA স্টাইলশীট এবং এটি অন্ধকার মোড সম্পর্কিত কী করে তা আরও ঘনিষ্ঠভাবে দেখুন। (স্টাইলশীটে "অন্ধকার" এর জন্য একটি সম্পূর্ণ পাঠ্য অনুসন্ধান করুন৷) স্টাইলশীট দ্বারা প্রদত্ত ডিফল্ট ডার্ক মোড চালু বা বন্ধ কিনা তার উপর ভিত্তি করে পরিবর্তিত হয়৷ এটিকে ব্যাখ্যা করার জন্য, এখানে এমন একটি সিএসএস নিয়ম রয়েছে যা ব্যবহার করে :matches সিউডো ক্লাস এবং ওয়েবকিট-অভ্যন্তরীণ ভেরিয়েবল যেমন -apple-system-control-background , সেইসাথে WebKit-অভ্যন্তরীণ প্রিপ্রসেসর নির্দেশিকা #if defined :

input,
input:matches([type="password"], [type="search"]) {
  -webkit-appearance: textfield;
  #if defined(HAVE_OS_DARK_MODE_SUPPORT) &&
      HAVE_OS_DARK_MODE_SUPPORT
    color: text;
    background-color: -apple-system-control-background;
  #else
    background-color: white;
  #endif
  /* snip */
}

উপরের color এবং background-color বৈশিষ্ট্যগুলির জন্য আপনি কিছু অ-মানক মান লক্ষ্য করবেন। text বা -apple-system-control-background কোনটিই বৈধ CSS রঙ নয়। তারা WebKit-অভ্যন্তরীণ শব্দার্থিক রং.

দেখা যাচ্ছে, CSS-এর মানসম্মত শব্দার্থিক সিস্টেমের রং রয়েছে। সেগুলি CSS কালার মডিউল লেভেল 4 -এ নির্দিষ্ট করা হয়েছে। উদাহরণস্বরূপ, Canvas ( <canvas> ট্যাগের সাথে বিভ্রান্ত না হওয়া) অ্যাপ্লিকেশন সামগ্রী বা নথির পটভূমির জন্য, যেখানে CanvasText হল অ্যাপ্লিকেশন সামগ্রী বা নথিতে পাঠ্যের জন্য৷ দুটি একসাথে যায় এবং বিচ্ছিন্নভাবে ব্যবহার করা উচিত নয়।

ডিফল্টরূপে HTML উপাদানগুলি কীভাবে রেন্ডার করা উচিত তা নির্ধারণ করতে UA স্টাইলশীটগুলি তাদের নিজস্ব মালিকানা বা প্রমিত শব্দার্থিক সিস্টেমের রঙ ব্যবহার করতে পারে। অপারেটিং সিস্টেম ডার্ক মোডে সেট করা থাকলে বা একটি অন্ধকার থিম ব্যবহার করলে, CanvasText (বা text ) শর্তসাপেক্ষে সাদাতে সেট করা হবে এবং Canvas (বা -apple-system-control-background ) কালোতে সেট করা হবে। UA স্টাইলশীট তারপর শুধুমাত্র একবার নিম্নলিখিত CSS বরাদ্দ করে, এবং হালকা এবং অন্ধকার উভয় মোড কভার করে।

/**
  Not actual UA stylesheet code.
  For illustrative purposes only.
*/
body {
  color: CanvasText;
  background-color: Canvas
}

color-scheme CSS প্রপার্টি

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

এতে সংজ্ঞায়িত color-scheme বৈশিষ্ট্য একটি উপাদানকে নির্দেশ করতে দেয় যে এটি কোন রঙের স্কিমগুলির সাথে রেন্ডার করা আরামদায়ক। এই মানগুলি ব্যবহারকারীর পছন্দগুলির সাথে আলোচনা করা হয়, যার ফলে একটি নির্বাচিত রঙের স্কিম তৈরি হয় যা ব্যবহারকারী ইন্টারফেস (UI) জিনিসগুলিকে প্রভাবিত করে যেমন ফর্ম নিয়ন্ত্রণ এবং স্ক্রোল বারগুলির ডিফল্ট রঙগুলি, সেইসাথে CSS সিস্টেমের রঙগুলির ব্যবহৃত মানগুলিকে প্রভাবিত করে৷ নিম্নলিখিত মান বর্তমানে সমর্থিত:

• normal নির্দেশ করে যে উপাদানটি মোটেই রঙের স্কিম সম্পর্কে সচেতন নয়, এবং তাই উপাদানটিকে ব্রাউজারের ডিফল্ট রঙের স্কিম দিয়ে রেন্ডার করা উচিত।

• [ light | dark ]+ নির্দেশ করে যে উপাদানটি সচেতন এবং তালিকাভুক্ত রঙের স্কিমগুলি পরিচালনা করতে পারে এবং তাদের মধ্যে একটি অর্ডারকৃত পছন্দ প্রকাশ করে।

এই তালিকায়, light একটি হালকা রঙের স্কিমকে প্রতিনিধিত্ব করে, হালকা পটভূমির রঙ এবং গাঢ় ফোরগ্রাউন্ড রঙের সাথে, যেখানে গাঢ় পটভূমির রঙ এবং হালকা ফোরগ্রাউন্ড রঙের সাথে dark তার বিপরীতে প্রতিনিধিত্ব করে।

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

:root এলিমেন্টে, একটি রঙের স্কিম দিয়ে রেন্ডারিং অতিরিক্তভাবে ক্যানভাসের পৃষ্ঠের রঙকে (অর্থাৎ, বিশ্বব্যাপী পটভূমির রঙ), color বৈশিষ্ট্যের প্রাথমিক মান এবং সিস্টেমের রঙের ব্যবহৃত মানগুলিকে প্রভাবিত করতে হবে এবং এটিও উচিত। ভিউপোর্টের স্ক্রল বারগুলিকে প্রভাবিত করে।

/*
  The page supports both dark and light color schemes,
  and the page author prefers dark.
*/
:root {
  color-scheme: dark light;
}

color-scheme মেটা ট্যাগ

color-scheme সিএসএস প্রপার্টিকে সম্মান করার জন্য সিএসএসকে প্রথমে ডাউনলোড করতে হবে (যদি এটি <link rel="stylesheet"> এর মাধ্যমে উল্লেখ করা হয়) এবং পার্স করতে হবে। অবিলম্বে পছন্দসই রঙের স্কিম সহ পৃষ্ঠার পটভূমি রেন্ডার করতে ব্যবহারকারী এজেন্টদের সাহায্য করার জন্য, একটি <meta name="color-scheme"> উপাদানে একটি color-scheme মানও প্রদান করা যেতে পারে।

<!--
  The page supports both dark and light color schemes,
  and the page author prefers dark.
-->
<meta name="color-scheme" content="dark light">

color-scheme এবং prefers-color-scheme একত্রিত করা

যেহেতু মেটা ট্যাগ এবং CSS প্রপার্টি উভয়ই (যদি :root এলিমেন্টে প্রয়োগ করা হয়) শেষ পর্যন্ত একই আচরণের ফলস্বরূপ, আমি সবসময় মেটা ট্যাগের মাধ্যমে রঙের স্কিম নির্দিষ্ট করার পরামর্শ দিই, যাতে ব্রাউজার দ্রুত পছন্দের স্কিমটি গ্রহণ করতে পারে।

যদিও নিখুঁত বেসলাইন পৃষ্ঠাগুলির জন্য কোনও অতিরিক্ত CSS নিয়মের প্রয়োজন নেই, সাধারণ ক্ষেত্রে আপনার সর্বদা color-scheme prefers-color-scheme এর সাথে একত্রিত করা উচিত। উদাহরণস্বরূপ, মালিকানাধীন WebKit CSS রঙ -webkit-link , যা WebKit এবং Chrome দ্বারা ব্যবহৃত ক্লাসিক লিঙ্ক নীল rgb(0,0,238) এর জন্য, একটি কালো পটভূমিতে 2.23:1 এর অপর্যাপ্ত বৈসাদৃশ্য অনুপাত রয়েছে এবং WCAG AA উভয়ই ব্যর্থ হয় পাশাপাশি WCAG AAA প্রয়োজনীয়তা ।

আমি Chrome , WebKit , এবং Firefox- এর জন্য বাগগুলি খুলেছি সেইসাথে HTML স্ট্যান্ডার্ডে একটি মেটা সমস্যার সমাধান করার জন্য।

prefers-color-scheme এর সাথে ইন্টারপ্লে

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

<head>
  <meta name="color-scheme" content="dark light">
  <style>
    fieldset {
      background-color: gainsboro;
    }
    @media (prefers-color-scheme: dark) {
      fieldset {
        background-color: darkslategray;
      }
    }
  </style>
</head>
<body>
  <p>
    Lorem ipsum dolor sit amet, legere ancillae ne vis.
  </p>
  <form>
    <fieldset>
      <legend>Lorem ipsum</legend>
      <button type="button">Lorem ipsum</button>
    </fieldset>
  </form>
</body>

পৃষ্ঠার ইনলাইন CSS কোডটি <fieldset> উপাদানের background-color সাধারণ ক্ষেত্রে gainsboro সেট করে এবং ব্যবহারকারী যদি prefers-color-scheme ব্যবহারকারীর পছন্দ মিডিয়া বৈশিষ্ট্য অনুযায়ী একটি dark রঙের স্কিম পছন্দ করে তাহলে darkslategray সেট করে।

<meta name="color-scheme" content="dark light"> উপাদানের মাধ্যমে, পৃষ্ঠাটি ব্রাউজারকে বলে যে এটি একটি অন্ধকার এবং একটি হালকা থিম সমর্থন করে, একটি অন্ধকার থিমের জন্য অগ্রাধিকার দেয়৷

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

পৃষ্ঠায় বিকাশকারী-প্রদত্ত ইনলাইন স্টাইলশীটে নিয়ম অনুসরণ করে, ডার্ক মোড সক্ষম কিনা তার উপর ভিত্তি করে কীভাবে <fieldset> উপাদানটির background-color পরিবর্তন হয় তা লক্ষ্য করুন। এটি হয় gainsboro বা darkslategray ।

<button> উপাদানটির উপস্থিতি ব্যবহারকারী এজেন্ট স্টাইলশীট দ্বারা নিয়ন্ত্রিত হয়। এর color ButtonText সিস্টেমের রঙে সেট করা হয়েছে, এবং এর background-color এবং চারটি border-color সিস্টেম রঙে সেট করা হয়েছে ButtonFace ।

এখন লক্ষ্য করুন কিভাবে <button> উপাদানটির border-color পরিবর্তন হয়। border-top-color এবং border-bottom-color জন্য গণনা করা মান rgba(0, 0, 0, 0.847) (কালো) থেকে rgba(255, 255, 255, 0.847) (সাদা) হয়ে যায়, যেহেতু ব্যবহারকারী এজেন্ট রং স্কিমের উপর ভিত্তি করে গতিশীলভাবে ButtonFace আপডেট করে। একই <button> উপাদানের color জন্য প্রযোজ্য যা সংশ্লিষ্ট সিস্টেমের রঙ ButtonText এ সেট করা আছে।

ডেমো

আপনি গ্লিচের একটি ডেমোতে প্রচুর সংখ্যক HTML উপাদানগুলিতে প্রয়োগ করা color-scheme প্রভাবগুলি দেখতে পারেন। ডেমো ইচ্ছাকৃতভাবে WCAG AA এবং WCAG AAA লঙ্ঘন দেখায় উপরের সতর্কতায় উল্লিখিত লিঙ্ক রঙের সাথে।

স্বীকৃতি

color-scheme CSS প্রপার্টি এবং সংশ্লিষ্ট মেটা ট্যাগ Rune Lillesveen দ্বারা প্রয়োগ করা হয়েছিল। রুনও CSS কালার অ্যাডজাস্টমেন্ট মডিউল লেভেল 1 স্পেসিফিকেশনের একজন সহ-সম্পাদক। আনস্প্ল্যাশে ফিলিপ লিওনের হিরো ছবি।

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

Thomas Steiner

পটভূমি

prefers-color-scheme ব্যবহারকারীদের পছন্দ মিডিয়া বৈশিষ্ট্য

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

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

ব্রাউজার সমর্থন

prefers-color-scheme

color-scheme

ব্যবহারকারী এজেন্ট স্টাইলশিট

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

ওয়েবকিটের ইউএ স্টাইলশিট এবং এটি ডার্ক মোড সম্পর্কিত কী করে তা ঘনিষ্ঠভাবে দেখুন। (স্টাইলশিটে "গা dark ়" জন্য একটি সম্পূর্ণ পাঠ্য অনুসন্ধান করুন)) স্টাইলশিট দ্বারা সরবরাহিত ডিফল্ট অন্ধকার মোড চালু বা বন্ধ রয়েছে কিনা তার উপর ভিত্তি করে পরিবর্তিত হয়। এটি চিত্রিত করার জন্য, এখানে একটি সিএসএস বিধি ব্যবহার করে রয়েছে :matches -apple-system-control-background পাশাপাশি ওয়েবকিট-অভ্যন্তরীণ প্রিপ্রোসেসর নির্দেশিকা #if defined :

input,
input:matches([type="password"], [type="search"]) {
  -webkit-appearance: textfield;
  #if defined(HAVE_OS_DARK_MODE_SUPPORT) &&
      HAVE_OS_DARK_MODE_SUPPORT
    color: text;
    background-color: -apple-system-control-background;
  #else
    background-color: white;
  #endif
  /* snip */
}

আপনি উপরের color এবং background-color বৈশিষ্ট্যগুলির জন্য কিছু অ-মানক মান লক্ষ্য করবেন। text বা -apple-system-control-background উভয়ই বৈধ সিএসএস রঙ নয়। এগুলি ওয়েবকিট-অভ্যন্তরীণ শব্দার্থক রঙ।

দেখা যাচ্ছে, সিএসএসের মানক সিস্টেমের রঙগুলি মানক করা হয়েছে। এগুলি সিএসএস রঙিন মডিউল স্তর 4 এ নির্দিষ্ট করা হয়েছে। উদাহরণস্বরূপ, Canvas ( <canvas> ট্যাগের সাথে বিভ্রান্ত না হওয়া) অ্যাপ্লিকেশন সামগ্রী বা নথিগুলির পটভূমির জন্য, যেখানে CanvasText অ্যাপ্লিকেশন সামগ্রী বা নথিগুলিতে পাঠ্যের জন্য। দু'জন একসাথে যান এবং বিচ্ছিন্নভাবে ব্যবহার করা উচিত নয়।

ইউএ স্টাইলশিটগুলি কীভাবে এইচটিএমএল উপাদানগুলিকে ডিফল্টরূপে রেন্ডার করা উচিত তা নির্ধারণ করতে তাদের নিজস্ব মালিকানাধীন বা মানক শব্দার্থক সিস্টেমের রঙগুলি ব্যবহার করতে পারে। যদি অপারেটিং সিস্টেমটি ডার্ক মোডে সেট করা থাকে বা একটি গা dark ় থিম ব্যবহার করে তবে CanvasText (বা text ) শর্তাধীন সাদা হয়ে সেট করা হবে এবং Canvas (বা -apple-system-control-background ) কালোতে সেট করা হবে। ইউএ স্টাইলশিটটি তখন নিম্নলিখিত সিএসএসকে কেবল একবারই বরাদ্দ করে এবং হালকা এবং গা dark ় উভয় মোডকে কভার করে।

/**
  Not actual UA stylesheet code.
  For illustrative purposes only.
*/
body {
  color: CanvasText;
  background-color: Canvas
}

color-scheme সিএসএস সম্পত্তি

সিএসএস কালার অ্যাডজাস্টমেন্ট মডিউল স্তর 1 স্পেসিফিকেশন একটি মডেল পরিচয় করিয়ে দেয় এবং ব্যবহারকারী এজেন্টের দ্বারা স্বয়ংক্রিয় রঙ সমন্বয়কে নিয়ন্ত্রণ করে যেমন ব্যবহারকারীর পছন্দগুলি যেমন ডার্ক মোড, কনট্রাস্ট অ্যাডজাস্টমেন্ট বা নির্দিষ্ট পছন্দসই রঙিন স্কিমগুলি পরিচালনা করার উদ্দেশ্য।

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

• normal ইঙ্গিত দেয় যে উপাদানটি রঙিন স্কিমগুলি সম্পর্কে মোটেও সচেতন নয় এবং তাই উপাদানটি ব্রাউজারের ডিফল্ট রঙ স্কিমের সাথে রেন্ডার করা উচিত।

• [ light | dark ]+ নির্দেশ করে যে উপাদানটি সচেতন এবং তালিকাভুক্ত রঙের স্কিমগুলি পরিচালনা করতে পারে এবং তাদের মধ্যে একটি আদেশযুক্ত পছন্দ প্রকাশ করে।

এই তালিকায়, light হালকা রঙের স্কিমের প্রতিনিধিত্ব করে, হালকা পটভূমির রঙ এবং গা dark ় অগ্রভাগের রঙগুলির সাথে, যেখানে dark dark ় পটভূমির রঙ এবং হালকা অগ্রভাগের রঙগুলির সাথে অন্ধকার বিপরীত উপস্থাপন করে।

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

এতে :root উপাদানটি, রঙিন স্কিমের সাথে রেন্ডারিংয়ে অতিরিক্তভাবে ক্যানভাসের পৃষ্ঠের রঙকে প্রভাবিত করতে হবে (যা বৈশ্বিক পটভূমির রঙ), color সম্পত্তির প্রাথমিক মান এবং সিস্টেমের রঙের ব্যবহৃত মানগুলিও এবং এটিও হওয়া উচিত ভিউপোর্টের স্ক্রোল বারগুলিকে প্রভাবিত করুন।

/*
  The page supports both dark and light color schemes,
  and the page author prefers dark.
*/
:root {
  color-scheme: dark light;
}

color-scheme মেটা ট্যাগ

color-scheme সিএসএস সম্পত্তিকে সম্মান করার জন্য সিএসএসকে প্রথমে ডাউনলোড করা প্রয়োজন (যদি এটি <link rel="stylesheet"> এর মাধ্যমে উল্লেখ করা হয়) এবং পার্স করা হবে। অবিলম্বে কাঙ্ক্ষিত রঙ স্কিমের সাথে পৃষ্ঠার পটভূমি রেন্ডার করতে ব্যবহারকারী এজেন্টদের সহায়তা করার জন্য, একটি color-scheme মান একটি <meta name="color-scheme"> উপাদানটিতেও সরবরাহ করা যেতে পারে।

<!--
  The page supports both dark and light color schemes,
  and the page author prefers dark.
-->
<meta name="color-scheme" content="dark light">

color-scheme সংমিশ্রণ এবং prefers-color-scheme

যেহেতু মেটা ট্যাগ এবং সিএসএস সম্পত্তি উভয়ই (যদি প্রয়োগ করা হয় :root এলিমেন্টে) অবশেষে একই আচরণের ফলস্বরূপ, আমি সর্বদা মেটা ট্যাগের মাধ্যমে রঙিন স্কিম নির্দিষ্ট করার পরামর্শ দিই, যাতে ব্রাউজারটি পছন্দসই স্কিমটিতে দ্রুত গ্রহণ করতে পারে।

যদিও পরম বেসলাইন পৃষ্ঠাগুলির জন্য কোনও অতিরিক্ত সিএসএস বিধি প্রয়োজনীয় নয়, সাধারণ ক্ষেত্রে আপনার সর্বদা color-scheme prefers-color-scheme সাথে একত্রিত করা উচিত। উদাহরণস্বরূপ, ক্লাসিক লিঙ্ক ব্লু rgb(0,0,238) এর জন্য ওয়েবকিট এবং ক্রোম দ্বারা ব্যবহৃত মালিকানাধীন ওয়েবকিট সিএসএস কালার -webkit-link , একটি কালো পটভূমিতে 2.23: 1 এর অপর্যাপ্ত বিপরীতে অনুপাত রয়েছে এবং ডাব্লুসিএজি এএ উভয় হিসাবে ব্যর্থ হয়েছে পাশাপাশি ডাব্লুসিএজি এএএ প্রয়োজনীয়তা ।

আমি ক্রোম , ওয়েবকিট এবং ফায়ারফক্সের পাশাপাশি এইচটিএমএল স্ট্যান্ডার্ডে এটি স্থির করার জন্য একটি মেটা ইস্যুর জন্য বাগগুলি খুলেছি।

prefers-color-scheme ইন্টারপ্লে

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

<head>
  <meta name="color-scheme" content="dark light">
  <style>
    fieldset {
      background-color: gainsboro;
    }
    @media (prefers-color-scheme: dark) {
      fieldset {
        background-color: darkslategray;
      }
    }
  </style>
</head>
<body>
  <p>
    Lorem ipsum dolor sit amet, legere ancillae ne vis.
  </p>
  <form>
    <fieldset>
      <legend>Lorem ipsum</legend>
      <button type="button">Lorem ipsum</button>
    </fieldset>
  </form>
</body>

পৃষ্ঠায় ইনলাইন সিএসএস কোডটি সাধারণ ক্ষেত্রে gainsboro <fieldset> উপাদানটির background-color এবং darkslategray সেট করে যদি ব্যবহারকারী prefers-color-scheme ব্যবহারকারীর পছন্দের মিডিয়া বৈশিষ্ট্য অনুসারে একটি dark রঙের স্কিম পছন্দ করে।

<meta name="color-scheme" content="dark light"> উপাদানটির মাধ্যমে পৃষ্ঠাটি ব্রাউজারটিকে বলে যে এটি একটি অন্ধকার এবং একটি হালকা থিম সমর্থন করে, একটি গা dark ় থিমের জন্য অগ্রাধিকার সহ।

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

পৃষ্ঠায় বিকাশকারী-সরবরাহিত ইনলাইন স্টাইলশিটের নিয়মগুলি অনুসরণ করে অন্ধকার মোড সক্ষম কিনা তার উপর ভিত্তি করে <fieldset> এলিমেন্টের background-color পরিবর্তনগুলি কীভাবে নোট করুন। এটি হয় gainsboro বা darkslategray ।

<button> এলিমেন্টের উপস্থিতি ব্যবহারকারী এজেন্ট স্টাইলশিট দ্বারা নিয়ন্ত্রিত হয়। এর color ButtonText সিস্টেমের রঙে সেট করা আছে এবং এর background-color এবং চারটি border-color এস সিস্টেমের রঙ ButtonFace সেট করা আছে।

এখন নোট করুন কীভাবে <button> উপাদানটির border-color পরিবর্তন হয়। ব্যবহারকারী যেহেতু rgba(0, 0, 0, 0.847) (ব্ল্যাকিশ) থেকে rgba(255, 255, 255, 0.847) (হুইটিশ) থেকে border-top-color এবং border-bottom-color স্যুইচগুলির জন্য গণিত মান এজেন্ট রঙ স্কিমের উপর ভিত্তি করে গতিশীলভাবে ButtonFace আপডেট করে। একই <button> উপাদানটির color জন্য প্রযোজ্য যা সংশ্লিষ্ট সিস্টেমের রঙ ButtonText সেট করা আছে।

ডেমো

আপনি দেখতে পাচ্ছেন color-scheme প্রভাবগুলি গ্লিচ-এর একটি ডেমোতে প্রচুর সংখ্যক এইচটিএমএল উপাদানগুলিতে প্রয়োগ করা হয়েছে। ডেমোটি ইচ্ছাকৃতভাবে ডাব্লুসিএজি এএ এবং ডাব্লুসিএজি এএএ লঙ্ঘনটি উপরের সতর্কতার সাথে উল্লিখিত লিঙ্কের রঙগুলির সাথে দেখায়।

স্বীকৃতি

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