🎨 تغییر تم (Theme Switching) طراحی سایت با ری اکت و نکست

از مفهوم تا پیاده‌سازی اصولی تغییر تم در React و Next.js در طراحی سایت تا صفحه فرود

امروزه کاربران انتظار دارند یک وب‌اپلیکیشن با سلیقه و شرایط آن‌ها تطبیق پیدا کند. یکی از واضح‌ترین نمونه‌ها، Dark Mode / Light Mode است.

چرا تغییر تم 🌙 در طراحی سایت مهم است؟

اما تغییر تم فقط تغییر رنگ نیست؛ بخشی از تجربه کاربری، دسترس‌پذیری (Accessibility) و حتی برندینگ است.

قبل از ورود به جزئیات، بیایید خیلی خلاصه ببینیم وقتی از «تغییر تم» حرف می‌زنیم، دقیقاً منظور چیست.

تغییر تم یعنی چه؟ (نگاهی سریع)

به‌صورت خلاصه، تغییر تم یعنی:

  • 🎨 تغییر مجموعه‌ای از استایل‌ها (رنگ، فونت، سایه، بک‌گراند)

  • 🧠 جدا کردن منطق ظاهری از منطق بیزینس

  • 💾 امکان ذخیره ترجیح کاربر (مثلاً در LocalStorage یا Cookie)

  • 🌙 پشتیبانی از Dark / Light / System

  • ⚙️ قابل استفاده در کل اپلیکیشن، نه فقط یک کامپوننت

تا اینجا فقط «چیستی تغییر تم» را دیدیم. حالا سراغ تئوری برویم.

تئوری تغییر تم در ری اکت React (بدون وابستگی به فریم‌ورک)

در ری اکت ، تغییر تم یک اصل مهم دارد:

تم باید گلوبال باشد، نه لوکال

چرا؟

چون تم:

  • روی چندین کامپوننت اثر می‌گذارد

  • نباید در هر کامپوننت دوباره تعریف شود

  • باید قابل تغییر در هنگام اجرا runtime باشد

به همین دلیل، معمولاً از این ابزارها استفاده می‌شود:

  • Context API

  • CSS Variables

  • یا ترکیب این دو

مدل ذهنی درست برای تم

به این شکل فکر کن:

  • React → تصمیم می‌گیرد کدام تم فعال است

  • CSS → تصمیم می‌گیرد آن تم چگونه دیده می‌شود

یعنی:

  • React = State & Logic

  • CSS = Appearance

این تفکیک باعث می‌شود:

  • کد تمیزتر شود

  • تغییر تم سریع‌تر باشد

  • پرفورمنس و کارایی بهتر بماند

نقش متغیرهای CSS در تغییر تم

متغیرهای CSS ستون فقرات تغییر تم مدرن هستند.

چرا استفاده از متغیرهای CSS؟

  • در هنگام اجرا قابل تغییر هستند

  • نیازی به رندر مجدد سنگین ندارند

  • با Tailwind، MUI، CSS Modules و… سازگارند

مثال مفهومی (نه کد):

  • به‌جای اینکه بگویی:

    • background: #fff

  • می‌گویی:

    • background: var(--bg-color)

و تم فقط مقدار این متغیرها را عوض می‌کند.

تم در ری اکت: جریان منطقی

به‌صورت تئوریک، این اتفاق می‌افتد:

  1. کاربر تم را انتخاب می‌کند (Light / Dark / System)

  2. این انتخاب در State ذخیره می‌شود

  3. مقدار متغیر CSS تغییر می‌کند

  4. کل رابط کاربری بدون بارگذاری مجدد آپدیت می‌شود

نکته مهم:

ری اکت مسئول «انتخاب تم» است، نه «رنگ زدن رابط کاربری»

تفاوت ری اکت و نکست در بحث تغییر تم در طراحی سایت و صفحه فرود

اینجا نقطه‌ای است که خیلی‌ها اشتباه می‌کنند.

ری اکت (یک اپلیکیشن تک صفحه SPA معمولی)

  • همه‌چیز در کلاینت اتفاق می‌افتد

  • تم بعد از بارگذاری اپ تغییر می‌کند

  • مشکل خاصی با رندر سمت سرور SSR نداریم

نکست (اپ روتر یا پیج روتر)

  • رندر اولیه ممکن است روی سرور انجام شود

  • اگر تم فقط کلاینت ساید باشد:

  • ❌ Flash of wrong theme (FOUC)

  • حالت روشن ناگهانی قبل از دارک ❌

پس در نکست باید به رندرینگ سمت سرور SSR فکر کنیم.

چالش اصلی تم در طراحی سایت با نکست

مشکل اصلی این است:

سرور نمی‌داند کاربر چه تمی را ترجیح می‌دهد

چون:

  • سرور به ذخیره محلی LocalStorage دسترسی ندارد

  • تم معمولاً بعد از هایدریشن (هیدریشن) hydration مشخص می‌شود

نتیجه:

  • رابط کاربری یک لحظه با تم اشتباه نمایش داده می‌شود

راه‌حل تئوریک در Next.js

برای حل این مشکل، معمولاً از این مفاهیم استفاده می‌شود:

  • کوکی Cookie برای ذخیره تم

  • یا prefers-color-scheme ترجیحات سیستم عامل

  • یا اجرای یک اسکریپت کوچک قبل از هایدریشن hydration

هدف:

تم صحیح قبل از اولین paint اعمال شود

تم پرووایدر Theme Provider چیست و چرا مهم است؟

Theme Provider یک لایه مرکزی است که:

  • تم فعلی را نگه می‌دارد

  • متد تغییر تم را فراهم می‌کند

  • کل اپلیکیشن به آن دسترسی دارد

از نظر مفهومی:

  • مثل Auth Provider

  • یا Language Provider (i18n)

اشتباهات رایج در طراحی تم

چند خطای پرتکرار:

  • ❌ نگه‌داشتن تم در هر کامپوننت

  • ❌ وابسته کردن تم به کلاس‌های زیاد

  • ❌ نادیده گرفتن رندرینگ سمت سرور SSR در نکست

  • ❌ قاطی کردن منطق رابط کاربری با منطق تم

  • ❌ استفاده بیش از حد از re-render

تم خوب چگونه است:

  • ساده است

  • گلوبال است

  • کم‌هزینه است

اگر وقت ندارید متن کامل را بخوانید، این مفهوم کلی را بگیرید:

اگر بخواهیم خیلی خلاصه درباره تم در طراحی سایت با نکست و ری اکت بگوییم:

  • تم = استیت + متغیرهای سی اس اس

  • ری اکت → تصمیم‌گیر

  • سی اس اس → اجراکننده

  • نکست → نیازمند توجه ویژه به رندرینگ سمت سرور

  • تم خوب → کم‌ری‌رندر، قابل توسعه، قابل ذخیره

مرا دنبال کنید. اگر خاطره ای در ابتدای استفاده تغییر تم دارید با من و دیگران در میان بگذارید. اگر سوال یا پیشنهادی دارید نیز بنویسید.