اعمال حالت تاریک در Next.js با استفاده از متغیرهای CSS

Summarize this content to 400 words in Persian Lang
در چشم انداز توسعه وب امروزی، ارائه گزینه حالت تاریک برای یک رابط کاربری مدرن تقریبا ضروری شده است. در این مقاله، نحوه پیاده‌سازی یک راه‌حل حالت تاریک قوی در پروژه Next.js با استفاده از متغیرهای CSS، Tailwind CSS و برخی ابزارها و بسته‌های مفید را بررسی خواهیم کرد.

Tailwind CSS برای کلاس های Utility

ابتدا اجازه دهید Tailwind CSS را در پروژه Next.js خود راه اندازی کنیم. Tailwind یک رویکرد کاربردی برای یک ظاهر طراحی ارائه می دهد که می تواند به طور قابل توجهی روند توسعه ما را سرعت بخشد.

برای نصب Tailwind CSS، دستورات زیر را در فهرست پروژه خود اجرا کنید:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

سپس، خود را پیکربندی کنید tailwind.config.js فایل:

/** @type {import(‘tailwindcss’).Config} */
module.exports = {
content: [
“./app/**/*.{js,ts,jsx,tsx,mdx}”,
“./pages/**/*.{js,ts,jsx,tsx,mdx}”,
“./components/**/*.{js,ts,jsx,tsx,mdx}”,

// Or if using `src` directory:
“./src/**/*.{js,ts,jsx,tsx,mdx}”,
],
theme: {
extend: {},
},
plugins: [],
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

سپس، خود را پیکربندی کنید globals.css فایل:

@tailwind base;
@tailwind components;
@tailwind utilities;

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

ژنراتور رنگ Orea برای پالت رنگ

برای ایجاد یک پالت رنگی هماهنگ برای هر دو حالت روشن و تاریک، می‌توانیم از Orea Color Generator استفاده کنیم. این ابزار به تولید مجموعه ای از رنگ ها کمک می کند که به خوبی با هم کار می کنند و می توانند به راحتی برای تم های مختلف تطبیق داده شوند.

از Orea Color Generator دیدن کنید و رنگ های پایه خود را انتخاب کنید. این ابزار یک رابط کاربر پسند برای ایجاد و تجسم طرح رنگ شما فراهم می کند:

تصویر بالا رابط Orea Color Generator را نشان می دهد، که در آن می توانید:

یک رنگ میانی را با استفاده از انتخابگر رنگ انتخاب کنید
رنگ های تولید شده را در سایه های مختلف مشاهده کنید
پیش نمایشی از تم خود را در حالت روشن و تاریک ببینید
متغیرهای CSS را برای ادغام آسان در پروژه خود کپی کنید

پس از تولید پالت رنگی خود با Orea Color Generator، می خواهید این رنگ ها را در پروژه خود پیاده سازی کنید. در اینجا مثالی از نحوه تعریف متغیرهای رنگی خود در CSS آورده شده است:

:root {
/* Initially TailwindCSS bg-opacity */
–tw-bg-opacity: 1;

–primary-50: 242, 242, 242;
–primary-100: 230, 230, 230;
–primary-200: 204, 204, 204;
–primary-300: 179, 179, 179;
–primary-400: 153, 153, 153;
–primary-500: 128, 128, 128;
–primary-600: 102, 102, 102;
–primary-700: 77, 77, 77;
–primary-800: 51, 51, 51;
–primary-900: 26, 26, 26;
–primary-950: 13, 13, 13;
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

این متغیرهای CSS طیفی از سایه ها را برای رنگ اصلی شما تعریف می کنند، از رنگ روشن تر (–primary-50) تا رنگ های تیره (–primary-950). با استفاده از این متغیرها، می توانید به راحتی رنگ های ثابت را در سراسر برنامه خود اعمال کنید و بین حالت های روشن و تاریک جابجا شوید.

اکنون که متغیرهای رنگ خود را تعریف کرده ایم، بیایید آنها را در پیکربندی Tailwind CSS خود ادغام کنیم:

module.exports = {
// … other config
theme: {
extend: {
colors: {
primary: {
’50’: ‘rgba(var(–primary-50), var(–tw-bg-opacity))’,
‘100’: ‘rgba(var(–primary-100), var(–tw-bg-opacity))’,
‘200’: ‘rgba(var(–primary-200), var(–tw-bg-opacity))’,
‘300’: ‘rgba(var(–primary-300), var(–tw-bg-opacity))’,
‘400’: ‘rgba(var(–primary-400), var(–tw-bg-opacity))’,
‘500’: ‘rgba(var(–primary-500), var(–tw-bg-opacity))’,
‘600’: ‘rgba(var(–primary-600), var(–tw-bg-opacity))’,
‘700’: ‘rgba(var(–primary-700), var(–tw-bg-opacity))’,
‘800’: ‘rgba(var(–primary-800), var(–tw-bg-opacity))’,
‘900’: ‘rgba(var(–primary-900), var(–tw-bg-opacity))’,
‘950’: ‘rgba(var(–primary-950), var(–tw-bg-opacity))’,
},
},
},
},
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

این پیکربندی به شما امکان می دهد از این رنگ ها در کلاس های Tailwind خود استفاده کنید bg-primary-500 یا text-primary-200، در حالی که هنوز توانایی اعمال کدورت با استفاده از اصلاح کننده های کدورت Tailwind را حفظ کرده است.

بسته تم های بعدی برای تم حالت تاریک/روشن

پس از نصب، باید متغیرهای تم اصلی خود را تنظیم کنیم. یک فایل CSS جدید ایجاد کنید (مثلا globals.css) یا به موجود خود اضافه کنید:

// app/layout.jsx
:root {
/* Add your light mode colors */
–tw-bg-opacity: 1;

–primary-50: 242, 242, 242;
–primary-100: 230, 230, 230;
–primary-200: 204, 204, 204;
–primary-300: 179, 179, 179;
}

/* Add your dark mode colors */
–primary-50: 13, 13, 13;
–primary-100: 26, 26, 26;
–primary-200: 51, 51, 51;
–primary-300: 77, 77, 77;
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

این CSS متغیرهای رنگی پایه را برای تم های روشن و تاریک تعریف می کند. این [data-theme=’dark’] هنگامی که حالت تاریک فعال است، انتخابگر به طور خودکار توسط تم های بعدی اعمال می شود.

حالا بیایید ThemeProvider را در شما پیاده سازی کنیم layout.tsx فایل:

// app/layout.jsx

“use client”;

import { ThemeProvider } from ‘next-themes’

export default function Layout({ children }) {
return (

{children}

)
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

در اجزای خود، اکنون می توانید از آن استفاده کنید useTheme برای دسترسی به تم فعلی و تغییر آن، قلاب کنید:

“use client”;

import { useTheme } from ‘next-themes’

const ThemeChanger = () => {
const { theme, setTheme } = useTheme()

return (

The current theme is: {theme}
setTheme(‘light’)}>Light Mode
setTheme(‘dark’)}>Dark Mode

)
}

export default ThemeChanger

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

این راه‌اندازی امکان انتقال صاف بین حالت‌های روشن و تاریک را فراهم می‌کند و موضوع در بارگذاری مجدد صفحه ادامه می‌یابد.

کشویی برای تغییر موضوع با استفاده از shadcn/ui

برای یک رابط کاربری صیقلی‌تر، می‌توانیم از مؤلفه کشویی از shadcn/ui برای ایجاد یک تغییر موضوع استفاده کنیم. ابتدا اجزای لازم را نصب کنید:

npx shadcn-ui@latest add dropdown-menu

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

اکنون، بیایید تغییر موضوع خود را پیاده سازی کنیم:

import { useTheme } from “next-themes”
import { Button } from “@/components/ui/button”
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuTrigger,
} from “@/components/ui/dropdown-menu”
import { Sun, Moon } from “lucide-react”

export function ThemeToggle() {
const { setTheme } = useTheme()

return (

Toggle theme

setTheme(“light”)}>
Light

setTheme(“dark”)}>
Dark

setTheme(“system”)}>
System

)
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

