আপনার ওয়েবসাইট বা অ্যাপে ডার্ক মোড কীভাবে যুক্ত করবেন (ফ্ল্যাশ ছাড়া)

ডার্ক মোড যুক্ত করতে আপনার রঙগুলোকে নামযুক্ত টোকেন হিসেবে সংজ্ঞায়িত করুন (ব্যাকগ্রাউন্ড, লেখা, সারফেস, বর্ডার, অ্যাকসেন্ট), সরাসরি মান হার্ডকোড না করে। প্রতিটি টোকেনের একটি হালকা ও একটি গাঢ় মান দিন, এবং CSS prefers-color-scheme মিডিয়া ফিচার দিয়ে তাদের মধ্যে বদলান, যাতে সাইট ভিজিটরের সিস্টেম সেটিং অনুসরণ করে। একটি ম্যানুয়াল টগলও চাইলে, পছন্দটি ব্রাউজারে সংরক্ষণ করুন এবং head-এ একটি ছোট ইনলাইন স্ক্রিপ্ট দিয়ে প্রয়োগ করুন, যাতে লোডের সময় সাদা ঝলক না আসে। তারপর দুই থিমেই কনট্রাস্ট, ছবি ও চার্ট যাচাই করুন। AI অ্যাপ বিল্ডারে একটি স্পষ্ট প্রম্পটেই বেশিরভাগ কাজ হতে পারে; মান আসে যাচাইয়ে।

দুটি পদ্ধতি

বেশিরভাগ অ্যাপ দ্বিতীয়টি থেকে বেশি উপকার পায়: ডিফল্টে সিস্টেম মেনে চলুন, তবে মানুষকে তা বদলানোর সুযোগ দিন।

রঙের টোকেন দিয়ে শুরু করুন

ডার্ক মোড তখন কষ্টকর হয় যখন রঙগুলো white, #333 ও gray-100 হিসেবে কোড জুড়ে ছড়িয়ে থাকে। প্রতিটি রঙ যখন ছোট একটি নামযুক্ত টোকেন সেট থেকে আসে, তখন সহজ:

প্রতিটি কম্পোনেন্ট টোকেনের নাম ব্যবহার করে। তাহলে থিম বদলানো মানে প্রতিটি কম্পোনেন্ট সম্পাদনা নয়, এক সেট মান বদলানো।

গাঢ় প্যালেটের জন্য কিছু টিপস:

• বড় অংশে পুরো কালো ও পুরো সাদা এড়িয়ে চলুন; খুব গাঢ় ধূসর ও অফ-হোয়াইট পড়তে সহজ।
• ছায়ার বদলে হালকা পৃষ্ঠ দিয়ে গভীরতা দেখান — গাঢ় ব্যাকগ্রাউন্ডে ছায়া প্রায় দেখাই যায় না।
• উজ্জ্বল ব্র্যান্ড রঙ একটু কম উজ্জ্বল করুন; গাঢ় ব্যাকগ্রাউন্ডে সেগুলো অস্বস্তিকরভাবে জ্বলতে পারে।
• কনট্রাস্ট পড়ার উপযোগী রাখুন। WCAG-এর AA স্তর সাধারণ লেখার জন্য কমপক্ষে ৪.৫:১ কনট্রাস্ট চায়। ডার্ক থিমে মৃদু ধূসর লেখা প্রায়ই এতে ব্যর্থ হয়।

Tailwind CSS-এর সাথে

অনেক AI-বানানো অ্যাপে Tailwind ডিফল্ট স্টাইলিং টুল। Tailwind-এর ডার্ক মোড ডকস অনুযায়ী, dark: ভেরিয়েন্ট ডিফল্টে prefers-color-scheme ব্যবহার করে, তাই bg-white dark:bg-gray-900-এর মতো ক্লাস কোনো অতিরিক্ত কাজ ছাড়াই সিস্টেম সেটিং অনুসরণ করে।

Tailwind v4-এ ম্যানুয়াল টগলের জন্য, ডকস দেখায় ভেরিয়েন্টকে একটি প্যারেন্ট এলিমেন্টের ক্লাসে বদলানো:

@import "tailwindcss";
@custom-variant dark (&:where(.dark, .dark *));

তারপর অ্যাপ রুট এলিমেন্টে dark ক্লাস যোগ বা সরিয়ে দেয়। ডকস head-এর একটি ইনলাইন স্ক্রিপ্টেরও পরামর্শ দেয় যা পেজ আঁকার আগে সংরক্ষিত পছন্দ (বা সিস্টেম সেটিং) প্রয়োগ করে — ঠিক এভাবেই ফ্ল্যাশ এড়ানো যায়।

সাদা ঝলক এড়ানো

ঝলক হয় কারণ পেজ প্রথমে হালকা মোডে আঁকা হয়, তারপর JavaScript লোড হয়, সংরক্ষিত পছন্দ পড়ে, এবং গাঢ়ে বদলায়। সমাধান:

1. পেজের head-এ একটি ছোট ইনলাইন স্ক্রিপ্ট রাখুন, যা সংরক্ষিত থিম পড়ে এবং কিছু রেন্ডার হওয়ার আগে রুট এলিমেন্টে ক্লাস সেট করে।
2. প্রতিটি থিমের জন্য color-scheme CSS প্রপার্টি সেট করুন, যাতে ব্রাউজারের আঁকা অংশ (স্ক্রলবার, ফর্ম কন্ট্রোল) মেলে।
3. দুই থিমেই পেজে একটি স্পষ্ট ব্যাকগ্রাউন্ড রঙ দিন।
4. অ্যাপ যদি সার্ভারে রেন্ডার হয়, নিশ্চিত করুন সার্ভার ও ব্রাউজার প্রাথমিক থিমে একমত, নইলে পেজ আবার রেন্ডার হয়ে ঝিলমিল করতে পারে।

