فصل 11 از 27 درس 2 از 2

Dark Mode

Dark Mode دستی با Class

بخشی از آموزش جامع Tailwind CSS

محتوای درس Dark Mode دستی با Class

Dark Mode دستی با Class را در این درس به‌صورت عملی بررسی می‌کنیم. هدف این است که علاوه بر شناخت Utilityها، دلیل انتخاب آن‌ها و روش ارزیابی نتیجه را نیز بدانید.

هدف و مفهوم اصلی

Dark Mode صرفاً معکوس‌کردن رنگ‌ها نیست؛ Surface، متن، Border و Shadow در هر تم باید کنتراست مناسب داشته باشند. در حالت دستی می‌توان Variant dark را به کلاس والد متصل و انتخاب کاربر را ذخیره کرد.

روش پیاده‌سازی

  1. رنگ‌های Light را به‌عنوان حالت پایه تعریف کنید.
  2. برای هر نقش مهم Variant متناظر dark اضافه کنید.
  3. کلاس dark را روی html تغییر دهید و ترجیح کاربر را حفظ کنید.

نمونه قابل اجرا

نمونه زیر را در پروژه خود اجرا کنید، سپس هر Utility را جداگانه تغییر دهید تا اثر آن روی Layout و ظاهر مشخص شود.

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

/* JavaScript */
document.documentElement.classList.toggle("dark");

خروجی مورد انتظار

Theme با اضافه یا حذف کلاس dark تغییر می‌کند.

نکات مهم و خطاهای رایج

  • Flash اولیه تم را با اعمال دیرهنگام کلاس ایجاد نکنید.
  • Shadow تیره روی Surface تیره معمولاً خوانا نیست و نیاز به Border دارد.

تمرین پیشنهادی

کارت مثال را در هر دو تم از نظر کنتراست و Focus مقایسه کنید.

مطالعه مرجع رسمی مرتبط در مستندات Tailwind CSS