این جزء یک منوی کشویی با گزینه هایی برای جابجایی بین تم های روشن، تاریک و سیستم ایجاد می کند. این دکمه از نمادهای خورشید و ماه برای نمایش بصری موضوع فعلی استفاده می کند.

نتیجه گیری

پیاده‌سازی حالت تاریک در برنامه Next.js با استفاده از متغیرهای CSS، Tailwind CSS و themes بعدی راه‌حلی انعطاف‌پذیر و قابل نگهداری را ارائه می‌دهد. در اینجا خلاصه ای از آنچه به دست آورده ایم آورده شده است:

ما Tailwind CSS را برای استایل‌سازی اولیه راه‌اندازی کردیم.
ما از Orea Color Generator برای ایجاد یک پالت رنگ ثابت برای هر دو حالت روشن و تاریک استفاده کردیم.
ما تغییر تم را با استفاده از تم های بعدی اجرا کردیم، که امکان جابجایی آسان بین حالت های روشن و تاریک را فراهم می کند.
ما با استفاده از shadcn/ui یک مولفه جابجایی تم جلا ایجاد کردیم که تجربه کاربر را بهبود می بخشد.

با استفاده از متغیرهای CSS، سیستمی ایجاد کرده‌ایم که نگهداری و گسترش آن آسان است. استفاده از تم های بعدی تضمین می کند که اولویت تم ما ادامه دارد و تجربه یکپارچه را برای کاربران فراهم می کند.

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