উদাহরণ প্রম্পট

পূর্ণাঙ্গ সেটআপ:

ডার্ক মোড যোগ করো। প্রথমে হার্ডকোড করা রঙগুলো থিম টোকেন দিয়ে বদলাও (background, surface, text, muted text, border, accent), প্রতিটির হালকা ও গাঢ় মানসহ। ডিফল্টে ভিজিটরের সিস্টেম সেটিং অনুসরণ করো। হেডারে Light, Dark ও System অপশনসহ একটি থিম সুইচ যোগ করো, পছন্দ localStorage-এ মনে রাখো, এবং head-এর একটি ইনলাইন স্ক্রিপ্ট দিয়ে প্রয়োগ করো যাতে লোডের সময় সাদা ঝলক না থাকে। প্রতিটি থিমের জন্য color-scheme সেট করো। বর্তমান হালকা ডিজাইন ঠিক যেমন আছে তেমনই রাখো।

বাকিটা ঠিক করা:

ডার্ক মোডে প্রতিটি পেজ যাচাই করো এবং ঠিক করো: কম কনট্রাস্টের লেখা (কমপক্ষে ৪.৫:১ লক্ষ্য করো), হার্ডকোড করা সাদা ব্যাকগ্রাউন্ড, মিলিয়ে যাওয়া বর্ডার, গাঢ় ব্যাকগ্রাউন্ডে গাঢ় লেখার চার্ট, এবং অদৃশ্য হয়ে যাওয়া লোগো। হালকা থিম বদলো না।

ছবি ও চার্ট:

ডার্ক মোডে লোগোর একটি হালকা সংস্করণ ব্যবহার করো। চার্টের অক্ষ, গ্রিডলাইন ও লেবেল থিম টোকেন ব্যবহার করুক। ডার্ক মোডে স্ক্রিনশটে একটি মৃদু বর্ডার দাও যাতে সেগুলো ব্যাকগ্রাউন্ডের সাথে মিশে না যায়।

ধাপে ধাপে

1. রঙ অডিট করুন। হার্ডকোড করা রঙ খুঁজে টোকেন দিয়ে বদলান। বেশিরভাগ কাজ এখানেই।
2. প্রতিটি টোকেনের জন্য গাঢ় মান সংজ্ঞায়িত করুন।
3. prefers-color-scheme দিয়ে সিস্টেম অনুসরণ করুন (বা Tailwind-এর ডিফল্ট dark:)।
4. চাইলে একটি টগল যোগ করুন: Light, Dark, System। পছন্দ ব্রাউজারে সংরক্ষণ করুন; লগইন করা অ্যাপের ক্ষেত্রে ব্যবহারকারীর প্রোফাইলেও সেভ করতে পারেন।
5. head-এর ইনলাইন স্ক্রিপ্ট ও color-scheme দিয়ে ঝলক বন্ধ করুন।
6. কঠিন অংশগুলো যাচাই করুন: লোগো, আইকন, সাদা ব্যাকগ্রাউন্ডের ছবি, চার্ট, কোড ব্লক, মানচিত্র, এমবেড, ইমেইল।
7. দুই থিমই পরীক্ষা করুন ডেস্কটপ ও ফোনে, সিস্টেম লাইট ও ডার্ক দুটোতেই, এবং হার্ড রিফ্রেশের পরে।

সাধারণ ভুল

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

চেকলিস্ট

• সব রঙ থিম টোকেন থেকে আসে
• ডিফল্টে সিস্টেম সেটিং অনুসরণ করে
• Light, Dark ও System সহ ঐচ্ছিক টগল, মনে রাখা হয়
• লোড বা রিফ্রেশে কোনো সাদা ঝলক নেই
• ফর্ম কন্ট্রোল ও স্ক্রলবার মেলাতে color-scheme সেট
• দুই থিমেই লেখার কনট্রাস্ট কমপক্ষে ৪.৫:১
• ডার্ক মোডে লোগো, ছবি, চার্ট ও এমবেড যাচাই করা
• হালকা থিম অপরিবর্তিত
• ডেস্কটপ ও ফোনে পরীক্ষা করা

Mythex-এ ডার্ক মোড

Mythex-এ বানানো অ্যাপ ডিফল্টে Vite, React, TypeScript ও Tailwind ব্যবহার করে, তাই উপরের Tailwind পদ্ধতি সরাসরি প্রযোজ্য: পূর্ণাঙ্গ সেটআপ প্রম্পটটি চ্যাটে পেস্ট করুন, তারপর দুই থিমে এবং ফোনের আকারে Preview যাচাই করুন। Mythex-এর ডিজাইন প্রম্পটিং পরামর্শ হলো কী বদলাবে ও কী রাখবে তা স্পষ্ট নাম দেওয়া — এখানে বলুন হালকা থিম যেমন আছে তেমন থাকতে হবে। দেখুন ডিজাইন ও UI প্রম্পট, এবং কোনো পাস ভুল হলে একটি চেকপয়েন্টে ফিরে যান।

লুক ঠিক করার বিষয়ে আরও জানতে দেখুন AI দিয়ে সুন্দর দেখতে অ্যাপ কীভাবে ডিজাইন করবেন এবং AI অ্যাপ বিল্ডারের জন্য প্রম্পট কীভাবে লিখবেন।

প্রশ্নোত্তর