Menggunakan Mod Gelap dalam Next.js menggunakan Pembolehubah CSS

Dalam landskap pembangunan web hari ini, menawarkan pilihan mod gelap telah menjadi hampir penting untuk antara muka pengguna moden. Dalam artikel ini, kami akan meneroka cara melaksanakan penyelesaian mod gelap yang teguh dalam projek Next.js menggunakan pembolehubah CSS, Tailwind CSS dan beberapa alatan serta pakej yang berguna.

Tailwind CSS untuk Kelas Utiliti

Mula-mula, mari sediakan CSS Tailwind dalam projek Next.js kami. Tailwind menyediakan pendekatan yang mengutamakan utiliti untuk penggayaan, yang boleh mempercepatkan proses pembangunan kami dengan ketara.

Untuk memasang Tailwind CSS, jalankan arahan berikut dalam direktori projek anda:

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

Kemudian, konfigurasikan fail tailwind.config.js anda:

/** @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: [],
}

Kemudian, konfigurasikan fail globals.css anda:

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

Penjana Warna Orea untuk Palet Warna

Untuk mencipta palet warna yang harmoni untuk kedua-dua mod terang dan gelap, kita boleh menggunakan Penjana Warna Orea. Alat ini membantu dalam menjana satu set warna yang berfungsi dengan baik bersama-sama dan boleh disesuaikan dengan mudah untuk tema yang berbeza.

Lawati Penjana Warna Orea dan pilih warna asas anda. Alat ini menyediakan antara muka mesra pengguna untuk mencipta dan menggambarkan skema warna anda:

Imej di atas menunjukkan antara muka Penjana Warna Orea, di mana anda boleh:

• Pilih warna tengah menggunakan pemilih warna
• Lihat warna yang dijana dalam pelbagai warna
• Lihat pratonton tema anda dalam kedua-dua mod terang dan gelap
• Salin pembolehubah CSS untuk penyepaduan mudah ke dalam projek anda

Selepas menjana palet warna anda dengan Penjana Warna Orea, anda perlu melaksanakan warna ini dalam projek anda. Berikut ialah contoh cara anda boleh menentukan pembolehubah warna anda dalam 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;
}

Pembolehubah CSS ini mentakrifkan julat warna untuk warna utama anda, daripada warna lebih terang ( — primer-50) kepada warna gelap ( — primer-950). Dengan menggunakan pembolehubah ini, anda boleh menggunakan warna yang konsisten dengan mudah sepanjang aplikasi anda dan bertukar antara mod terang dan gelap.

Sekarang kami telah menentukan pembolehubah warna kami, mari gabungkan mereka ke dalam konfigurasi CSS Tailwind kami:

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))',
        },
      },
    },
  },
}

Konfigurasi ini membolehkan anda menggunakan warna ini dalam kelas Tailwind anda, seperti bg-primary-500 atau text-primary-200, sambil masih mengekalkan keupayaan untuk menggunakan kelegapan menggunakan pengubah kelegapan Tailwind.

Pakej tema seterusnya untuk Tema Mod Gelap/Terang

Selepas pemasangan, kami perlu menyediakan pembolehubah tema asas kami. Buat fail CSS baharu (cth., globals.css) atau tambahkan pada fail sedia ada anda:

// 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;
}

CSS ini mentakrifkan pembolehubah warna asas untuk tema terang dan gelap. Pemilih [data-theme=’dark’] akan digunakan secara automatik oleh tema seterusnya apabila mod gelap aktif.

Sekarang, mari laksanakan ThemeProvider dalam fail layout.tsx anda:

// app/layout.jsx

"use client";

import { ThemeProvider } from 'next-themes'

export default function Layout({ children }) {
  return (
    <html suppressHydrationWarning>
      <head />
      <body>
        <ThemeProvider>{children}</ThemeProvider>
      </body>
    </html>
  )
}

Dalam komponen anda, anda kini boleh menggunakan cangkuk useTheme untuk mengakses dan menukar tema semasa:

"use client";

import { useTheme } from 'next-themes'

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

  return (
    <div>
      The current theme is: {theme}
      <button onClick={() => setTheme('light')}>Light Mode</button>
      <button onClick={() => setTheme('dark')}>Dark Mode</button>
    </div>
  )
}

export default ThemeChanger

Persediaan ini membolehkan peralihan yang lancar antara mod terang dan gelap, dengan tema diteruskan merentas muat semula halaman.

Jatuh turun untuk Togol Tema menggunakan shadcn/ui

Untuk UI yang lebih digilap, kita boleh menggunakan komponen lungsur turun daripada shadcn/ui untuk mencipta togol tema. Mula-mula, pasang komponen yang diperlukan:

npx shadcn-ui@latest add dropdown-menu

Sekarang, mari laksanakan togol tema kami:

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 (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button variant="outline" size="icon">
          <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
          <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
          <span className="sr-only">Toggle theme</span>
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent align="end">
        <DropdownMenuItem onClick={() => setTheme("light")}>
          Light
        </DropdownMenuItem>
        <DropdownMenuItem onClick={() => setTheme("dark")}>
          Dark
        </DropdownMenuItem>
        <DropdownMenuItem onClick={() => setTheme("system")}>
          System
        </DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  )
}

Komponen ini mencipta menu lungsur turun dengan pilihan untuk bertukar antara tema terang, gelap dan sistem. Butang menggunakan ikon matahari dan bulan untuk mewakili tema semasa secara visual.

Kesimpulan

Melaksanakan mod gelap dalam aplikasi Next.js menggunakan pembolehubah CSS, CSS Tailwind dan tema seterusnya menyediakan penyelesaian yang fleksibel dan boleh diselenggara. Berikut ialah ringkasan perkara yang telah kami capai:

1. Kami menyediakan Tailwind CSS untuk penggayaan yang mengutamakan utiliti.
2. Kami menggunakan Penjana Warna Orea untuk mencipta palet warna yang konsisten untuk kedua-dua mod terang dan gelap.
3. Kami melaksanakan penukaran tema menggunakan tema seterusnya, membolehkan togol mudah antara mod terang dan gelap.
4. Kami mencipta komponen togol tema yang digilap menggunakan shadcn/ui, meningkatkan pengalaman pengguna.

Dengan memanfaatkan pembolehubah CSS, kami telah mencipta sistem yang mudah diselenggara dan diperluaskan. Penggunaan tema seterusnya memastikan pilihan tema kami dikekalkan, memberikan pengalaman yang lancar untuk pengguna.

Ingat perkara penting ini apabila melaksanakan mod gelap:

• Sentiasa pertimbangkan kebolehaksesan dan pastikan kontras yang mencukupi dalam kedua-dua tema.
• Uji aplikasi anda dengan teliti dalam kedua-dua mod terang dan gelap.
• Pertimbangkan untuk menggunakan pertanyaan media skema warna pilihan untuk menghormati pilihan sistem pengguna.
• Selaras dengan tema anda merentas semua komponen dan halaman.

Dengan persediaan ini, anda serba lengkap untuk menyediakan pilihan mod gelap moden dan mesra pengguna dalam aplikasi Next.js anda. Selamat mengekod!

Atas ialah kandungan terperinci Menggunakan Mod Gelap dalam Next.js menggunakan Pembolehubah CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!