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

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 স্পেসিফিকেশনের একজন সহ-সম্পাদক। আনস্প্ল্যাশে ফিলিপ লিওনের হিরো ছবি।