This content originally appeared on DEV Community and was authored by Maxime Tamburrini
đ Mode sombre facile avec NextJS 13 et Tailwind đ
NextJS - TailwindCSS - ModeSombre - React - TypeScript - next-themes
On suppose que vous maßtrisez déjà les bases de NextJS, React et Tailwind.
RĂ©cap'
Nous utilisons TypeScript dans cet exemple. Si vous n'ĂȘtes pas familier avec TypeScript, considĂ©rez ces explications sur le typage :
// Exemple de typage de variables :
let myString: string = 'Hello, world!'; // sera toujours une variable de type string
let myNumber: number = 42; // sera toujours un nombre
let myBoolean: boolean = true; // sera true ou false
// Définition d'un schéma grùce à `type`
type Person = {
nom: string;
age: number;
estSympa?: boolean; // `?` indique que ce n'est pas obligatoire
};
// Utilisation de mon schema Person pour typer un objet
const Marie: Person = {
nom: 'marie',
age: 47,
estSympa: true, // Sympa la Marie
};
const Johny: Person = {
nom: 'johny',
age: 25,
estSympa: false // désolé Johny
};
Installation
... đ Revenons-en Ă nos moutons...
Commencez par créer votre projet en utilisant
create-next-app@13 --tailwind NOM-DU-PROJET
Dans cet exemple, on n'utilise pas src ni pages, mais app pour notre router.
On a installer Next Themes:
npm install next-themes
đš Configurer Tailwind avec next-theme đš
Comment ça fonctionne ?
Next-themes va ajouter[data-theme="dark"] / [data-theme="light"]au documentElement aka html tag.
Il faut indiquer à Tailwind d'observer cette donnée.
Configurer Tailwind
Dans tailwind.config.js, ajoutez darkMode:['class', '[data-theme="dark"]'].
Le fichier de configuration devrait ressembler à quelque chose comme ça :
/** @type {import('tailwindcss').Config} */
module.exports = {
darkMode: ['class', '[data-theme="dark"]'],
content: [
'./pages/**/*.{js,ts,jsx,tsx}',
'./components/**/*.{js,ts,jsx,tsx}',
'./app/**/*.{js,ts,jsx,tsx}',
],
theme: {
extend: {
backgroundImage: {
'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
'gradient-conic':
'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
},
},
},
plugins: [],
}
đ Ajouter le Provider đ
On va devoir créer un provider pour englober tous notre code. Next-themes va automatiquement gérer tout le code contenu dans ce provider.
Comme NextJs13 est server-first, on va extraire un composant Provider qui servira de provider cÎté client.
CrĂ©ez un fichierProviders.tsx, on le crĂ©e dans components mais vous pouvez le mettree oĂč bon vous semble.
Tout d'abord, ajoutez 'use client' tout en haut du fichier,
Puis importez le ThemeProvider de 'next-themes'
'use client'
import React from "react"
import { ThemeProvider } from 'next-themes' // importer le provider
//{ children } : {children: React.ReactNode}
// on destructure props pour extraire children, puis indique le typage de props
function Providers({ children } : {children: React.ReactNode}) {
return <ThemeProvider>{children}</ThemeProvider>
}
export default Providers
On n'a plus qu'Ă wrapper les children de notre RootLayout avec ce provider.
On ajoute quelques classes Tailwind pour s'assurer d'avoir du style Ă tester.
import "./globals.css"
import React from "react"
import Providers from "@/components/Providers"
export const metadata = {
title: "Create Next App",
description: "Generated by create next app",
} // les Metadatas sont ajoutés ainsi depuis NextJS 13
export default function RootLayout({children}: {children: React.ReactNode}) {
return (
<html lang="en">
<body className="bg-gray-100 dark:bg-slate-800">
<Providers>{children}</Providers>
</body>
</html>
)
}
Il faut maintenant que l'on ajoute un bouton pour switcher de thĂšme
đ Toggle theme đ
Dans @app/page, soit notre home page, on va importer le hook de next-themes, et créer notre bouton qui aura une methode pour switcher l'état de theme.
On peut Ă©galement ajouter un titre pour s'assurer du changement de couleur :
import { useTheme } from 'next-themes'
export default () => {
const { theme, setTheme } = useTheme()
return (
<main>>
<header className="fixed top-0 right-0 p-6">
<button
className="text-amber-500 dark:text-sky-200 text-4xl"
onClick={() => setTheme(theme === "light" ? "dark" : "light")}>
{theme === "light" ? <ReactIcons.Sun /> : <ReactIcons.Moon />}
</button>
</header>
<h1 className="text-4xl text-dark dark:text-white">Ma couleur change</h1>
</main>
)
}
Ă ce point, le bouton devrait fonctionner et permettre de basculer entre les thĂšmes clair et sombre. đđ
Et voilà ! Vous avez maintenant implémenté un mode sombre avec NextJS 13 et Tailwind en utilisant next-themes.
Vous pouvez maintenant explorer d'autres options de personnalisation et adapter le thÚme à vos préférences.
N'hĂ©sitez pas Ă expĂ©rimenter avec diffĂ©rentes couleurs et styles pour crĂ©er une expĂ©rience utilisateur unique et agrĂ©able. đđ
N'hĂ©sitez pas non plus Ă partager votre expĂ©rience ou vos astuces en commentaire đ.
This content originally appeared on DEV Community and was authored by Maxime Tamburrini
Maxime Tamburrini | Sciencx (2023-04-14T20:34:28+00:00) Mode sombre facile avec NextJS 13 et Tailwind. Retrieved from https://www.scien.cx/2023/04/14/mode-sombre-facile-avec-nextjs-13-et-tailwind/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.