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

Dark Mode

ساخت رابط Light/Dark

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

محتوای درس ساخت رابط Light/Dark

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

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

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

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

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

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

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

index.html
<article class="rounded-2xl bg-white p-6 text-slate-900 shadow
  dark:bg-slate-900 dark:text-slate-100">
  <h2 class="text-xl font-bold">پنل گزارش</h2>
  <p class="mt-2 text-slate-600 dark:text-slate-400">محتوا در هر دو تم خواناست.</p>
</article>

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

کارت با طراحی مجزا برای Light و Dark.

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

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

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

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

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