ডার্ক মোড টোকেন যেভাবে কাজ করে
ডার্ক মোড টোকেন হলো দ্বিতীয় একগুচ্ছ মান, যা লাইট থিমের একই সিমান্টিক নামের সঙ্গে যুক্ত। মোড বদলালে --color-surface-এর মতো নামগুলো অন্য রঙের দিকে নির্দেশ করে, আর কোন মোড চালু আছে তা কোনো কম্পোনেন্টের জানার দরকার হয় না।
উল্টে দেওয়া কেন কাজ করে না
স্বজ্ঞাত পদ্ধতিটি — উজ্জ্বলতা উল্টে দেওয়া, সাদা-কালো বদলে দেওয়া — এমন একটি ডার্ক থিম বানায় যা প্রথমে নাম দেওয়া কঠিন এমনভাবে বেঠিক দেখায়।
কয়েকটি সুনির্দিষ্ট কারণ:
খাঁটি কালো কর্কশ। ভালোভাবে বানানো বেশিরভাগ ডার্ক থিম #000000-এর বদলে খুব গাঢ় একটি ধূসর ব্যবহার করে, প্রায়ই সামান্য আভাসহ। খাঁটি কালোর উপর পূর্ণ কনট্রাস্টের সাদা লেখা হ্যালেশন ঘটায়, লেখা যেন ছড়িয়ে পড়ে।
গাঢ় পটভূমিতে সম্পৃক্ত রং বেশি উজ্জ্বল পড়ে। সাদার উপর আরাম করে বসা একটি নীল গাঢ় পটভূমির সামনে কেঁপে উঠতে পারে। ডার্ক মোডের সংস্করণগুলো সাধারণত উজ্জ্বল করার পাশাপাশি সম্পৃক্তিও কমানো হয়।
উচ্চতা উল্টে যায়। হালকা থিমে উঁচু পৃষ্ঠ ছায়া ফেলে। গাঢ় থিমে ছায়া প্রায় অদৃশ্য, তাই উঁচু পৃষ্ঠ বোঝানো হয় বরং হালকা হয়ে। এক মোডে কাজ করা ছায়ার টোকেন অন্য মোডে কোনো তথ্যই বহন করে না।
কনট্রাস্ট অনুপাত এই উল্টানো টেকে না। হালকায় AA উত্তীর্ণ একটি জোড়া গাঢ়তে ব্যর্থ হতে পারে। প্রতিটি জোড়ার নতুন করে হিসাব নয়, নতুন করে যাচাই দরকার।
যে গঠন এটিকে সম্ভব করে
ডার্ক মোড রঙের সমস্যা হওয়ার আগে নামকরণের সমস্যা। সিমান্টিক স্তর আগে থেকে থাকলেই কেবল এটি পরিচ্ছন্নভাবে দাঁড়ায়।
:root {
--color-surface: var(--grey-50);
--color-text-primary: var(--grey-900);
}
[data-theme="dark"] {
--color-surface: var(--grey-900);
--color-text-primary: var(--grey-50);
}কম্পোনেন্ট --color-surface নির্দেশ করে। মোড বলে কিছু আছে তা তারা কখনো জানেই না। পরে তৃতীয় একটি থিম যোগ করা মানে একই আকৃতির আরেকটি ব্লক, প্রতিটি কম্পোনেন্টে পরিবর্তন নয়।
কম্পোনেন্ট যদি সরাসরি প্রিমিটিভ নির্দেশ করে, তবে নতুন করে নির্দেশ করার কিছু থাকে না, আর ডার্ক মোড হয়ে দাঁড়ায় প্রতিটি ফাইলের একটি শর্ত।
দুটোই একসঙ্গে তৈরি করুন
ছয় মাস পরে বসানো একটি ডার্ক থিম মানে প্রতিটি কম্পোনেন্ট ঘেঁটে দেখা। হালকা থিমের সঙ্গে, একই স্কেল থেকে তৈরি হলে সেটি বিনামূল্যে।
আপনি কেবল একটিই ছাড়ার পরিকল্পনা করলেও শুরুতেই মোড ঠিক করে নেওয়ার সবচেয়ে জোরালো যুক্তি এটাই: কাঠামোগত খরচ নামকরণে, আর নামকরণ কম্পোনেন্ট তৈরির আগে সস্তা, পরে দামি।
Flash DSM এখানে কোথায়
তৈরি হওয়া প্রতিটি ব্যবস্থা হালকা ও গাঢ় একসঙ্গে বানায়, একই সিমান্টিক নামে বাঁধা, আর একটি মোড থেকে অন্যটি পরে টেনে বের করার বদলে জোড়া ধরে ধরে কনট্রাস্ট যাচাই করে।