আপনার পছন্দের ভাষায় কন্টেন্ট অনুবাদ করতে Google তার AI প্রযুক্তি ব্যবহার করে। AI-এর মাধ্যমে করা অনুবাদে ভুল থাকতে পারে।

light-dark() সহ CSS color-scheme-dependent রঙ

বর্তমানে ব্যবহৃত 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 কালার মডিউল লেভেল ৪-এ উল্লেখ করা আছে। এই সিস্টেম কালারগুলি ব্রাউজার দ্বারা সংজ্ঞায়িত করা হয় এবং একটি কীওয়ার্ড দ্বারা উপস্থাপন করা হয়।

যেমন, সিস্টেম কালার 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-এ সেট করা হলে, এটি নির্দেশ করে যে এলিমেন্টটি ডার্ক কালার স্কিম সাপোর্ট করে।

এমন একটি পৃষ্ঠা যা আপনাকে color-scheme-এর ভ্যালু পরিবর্তন করতে দেয়। পরিবর্তন করার পরে, বডি এলিমেন্টের ডিক্লারেশন একই থাকলেও, লাইট থেকে ডার্ক বা ডার্ক থেকে লাইট মোডে পরিবর্তন করার সময় পৃষ্ঠার রঙ পরিবর্তন হয়।

এসে গেছে `light-dark()`

Browser Support

Source

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

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

ব্যবহৃত রঙের স্কিম light বা অজানা হলে, প্রথম ভ্যালুর গণনা করা ভ্যালু ফেরত দেওয়া হয়।
ব্যবহৃত রঙের স্কিম dark হলে, দ্বিতীয় রঙের গণনা করা ভ্যালু ফিরিয়ে দেওয়া হয়।

light-dark()-এর ফলাফল হল <color>। যেখানে <color> গ্রহণ করা হয় সেখানে CSS-এ এটি ব্যবহার করা যেতে পারে। যেমন, 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;
  }
}

এমন একটি পৃষ্ঠা যা prefers-color-scheme-এর মাধ্যমে লাইট বা ডার্ক মোডে রেসপন্ড করে।
মিডিয়া কোয়েরি ব্যবহার করে CSS-এ রঙের ভ্যালু পরিবর্তন করা হয়।

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

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

এমন একটি পৃষ্ঠা যা prefers-color-scheme ব্যবহার করে লাইট বা ডার্ক মোডে কাজ করে।
রঙের ভ্যালু light-dark() ব্যবহার করে পরিবর্তন করা হয়।

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

এমন একটি পৃষ্ঠা যা prefers-color-scheme ব্যবহার করে লাইট বা ডার্ক মোডে রেসপন্স করে।
light-dark() ব্যবহার করে রঙের ভ্যালু পরিবর্তন করা হয়।
বিকল্পগুলির মধ্যে একটি ব্যবহার করে আপনি লাইট বা ডার্ক মোড প্রয়োগ করতে পারেন। color-scheme ভ্যালু ম্যানিপুলেট করার মাধ্যমে এটি করা হয়।

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

এসে গেছে light-dark()

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

এসে গেছে `light-dark()`