چگونه حالت تاریک را به وب‌سایت یا اپ خود اضافه کنیم (بدون چشمک سفید)
برای افزودن حالت تاریک، رنگ‌هایتان را به‌صورت توکنهای نام‌دار (پس‌زمینه، متن، سطح، حاشیه، رنگ تأکیدی) تعریف کنید، به‌جای مقادیر ثابت در کد. به هر توکن یک مقدار روشن و یک مقدار تاریک بدهید و با ویژگی رسانه‌ای CSS به نام prefers-color-scheme بین آن‌ها جابه‌جا شوید تا سایت از تنظیم سیستم بازدیدکننده پیروی کند. اگر یک کلید دستی هم می‌خواهید، انتخاب را در مرورگر ذخیره کنید و آن را با یک اسکریپت inline کوچک در head صفحه اعمال کنید تا هنگام بارگذاری چشمک سفید نزنید. سپس کنتراست، تصاویر و نمودارها را در هر دو تم بررسی کنید. در یک ابزار ساخت اپ هوش مصنوعی، یک پرامپت روشن می‌تواند بیشتر این کار را انجام دهد؛ کیفیت کار در بررسی آن است.
دو رویکرد
| رویکرد | نحوه کار | مناسب برای | معایب |
|---|---|---|---|
| پیروی از سیستم | ویژگی رسانه‌ای CSS به نام prefers-color-scheme روشن یا تاریک را انتخاب می‌کند | سایت‌های ساده، بدون رابط اضافی | بازدیدکنندگان نمی‌توانند متفاوت از تنظیم دستگاهشان انتخاب کنند |
| کلید + پیش‌فرض سیستم | از تنظیم سیستم شروع می‌کند؛ یک سوئیچ روشن / تاریک / سیستم آن را تغییر می‌دهد و به خاطر سپرده می‌شود | اپ‌هایی که مردم زیاد استفاده می‌کنند | کمی جاوااسکریپت و مشکل چشمک هنگام بارگذاری که باید حل شود |
بیشتر اپ‌ها با رویکرد دوم بهترین نتیجه را می‌گیرند: به‌طور پیش‌فرض سیستم را رعایت کنید و به مردم اجازه دهید آن را تغییر دهند.
با توکنهای رنگ شروع کنید
حالت تاریک وقتی دردسرساز است که رنگ‌ها به‌صورت پراکنده در کد مثل white، #333 و gray-100 نوشته شده باشند. وقتی هر رنگ از مجموعه کوچکی از توکنهای نام‌دار بیاید، کار آسان می‌شود:
| توکن | روشن | تاریک |
|---|---|---|
background | تقریباً سفید | خاکستری خیلی تیره |
surface (کارت‌ها، منوها) | سفید | خاکستری تیره کمی روشن‌تر |
text | تقریباً سیاه | سفید شکسته |
text-muted | خاکستری متوسط | خاکستری متوسط روشن‌تر |
border | خاکستری روشن | خاکستری تیره با کمی کنتراست |
accent | رنگ برند شما | اغلب نسخه‌ای روشن‌تر یا کم‌اشباع‌تر |
هر کامپوننت از نام توکن‌ها استفاده می‌کند. در نتیجه تغییر تم یعنی جایگزینی یک مجموعه مقدار، نه ویرایش تک‌تک کامپوننت‌ها.
نکاتی برای پالت تاریک:
- از سیاه مطلق و سفید مطلق برای ناحیه‌های بزرگ پرهیز کنید؛ خاکستری خیلی تیره و سفید شکسته خواندنشان آسان‌تر است.
- عمق را با سطوح روشن‌تر نشان دهید، نه با سایه؛ سایه‌ها روی پس‌زمینه تیره تقریباً دیده نمی‌شوند.
- رنگ‌های برند روشن را کمی کم‌اشباع کنید؛ روی پس‌زمینه تیره ممکن است ناخوشایند بدرخشند.
- کنتراست را خوانا نگه دارید. سطح AA در WCAG برای متن معمولی حداقل نسبت کنتراست ۴.۵:۱ می‌خواهد. متن خاکستری کم‌رنگ اغلب در تم‌های تاریک این شرط را رد می‌کند.
با Tailwind CSS
Tailwind در بسیاری از اپ‌های ساخته‌شده با هوش مصنوعی ابزار پیش‌فرض استایل است. بر اساس مستندات حالت تاریک Tailwind، متغیر dark: به‌طور پیش‌فرض از prefers-color-scheme استفاده می‌کند، بنابراین کلاس‌هایی مثل bg-white dark:bg-gray-900 بدون کار اضافی از تنظیم سیستم پیروی می‌کنند.
برای کلید دستی در Tailwind نسخه ۴، مستندات نشان می‌دهد که متغیر را به یک کلاس روی عنصر والد تغییر دهید:
@import "tailwindcss";
@custom-variant dark (&:where(.dark, .dark *));
سپس اپ کلاس dark را روی عنصر ریشه اضافه یا حذف می‌کند. مستندات همچنین یک اسکریپت inline در head پیشنهاد می‌کند که انتخاب ذخیره‌شده (یا تنظیم سیستم) را پیش از رندر صفحه اعمال می‌کند؛ دقیقاً همین راه جلوگیری از چشمک است.
جلوگیری از چشمک سفید
چشمک زمانی رخ می‌دهد که صفحه در حالت روشن رندر می‌شود، سپس جاوااسکریپت بارگذاری می‌شود، انتخاب ذخیره‌شده را می‌خواند و به تاریک تغییر می‌دهد. راه حل:
- یک اسکریپت inline کوچک در head صفحه بگذارید که تم ذخیره‌شده را می‌خواند و کلاس را روی عنصر ریشه پیش از هر رندری تنظیم می‌کند.
- ویژگی CSS به نام
color-schemeرا برای هر تم تنظیم کنید تا بخش‌های رسم‌شده توسط مرورگر (نوار اسکرول، کنترل‌های فرم) هماهنگ باشند. - برای صفحه در هر دو تم یک رنگ پس‌زمینه صریح تعیین کنید.
- اگر اپ سمت سرور رندر می‌شود، مطمئن شوید سرور و مرورگر روی تم اولیه توافق دارند، وگرنه صفحه ممکن است دوباره رندر و چشمک بزند.
نمونه پرامپت‌ها
یک راه‌اندازی کامل:
حالت تاریک را اضافه کن. ابتدا رنگ‌های ثابت در کد را با توکنهای تم (پس‌زمینه، سطح، متن، متن کم‌رنگ، حاشیه، رنگ تأکیدی) با مقادیر روشن و تاریک جایگزین کن. به‌طور پیش‌فرض از تنظیم سیستم بازدیدکننده پیروی کن. یک سوئیچ تم در هدر با گزینه‌های روشن، تاریک و سیستم اضافه کن، انتخاب را در localStorage به خاطر بسپار، و آن را با یک اسکریپت inline در head اعمال کن تا هنگام بارگذاری چشمک سفید نباشد. color-scheme را برای هر تم تنظیم کن. طراحی روشن فعلی را دقیقاً همان‌طور که هست نگه دار.
اصلاح آنچه باقی مانده:
هر صفحه را در حالت تاریک بررسی کن و این موارد را اصلاح کن: متنی با کنتراست پایین (هدف حداقل ۴.۵:۱)، پس‌زمینه‌های سفید ثابت در کد، حاشیه‌هایی که ناپدید می‌شوند، نمودارهایی با متن تیره روی پس‌زمینه تیره، و لوگوهایی که دیده نمی‌شوند. طراحی روشن را تغییر نده.
تصاویر و نمودارها:
در حالت تاریک از نسخه روشن لوگو استفاده کن. محور، خطوط شبکه و برچسب‌های نمودار را از توکنهای تم استفاده کنند. به اسکرین‌شات‌ها در حالت تاریک یک حاشیه ملایم بده تا با پس‌زمینه یکی نشوند.
گام به گام
- رنگ‌ها را ممیزی کنید. رنگ‌های ثابت را پیدا کنید و با توکن جایگزین کنید. بیشتر کار همین است.
- مقادیر تاریک را برای هر توکن تعریف کنید.
- از سیستم پیروی کنید با
prefers-color-scheme(یاdark:پیش‌فرض Tailwind). - یک کلید اضافه کنید در صورت نیاز: روشن، تاریک، سیستم. انتخاب را در مرورگر ذخیره کنید؛ برای اپ‌هایی که کاربر وارد آن‌ها می‌شود می‌توانید آن را در پروفایل کاربر هم ذخیره کنید.
- چشمک را با اسکریپت head و
color-schemeجلوگیری کنید. - بخش‌های حساس را بررسی کنید: لوگوها، آیکون‌ها، تصاویر با پس‌زمینه سفید، نمودارها، بلوک‌های کد، نقشه‌ها، embedها، ایمیل‌ها.
- هر دو تم را آزمایش کنید روی دسکتاپ و موبایل، با سیستم روی روشن و روی تاریک، و بعد از رفرش کامل.
اشتباهات رایج
- معکوس کردن همه‌چیز. فیلتری که رنگ‌ها را معکوس می‌کند عکس‌ها و رنگ‌های برند را خراب می‌کند.
- باقی ماندن رنگ‌های ثابت. یک کارت سفید در صفحه تاریک بلافاصله به چشم می‌آید.
- متن خاکستری با کنتراست پایین. شیک به نظر می‌رسد، اما خوانایی را از بین می‌برد.
- چشمک سفید هنگام بارگذاری. به‌ویژه در موبایل در شب محسوس است.
- فراموش کردن embedهای شخص ثالث. نقشه‌ها، ویدیوها و ویجت‌ها ممکن است روشن بمانند؛ بررسی کنید که آیا گزینه تاریک دارند.
- کلیدی با فقط دو حالت. وقتی کسی آن را بزند، دیگر نمی‌تواند به تنظیم سیستم برگردد.
- خراب کردن تم روشن. در پرامپت صریحاً بگویید که طراحی روشن باید ثابت بماند.
چک‌لیست
- همه رنگ‌ها از توکنهای تم می‌آیند
- به‌طور پیش‌فرض از تنظیم سیستم پیروی می‌کند
- کلید اختیاری با گزینه‌های روشن، تاریک و سیستم، که به خاطر سپرده می‌شود
- هنگام بارگذاری یا رفرش چشمک سفید نیست
-
color-schemeتنظیم شده تا کنترل‌های فرم و نوار اسکرول هماهنگ باشند - کنتراست متن در هر دو تم حداقل ۴.۵:۱ است
- لوگوها، تصاویر، نمودارها و embedها در حالت تاریک بررسی شده‌اند
- تم روشن بدون تغییر مانده است
- روی دسکتاپ و موبایل آزمایش شده است
حالت تاریک با Mythex
اپ‌هایی که روی Mythex ساخته می‌شوند به‌طور پیش‌فرض از Vite، React، TypeScript و Tailwind استفاده می‌کنند، بنابراین رویکرد Tailwind بالا مستقیماً قابل اعمال است: پرامپت راه‌اندازی کامل را در چت paste کنید، سپس Preview را در هر دو تم و در اندازه موبایل بررسی کنید. توصیه Mythex برای پرامپت‌نویسی طراحی این است که بگویید چه چیزی تغییر کند و چه چیزی حفظ شود؛ اینجا مهم است: بگویید طراحی روشن باید همان‌طور که هست بماند. طراحی و پرامپت‌های UI را ببینید و اگر یک دور تغییر خراب شد، با یک نقطه بازگشت (checkpoint) برگردید.
برای بیشتر درباره درست کردن ظاهر، چگونه با هوش مصنوعی اپ خوش‌ظاهر طراحی کنیم و چگونه پرامپت برای ابزارهای ساخت اپ هوش مصنوعی بنویسیم را ببینید.
پرسش‌ها
چگونه وب‌سایتم از تنظیم حالت تاریک دستگاه پیروی کند؟
از ویژگی رسانه‌ای CSS به نام prefers-color-scheme استفاده کنید که نشان می‌دهد سیستم بازدیدکننده روی حالت روشن است یا تاریک. متغیر dark: در Tailwind به‌طور پیش‌فرض از آن استفاده می‌کند.
چرا سایتم پیش از تغییر به حالت تاریک، برای لحظه‌ای سفید می‌شود؟
تم ذخیره‌شده توسط جاوااسکریپت اعمال می‌شود، بعد از اینکه صفحه قبلاً رندر شده است. برای رفع آن، یک اسکریپت inline کوچک در head صفحه قرار دهید که کلاس تم را پیش از هر رندری تنظیم کند، و یک رنگ پس‌زمینه صریح برای هر دو تم تعیین کنید.
آیا حالت تاریک باید کاملاً سیاه باشد؟
معمولاً نه. خاکستری‌های خیلی تیره برای مطالعه طولانی برای چشم راحت‌ترند و با سطوح کمی روشن‌تر عمق نشان می‌دهند. سیاه مطلق ممکن است برای طراحی‌های متمرکز بر OLED یا پرمحتوای تصویری مناسب باشد.
اگر از تنظیم سیستم پیروی می‌کنم، آیا به کلید حالت تاریک نیاز دارم؟
به‌طور دقیق نه. پیروی از سیستم پیش‌فرض خوبی است، اما یک کلید با گزینه‌های روشن، تاریک و سیستم به کسانی کمک می‌کند که می‌خواهند سایت شما با تنظیم دستگاهشان متفاوت باشد.