Application du mode sombre dans Next.js à l'aide de variables CSS

Dans le paysage actuel du développement Web, proposer une option de mode sombre est devenu presque essentiel pour une interface utilisateur moderne. Dans cet article, nous explorerons comment implémenter une solution robuste en mode sombre dans un projet Next.js à l'aide de variables CSS, Tailwind CSS et de quelques outils et packages utiles.

Tailwind CSS pour les classes utilitaires

Tout d’abord, configurons Tailwind CSS dans notre projet Next.js. Tailwind propose une approche de style axée sur l'utilité, ce qui peut accélérer considérablement notre processus de développement.

Pour installer Tailwind CSS, exécutez les commandes suivantes dans le répertoire de votre projet :

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

Ensuite, configurez votre fichier 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: [],
}

Ensuite, configurez votre fichier globals.css :

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

Générateur de couleurs Orea pour palette de couleurs

Pour créer une palette de couleurs harmonieuse pour les modes clair et sombre, nous pouvons utiliser le générateur de couleurs Orea. Cet outil permet de générer un ensemble de couleurs qui fonctionnent bien ensemble et peuvent être facilement adaptées à différents thèmes.

Visitez le générateur de couleurs Orea et sélectionnez vos couleurs de base. L'outil fournit une interface conviviale pour créer et visualiser votre palette de couleurs :

L'image ci-dessus montre l'interface du générateur de couleurs Orea, où vous pouvez :

• Choisissez une couleur intermédiaire à l'aide du sélecteur de couleurs
• Afficher les couleurs générées dans différentes nuances
• Voir un aperçu de votre thème en modes clair et sombre
• Copiez les variables CSS pour une intégration facile dans votre projet

Après avoir généré votre palette de couleurs avec le générateur de couleurs Orea, vous souhaiterez implémenter ces couleurs dans votre projet. Voici un exemple de la façon dont vous pouvez définir vos variables de couleur en 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;
}

Ces variables CSS définissent une gamme de nuances pour votre couleur primaire, de la couleur plus claire (-primary-50) aux couleurs sombres (-primary-950). En utilisant ces variables, vous pouvez facilement appliquer des couleurs cohérentes dans toute votre application et basculer entre les modes clair et sombre.

Maintenant que nos variables de couleur sont définies, intégrons-les dans notre configuration CSS Tailwind :

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

Cette configuration vous permet d'utiliser ces couleurs dans vos classes Tailwind, comme bg-primary-500 ou text-primary-200, tout en conservant la possibilité d'appliquer l'opacité à l'aide des modificateurs d'opacité de Tailwind.

Package next-themes pour le thème du mode sombre/clair

Après l'installation, nous devons configurer nos variables de thème de base. Créez un nouveau fichier CSS (par exemple, globals.css) ou ajoutez-le à votre fichier existant :

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

Ce CSS définit les variables de couleur de base pour les thèmes clairs et sombres. Le sélecteur [data-theme=’dark’] sera automatiquement appliqué par les thèmes suivants lorsque le mode sombre est actif.

Maintenant, implémentons le ThemeProvider dans votre fichier 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>
  )
}

Dans vos composants, vous pouvez désormais utiliser le hook useTheme pour accéder et modifier le thème actuel :

"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

Cette configuration permet une transition en douceur entre les modes clair et sombre, le thème étant conservé lors des rechargements de page.

Liste déroulante pour basculer le thème à l'aide de shadcn/ui

Pour une interface utilisateur plus raffinée, nous pouvons utiliser le composant déroulant de shadcn/ui pour créer une bascule de thème. Tout d'abord, installez les composants nécessaires :

npx shadcn-ui@latest add dropdown-menu

Maintenant, implémentons notre bascule de thème :

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

Ce composant crée un menu déroulant avec des options permettant de basculer entre les thèmes clairs, sombres et système. Le bouton utilise des icônes de soleil et de lune pour représenter visuellement le thème actuel.

Conclusion

L'implémentation du mode sombre dans une application Next.js à l'aide de variables CSS, Tailwind CSS et next-themes fournit une solution flexible et maintenable. Voici un résumé de ce que nous avons réalisé :

1. Nous avons configuré Tailwind CSS pour un style axé d'abord sur les utilitaires.
2. Nous avons utilisé le générateur de couleurs Orea pour créer une palette de couleurs cohérente pour les modes clair et sombre.
3. Nous avons implémenté le changement de thème à l'aide des thèmes suivants, permettant de basculer facilement entre les modes clair et sombre.
4. Nous avons créé un composant de bascule de thème raffiné à l'aide de shadcn/ui, améliorant ainsi l'expérience utilisateur.

En tirant parti des variables CSS, nous avons créé un système facile à maintenir et à étendre. L'utilisation des thèmes suivants garantit le maintien de notre préférence de thème, offrant ainsi une expérience transparente aux utilisateurs.

N'oubliez pas ces points clés lors de la mise en œuvre du mode sombre :

• Considérez toujours l'accessibilité et assurez un contraste suffisant dans les deux thèmes.
• Testez minutieusement votre application en mode clair et sombre.
• Envisagez d'utiliser la requête multimédia préfère-couleur-schéma pour respecter les préférences système de l'utilisateur.
• Soyez cohérent avec votre thème sur tous les composants et pages.

Avec cette configuration, vous êtes bien équipé pour fournir une option de mode sombre moderne et conviviale dans votre application Next.js. Bon codage !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!