Magdy Atef Zahran

إزاي تضيف Dark/Light Mode في Next.js زي المحترفين؟

لو اشتغلت قبل كدا على مشروع في Next.js واحتجت تضيف Dark & Iight Mode فالموضوع ابسط مما تتخيل يا صديقي..

هشرحلك دلوقتي ازاي تعمل كدا خطوه بخطوه إن شاء الله.

1️⃣ هنستخدم مكتبة next-themes:

npm install next-themes

2️⃣ بعد كدا هنظبط الـ Theme Provider في الموقع

📂 app/layout.js (لو بتستخدم App Router)
📂 pages/_app.js (لو بتستخدم Pages Router)

import { ThemeProvider } from “next-themes”; export default function Layout({ children }) { return ( {children} ); }

الـ ThemeProvider هو المسئول عن التحكم في الثيم.
والـ attribute=”class” بيضيف اسم الثيم في className على عشان نتحكم فيه بالـ CSS.

3️⃣ هنضيف زرار عشان نعرف نبدل بين الثيمات

📂 components/ThemeToggle.js

“use client”; // في App Router لازم نستخدمها import { useTheme } from “next-themes”; import { useEffect, useState } from “react”; export default function ThemeToggle() { const { theme, setTheme } = useTheme(); const [mounted, setMounted] = useState(false); useEffect(() => { setMounted(true); }, []); if (!mounted) return null; // عشان نتجنب مشاكل الـ SSR return ( <button> setTheme(theme === “dark” ? “light” : “dark”)}> {theme === “dark” ? “🌞 Light Mode” : “🌙 Dark Mode”} </button> ); }

الزرار بيبدل بين Light و Dark Mode لما المستخدم يضغط عليه.
استخدمنا useEffect علشان نحل مشاكل Server-side Rendering (SSR) في Next.js.

4️⃣ هنضيف شويه CSS عشان نغير الألوان

📂 globals.css

/* الثيم العادي (Light Mode) */ :root { –background: #ffffff; –text: #000000; } /* الثيم الداكن (Dark Mode) */ .dark { –background: #1a1a1a; –text: #ffffff; } /* تطبيق الألوان على الـ body */ body { background-color: var(–background); color: var(–text); transition: all 0.3s ease; }

لما المستخدم يختار Dark Mode الألوان هتتغير تلقائيا.
وضفنا transition عشان التغيير يبقى سلس.

5️⃣ هنضيف الزرار في أي مكان في الموقع

📂 app/page.js (لو App Router)
📂 pages/index.js (لو Pages Router)

import ThemeToggle from “@/components/ThemeToggle”; export default function Home() { return ( <div> <h1>Next.js Dark/Light Mode 🌗</h1> </div> ); }

كدا اليوزر يقدر يبدل بين Light و Dark Mode في أي وقت…😃🥳

وبكدا عرفت إزاي تبني نظام Themes (Dark/Light Mode) في Next.js, لو عندك أي استفسار اكتب في الكومنتات..💛

Borma