همیشه دسترسی را در نظر بگیرید و از کنتراست کافی در هر دو موضوع اطمینان حاصل کنید.
برنامه خود را به طور کامل در هر دو حالت روشن و تاریک تست کنید.
استفاده از پرس و جو رسانه prefers-color-scheme را برای احترام به تنظیمات سیستم کاربر در نظر بگیرید.
با طرح زمینه خود در تمام اجزا و صفحات سازگار باشید.

با این تنظیمات، شما به خوبی مجهز هستید تا یک گزینه حالت تاریک مدرن و کاربرپسند را در برنامه Next.js خود ارائه دهید. کد نویسی مبارک!

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",

    // Or if using `src` directory:
    "./src/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  /* Initially TailwindCSS bg-opacity */
  --tw-bg-opacity: 1;

  --primary-50: 242, 242, 242;
  --primary-100: 230, 230, 230;
  --primary-200: 204, 204, 204;
  --primary-300: 179, 179, 179;
  --primary-400: 153, 153, 153;
  --primary-500: 128, 128, 128;
  --primary-600: 102, 102, 102;
  --primary-700: 77, 77, 77;
  --primary-800: 51, 51, 51;
  --primary-900: 26, 26, 26;
  --primary-950: 13, 13, 13;
}

module.exports = {
  // ... other config
  theme: {
    extend: {
      colors: {
        primary: {
          '50': 'rgba(var(--primary-50), var(--tw-bg-opacity))',
          '100': 'rgba(var(--primary-100), var(--tw-bg-opacity))',
          '200': 'rgba(var(--primary-200), var(--tw-bg-opacity))',
          '300': 'rgba(var(--primary-300), var(--tw-bg-opacity))',
          '400': 'rgba(var(--primary-400), var(--tw-bg-opacity))',
          '500': 'rgba(var(--primary-500), var(--tw-bg-opacity))',
          '600': 'rgba(var(--primary-600), var(--tw-bg-opacity))',
          '700': 'rgba(var(--primary-700), var(--tw-bg-opacity))',
          '800': 'rgba(var(--primary-800), var(--tw-bg-opacity))',
          '900': 'rgba(var(--primary-900), var(--tw-bg-opacity))',
          '950': 'rgba(var(--primary-950), var(--tw-bg-opacity))',
        },
      },
    },
  },
}

// app/layout.jsx
:root {
  /* Add your light mode colors */
  --tw-bg-opacity: 1;

  --primary-50: 242, 242, 242;
  --primary-100: 230, 230, 230;
  --primary-200: 204, 204, 204;
  --primary-300: 179, 179, 179;
}

[data-theme="dark"] {

/* Add your dark mode colors */
  --primary-50: 13, 13, 13;
  --primary-100: 26, 26, 26;
  --primary-200: 51, 51, 51;
  --primary-300: 77, 77, 77;
}

// app/layout.jsx

"use client";

import { ThemeProvider } from 'next-themes'

export default function Layout({ children }) {
  return (
    
      
      
        {children}
      
    
  )
}

"use client";

import { useTheme } from 'next-themes'

const ThemeChanger = () => {
  const { theme, setTheme } = useTheme()

  return (
    

      The current theme is: {theme}
       setTheme('light')}>Light Mode
       setTheme('dark')}>Dark Mode
    
  )
}

export default ThemeChanger

npx shadcn-ui@latest add dropdown-menu

import { useTheme } from "next-themes"
import { Button } from "@/components/ui/button"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { Sun, Moon } from "lucide-react"

export function ThemeToggle() {
  const { setTheme } = useTheme()

  return (
    
      
        
          
          
          Toggle theme
        
      
      
         setTheme("light")}>
          Light
        
         setTheme("dark")}>
          Dark
        
         setTheme("system")}>
          System
        
      
    
  )
}