আলো-অন্ধকার() সহ CSS রঙ-স্কিম-নির্ভর রং

সিস্টেম রং বর্তমান ব্যবহৃত color-scheme মান প্রতিক্রিয়া করার ক্ষমতা আছে. light-dark() ফাংশন লেখকদের কাছে একই ক্ষমতা প্রকাশ করে।

Bramus

CSS-এ সিস্টেমের রং

CSS-এ আপনি অনেকগুলি রঙের স্থানের একটি থেকে অনেকগুলি রঙ ব্যবহার করতে পারেন। উদাহরণস্বরূপ, আপনি নামযুক্ত রঙ, হেক্স রঙ, একটি নির্দিষ্ট রঙের স্থানের সাথে যুক্ত রঙ ফাংশন ব্যবহার করতে পারেন, আরও সাধারণ color() ফাংশন।

উদাহরণস্বরূপ, নামযুক্ত রঙ cornflowerblue #6495ED , বা hsl(218.54deg 79.19% 66.08%) , বা color(display-p3 0.43 0.58 0.9) হিসাবেও উপস্থাপন করা যেতে পারে।

এই বিভিন্ন নাম এবং ফর্ম্যাটগুলি ছাড়াও, CSS-এ সিস্টেমের রঙ হিসাবে বর্ণিত রঙগুলি অন্তর্ভুক্ত রয়েছে, CSS কালার মডিউল লেভেল 4- এ নির্দিষ্ট করা হয়েছে। এই সিস্টেম রং ব্রাউজার দ্বারা সংজ্ঞায়িত রং এবং একটি কীওয়ার্ড দ্বারা প্রতিনিধিত্ব করা হয়.

উদাহরণস্বরূপ, সিস্টেমের রঙ Canvas – <canvas> উপাদানের সাথে বিভ্রান্ত না হওয়া–"অ্যাপ্লিকেশন বিষয়বস্তু বা নথির পটভূমি" প্রতিনিধিত্ব করে। এটি CanvasText সাথে সুন্দরভাবে যুক্ত হয় এবং এটিকে "অ্যাপ্লিকেশন বিষয়বস্তু বা নথিতে পাঠ্য" উপস্থাপন করে।

CSS এ, আপনি সেগুলিকে নিম্নরূপ ব্যবহার করেন:

body {
  color: CanvasText;
  background-color: Canvas;
}

ডিফল্টরূপে, CanvasText black কাছাকাছি একটি রঙের ফলাফল করে এবং Canvas হল একটি রঙ যা white কাছাকাছি। প্রকৃত বাস্তবায়ন ব্রাউজারের উপর নির্ভর করে। উদাহরণস্বরূপ, Chrome-এ CanvasText এর ফলাফল #121212 হয় যেখানে Safari এটিকে সামান্য হালকা #1e1e1e হিসাবে নির্দিষ্ট করেছে।

এই সিস্টেম রঙগুলির একটি লুকানো শক্তি হল যে তারা color-scheme সম্পত্তির গণনা করা মানকে সাড়া দিতে পারে। উদাহরণস্বরূপ, ব্যবহৃত color-scheme dark হলে CanvasText এবং Canvas মানগুলি চারপাশে উল্টে যায়।

:root {
  color-scheme: dark;
}

body {
  color: CanvasText;
  background-color: Canvas;
}

নিম্নলিখিত ডেমোতে, আপনি :root এ সেট করা color-scheme মান পরিবর্তন করতে পারেন এবং দেখতে পারেন কিভাবে পৃষ্ঠাটি সাড়া দেয়।

• light dark সেট করা হলে, এটি নির্দেশ করে যে উপাদানটি হালকা এবং অন্ধকার উভয় মোড সমর্থন করে। কোন মান ব্যবহার করা হবে তার পছন্দ prefers-color-scheme মিডিয়া অবস্থার মানের উপর নির্ভর করে।
• light সেট করা হলে, এটি নির্দেশ করে যে উপাদানটি একটি হালকা রঙের স্কিম সমর্থন করে।
• dark সেট করা হলে, এটি নির্দেশ করে যে উপাদানটি একটি গাঢ় রঙের স্কিম সমর্থন করে।

