An Interest In:
Web News this Week
- April 29, 2024
- April 28, 2024
- April 27, 2024
- April 26, 2024
- April 25, 2024
- April 24, 2024
- April 23, 2024
Some of Our Sources
- Engadget
- Technology Review
- TutsPlus - Code
- Smashing Magazine
- Smashing Apps
- Six Revisions
- TutsPlus - Design
- Line 25
- Dev To
- Hashedout
Help Webnuz
Referal links:
Mode sombre facile avec NextJS 13 et Tailwind
Mode sombre facile avec NextJS 13 et Tailwind
NextJS - TailwindCSS - ModeSombre - React - TypeScript - next-themes
On suppose que vous matrisez dj les bases de NextJS, React et Tailwind.
Rcap'
Nous utilisons TypeScript dans cet exemple. Si vous n'tes pas familier avec TypeScript, considrez ces explications sur le typage :
// Exemple de typage de variables : let myString: string = 'Hello, world!'; // sera toujours une variable de type stringlet myNumber: number = 42; // sera toujours un nombrelet myBoolean: boolean = true; // sera true ou false// Dfinition d'un schma grce `type`type Person = { nom: string; age: number; estSympa?: boolean; // `?` indique que ce n'est pas obligatoire};// Utilisation de mon schema Person pour typer un objetconst Marie: Person = { nom: 'marie', age: 47, estSympa: true, // Sympa la Marie};const Johny: Person = { nom: 'johny', age: 25,estSympa: false // dsol Johny};Installation
... Revenons-en nos moutons...
Commencez par crer votre projet en utilisant
create-next-app@13 --tailwind NOM-DU-PROJETDans cet exemple, on n'utilise pas src ni pages, mais app pour notre router.
On a installer Next Themes:
npm install next-themesConfigurer 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 donne.
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 crer un provider pour englober tous notre code. Next-themes va automatiquement grer tout le code contenu dans ce provider.
Comme NextJs13 est server-first, on va extraire un composant Provider qui servira de provider ct client.
Crez un fichierProviders.tsx, on le cre 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 propsfunction Providers({ children } : {children: React.ReactNode}) { return <ThemeProvider>{children}</ThemeProvider>}export default ProvidersOn 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 ajouts ainsi depuis NextJS 13export 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 thme
Toggle theme
Dans @app/page, soit notre home page, on va importer le hook de next-themes, et crer 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 thmes clair et sombre.
Et voil ! Vous avez maintenant implment un mode sombre avec NextJS 13 et Tailwind en utilisant next-themes.
Vous pouvez maintenant explorer d'autres options de personnalisation et adapter le thme vos prfrences.
N'hsitez pas exprimenter avec diffrentes couleurs et styles pour crer une exprience utilisateur unique et agrable.
N'hsitez pas non plus partager votre exprience ou vos astuces en commentaire .
Original Link: https://dev.to/maxiim3/mode-sombre-facile-avec-nextjs-13-et-tailwind-4lki
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To