feat: add a theme provider

This commit is contained in:
Dorian Niemiec 2024-11-05 19:15:13 +01:00
parent 9fff32d473
commit 4fd97f1bdf
4 changed files with 23 additions and 2 deletions

View file

@ -1,4 +1,5 @@
import { Inter } from "next/font/google"; import { Inter } from "next/font/google";
import { ThemeProvider } from "next-themes";
import "./globals.css"; import "./globals.css";
const inter = Inter({ const inter = Inter({
@ -38,8 +39,12 @@ export const metadata = {
export default function RootLayout({ children }) { export default function RootLayout({ children }) {
return ( return (
<html lang="en"> <html lang="en" suppressHydrationWarning>
<body className={`antialiased ${inter.className}`}>{children}</body> <body className={`antialiased ${inter.className}`}>
<ThemeProvider attribute="class" enableSystem={true}>
{children}
</ThemeProvider>
</body>
</html> </html>
); );
} }

10
package-lock.json generated
View file

@ -9,6 +9,7 @@
"version": "0.1.0", "version": "0.1.0",
"dependencies": { "dependencies": {
"next": "^15.0.2", "next": "^15.0.2",
"next-themes": "^0.4.3",
"react": "^18.3.1", "react": "^18.3.1",
"react-dom": "^18.3.1" "react-dom": "^18.3.1"
}, },
@ -7035,6 +7036,15 @@
} }
} }
}, },
"node_modules/next-themes": {
"version": "0.4.3",
"resolved": "https://registry.npmjs.org/next-themes/-/next-themes-0.4.3.tgz",
"integrity": "sha512-nG84VPkTdUHR2YeD89YchvV4I9RbiMAql3GiLEQlPvq1ioaqPaIReK+yMRdg/zgiXws620qS1rU30TiWmmG9lA==",
"peerDependencies": {
"react": "^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc",
"react-dom": "^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc"
}
},
"node_modules/next/node_modules/postcss": { "node_modules/next/node_modules/postcss": {
"version": "8.4.31", "version": "8.4.31",
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz", "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",

View file

@ -13,6 +13,7 @@
}, },
"dependencies": { "dependencies": {
"next": "^15.0.2", "next": "^15.0.2",
"next-themes": "^0.4.3",
"react": "^18.3.1", "react": "^18.3.1",
"react-dom": "^18.3.1" "react-dom": "^18.3.1"
}, },

View file

@ -6,6 +6,11 @@ module.exports = {
"./components/**/*.{js,ts,jsx,tsx,mdx}", "./components/**/*.{js,ts,jsx,tsx,mdx}",
"./app/**/*.{js,ts,jsx,tsx,mdx}", "./app/**/*.{js,ts,jsx,tsx,mdx}",
], ],
purge: {
options: {
safelist: ["dark"],
},
},
theme: { theme: {
extend: { extend: {
colors: { colors: {