اضافه کردن حالت تاریک به پروژه Next.js
در این راهنما نحوه اضافه کردن حالت تاریک به یک پروژه Next.js را می‌بینید.
next-themesبرای مدیریت تم روشن و تاریک، ابتدا next-themes را نصب کنید:
یک فایل برای ThemeProvider ایجاد کنید:
"use client"
import * as React from "react"
import { ThemeProvider as NextThemesProvider } from "next-themes"
export function ThemeProvider({
children,
...props
}: React.ComponentProps<typeof NextThemesProvider>) {
return <NextThemesProvider {...props}>{children}</NextThemesProvider>
}این Provider امکان مدیریت تم و تغییر بین حالت روشن و تاریک را در کل برنامه فراهم می‌کند.
حالا ThemeProvider را به Layout اصلی برنامه اضافه کنید.
همچنین برای جلوگیری از هشدارهای مربوط به Hydration، ویژگی suppressHydrationWarning را روی تگ html قرار دهید.
import { ThemeProvider } from "@/components/theme-provider"
export default function RootLayout({
children,
}: RootLayoutProps) {
return (
<>
<html lang="fa" suppressHydrationWarning>
<head />
<body>
<ThemeProvider
attribute="class"
defaultTheme="system"
enableSystem
disableTransitionOnChange
>
{children}
</ThemeProvider>
</body>
</html>
</>
)
}با این تنظیمات، تم اولیه بر اساس تنظیمات سیستم کاربر انتخاب می‌شود و کاربر می‌تواند بین حالت روشن و تاریک جابه‌جا شود.
برای اینکه کاربر بتواند تم را تغییر دهد، یک دکمه یا کامپوننت تغییر تم به رابط کاربری اضافه کنید.
این کامپوننت معمولاً با useTheme از next-themes ساخته می‌شود و امکان تغییر بین حالت‌های روشن، تاریک و سیستم را فراهم می‌کند.
پس از اضافه کردن آن، کاربر می‌تواند مستقیماً از داخل برنامه حالت نمایش موردنظرش را انتخاب کند.