Anwenden des Dunkelmodus in Next.js mithilfe von CSS-Variablen

In der heutigen Webentwicklungslandschaft ist die Bereitstellung einer Dark-Mode-Option für eine moderne Benutzeroberfläche fast unverzichtbar geworden. In diesem Artikel untersuchen wir, wie Sie mithilfe von CSS-Variablen, Tailwind CSS und einigen hilfreichen Tools und Paketen eine robuste Dark-Mode-Lösung in einem Next.js-Projekt implementieren.

Rückenwind-CSS für Utility-Klassen

Zuerst richten wir Tailwind CSS in unserem Next.js-Projekt ein. Tailwind bietet einen auf den Nutzen ausgerichteten Styling-Ansatz, der unseren Entwicklungsprozess erheblich beschleunigen kann.

Um Tailwind CSS zu installieren, führen Sie die folgenden Befehle in Ihrem Projektverzeichnis aus:

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

Dann konfigurieren Sie Ihre tailwind.config.js-Datei:

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

Konfigurieren Sie dann Ihre globals.css-Datei:

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

Orea-Farbgenerator für Farbpalette

Um eine harmonische Farbpalette sowohl für den hellen als auch für den dunklen Modus zu erstellen, können wir den Orea-Farbgenerator verwenden. Dieses Tool hilft bei der Erstellung einer Reihe von Farben, die gut zusammenpassen und leicht an verschiedene Themen angepasst werden können.

Besuchen Sie den Orea-Farbgenerator und wählen Sie Ihre Grundfarben aus. Das Tool bietet eine benutzerfreundliche Oberfläche zum Erstellen und Visualisieren Ihres Farbschemas:

Das Bild oben zeigt die Benutzeroberfläche des Orea Color Generator, wo Sie Folgendes tun können:

• Wählen Sie mit dem Farbwähler eine mittlere Farbe aus
• Generierte Farben in verschiedenen Farbtönen anzeigen
• Sehen Sie sich eine Vorschau Ihres Themas sowohl im hellen als auch im dunklen Modus an
• Kopieren Sie CSS-Variablen für eine einfache Integration in Ihr Projekt

Nachdem Sie Ihre Farbpalette mit dem Orea Color Generator erstellt haben, möchten Sie diese Farben in Ihrem Projekt implementieren. Hier ist ein Beispiel, wie Sie Ihre Farbvariablen in CSS definieren können:

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

Diese CSS-Variablen definieren eine Reihe von Schattierungen für Ihre Primärfarbe, von helleren Farben (-Primär-50) bis zu dunklen Farben (-Primär-950). Durch die Verwendung dieser Variablen können Sie ganz einfach konsistente Farben in Ihrer gesamten Anwendung anwenden und zwischen hellen und dunklen Modi wechseln.

Da wir nun unsere Farbvariablen definiert haben, integrieren wir sie in unsere Tailwind-CSS-Konfiguration:

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

Mit dieser Konfiguration können Sie diese Farben in Ihren Tailwind-Klassen verwenden, z. B. bg-primary-500 oder text-primary-200, und gleichzeitig die Möglichkeit beibehalten, Deckkraft mithilfe der Deckkraftmodifikatoren von Tailwind anzuwenden.

next-themes-Paket für das Dark/Light-Modus-Theme

Nach der Installation müssen wir unsere grundlegenden Designvariablen einrichten. Erstellen Sie eine neue CSS-Datei (z. B. globals.css) oder fügen Sie sie zu Ihrer vorhandenen hinzu:

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

Dieses CSS definiert grundlegende Farbvariablen für helle und dunkle Themen. Der [data-theme=’dark’]-Selektor wird von next-themes automatisch angewendet, wenn der Dunkelmodus aktiv ist.

Jetzt implementieren wir den ThemeProvider in Ihrer Datei „layout.tsx“:

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

In Ihren Komponenten können Sie jetzt den useTheme-Hook verwenden, um auf das aktuelle Thema zuzugreifen und es zu ändern:

"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

Dieses Setup ermöglicht einen reibungslosen Übergang zwischen hellem und dunklem Modus, wobei das Thema über das Neuladen der Seite hinweg beibehalten wird.

Dropdown-Liste für die Themenumschaltung mit shadcn/ui

Für eine ausgefeiltere Benutzeroberfläche können wir die Dropdown-Komponente von shadcn/ui verwenden, um einen Theme-Umschalter zu erstellen. Installieren Sie zunächst die erforderlichen Komponenten:

npx shadcn-ui@latest add dropdown-menu

Nun implementieren wir unsere Themenumschaltung:

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

Diese Komponente erstellt ein Dropdown-Menü mit Optionen zum Wechseln zwischen hellen, dunklen und Systemthemen. Die Schaltfläche verwendet Sonnen- und Mondsymbole, um das aktuelle Thema visuell darzustellen.

Abschluss

Die Implementierung des Dunkelmodus in einer Next.js-Anwendung mithilfe von CSS-Variablen, Tailwind CSS und Next-Themes bietet eine flexible und wartbare Lösung. Hier ist eine Zusammenfassung dessen, was wir erreicht haben:

1. Wir haben Tailwind CSS für ein Utility-First-Styling eingerichtet.
2. Wir haben den Orea-Farbgenerator verwendet, um eine konsistente Farbpalette sowohl für den hellen als auch für den dunklen Modus zu erstellen.
3. Wir haben den Themenwechsel mithilfe von Next-Themes implementiert, was ein einfaches Umschalten zwischen hellem und dunklem Modus ermöglicht.
4. Wir haben mit shadcn/ui eine ausgefeilte Theme-Umschaltkomponente erstellt, die das Benutzererlebnis verbessert.

Durch die Nutzung von CSS-Variablen haben wir ein System geschaffen, das einfach zu warten und zu erweitern ist. Durch die Verwendung von Next-Themes wird sichergestellt, dass unsere Themenpräferenz beibehalten wird und den Benutzern ein nahtloses Erlebnis geboten wird.

Beachten Sie diese wichtigen Punkte bei der Implementierung des Dunkelmodus:

• Berücksichtigen Sie immer die Barrierefreiheit und achten Sie auf ausreichenden Kontrast in beiden Themen.
• Testen Sie Ihre Anwendung gründlich im hellen und dunklen Modus.
• Erwägen Sie die Verwendung der Medienabfrage „Preferences-Color-Schema“, um die Systemeinstellungen des Benutzers zu berücksichtigen.
• Seien Sie konsistent mit Ihrem Thema über alle Komponenten und Seiten hinweg.

Mit diesem Setup sind Sie bestens gerüstet, um eine moderne, benutzerfreundliche Dunkelmodus-Option in Ihrer Next.js-Anwendung bereitzustellen. Viel Spaß beim Codieren!

Das obige ist der detaillierte Inhalt vonAnwenden des Dunkelmodus in Next.js mithilfe von CSS-Variablen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!