light-dark()

এখন অবধি, ব্যবহৃত color-scheme মানটির প্রতিক্রিয়া এমন কিছু ছিল যা সিস্টেমের রঙের জন্য সংরক্ষিত ছিল। CSS কালার মডিউল লেভেল 5- এ নির্দিষ্ট করা light-dark() এর জন্য ধন্যবাদ, এখন আপনারও একই ক্ষমতা রয়েছে।

light-dark() হল একটি ফাংশন যা দুটি আর্গুমেন্ট গ্রহণ করে, উভয়কেই একটি <color> হতে হবে। ব্যবহৃত রঙের স্কিমের উপর নির্ভর করে উভয়ের মধ্যে একটি বাছাই করা হয়।

• যদি ব্যবহৃত রঙের স্কিমটি light বা অজানা হয় তবে প্রথম মানের গণনাকৃত মানটি ফেরত পাবে।
• যদি ব্যবহৃত রঙের স্কিমটি dark হয় তবে দ্বিতীয় রঙের গণনাকৃত মান ফেরত দেওয়া হয়।

light-dark() এর ফলাফল হল একটি <color> । এটি CSS-এ ব্যবহার করা যেতে পারে যেখানে একটি <color> গৃহীত হয়। উদাহরণস্বরূপ color এবং background-color বৈশিষ্ট্যগুলিতে, তবে linear-gradient() মতো একটি ফাংশনেও।

নিম্নলিখিত উদাহরণে, ব্যবহৃত ব্যাকগ্রাউন্ড-কালার হল #333 ডার্ক মোডে, অথবা #ccc লাইট মোডে (বা একটি অজানা মোড)।

:root {
  color-scheme: light dark;
}

body {
  background-color: light-dark(#ccc, #333);
}

মনে রাখবেন light-dark() সঠিকভাবে কাজ করার জন্য, আপনাকে একটি color-scheme নির্দিষ্ট করতে হবে। যেহেতু সেই সম্পত্তি উত্তরাধিকারসূত্রে পাওয়া যায়, আপনি সাধারণত এটিকে :root এ সেট করেন তবে আপনি যদি চান তবে আপনি এটি একটি নির্দিষ্ট উপাদানে সেট করতে বেছে নিতে পারেন।

ব্যবহারিক প্রয়োগ

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

:root {
  --primary-color: #333;
  --primary-background: #e4e4e4;
  --highlight-color: hotpink;
}

@media (prefers-color-scheme: dark) {
  :root {
    --primary-color: #fafafa;
    --primary-background: #121212;
    --highlight-color: lime;
  }
}

light-dark() এর জন্য ধন্যবাদ, এই কোডটি সরলীকৃত করা যেতে পারে। যেহেতু color-scheme :root এ light dark সেট করা আছে, তাই আপনার ওএসকে হালকা থেকে অন্ধকার মোডে পরিবর্তন করার সময় এই রঙের মান স্বয়ংক্রিয়ভাবে পরিবর্তিত হয় এবং এর বিপরীতে।

:root {
  color-scheme: light dark;
  --primary-color: light-dark(#333, #fafafa);
  --primary-background: light-dark(#e4e4e4, #121212);
  --highlight-color: light-dark(hotpink, lime);
}

একটি অতিরিক্ত বোনাস হিসাবে, DOM-এর একটি নির্দিষ্ট সাবট্রিকে শুধুমাত্র হালকা বা অন্ধকার মোড ব্যবহার করতে বাধ্য করা সম্ভব হয় color-scheme dark বা light সেট করে। নিম্নলিখিত উদাহরণে, এটি :root এ প্রয়োগ করা হয়।