diff --git a/package-lock.json b/package-lock.json
index b66c243..d86709a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -19,6 +19,7 @@
"autoprefixer": "^10.4.15",
"husky": "^8.0.3",
"lint-staged": "^14.0.1",
+ "next-themes": "^0.2.1",
"postcss": "^8.4.30",
"prettier": "3.0.3",
"tailwindcss": "^3.3.3"
@@ -2025,7 +2026,6 @@
"version": "2.3.3",
"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
"integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
- "dev": true,
"hasInstallScript": true,
"optional": true,
"os": [
@@ -3161,6 +3161,17 @@
}
}
},
+ "node_modules/next-themes": {
+ "version": "0.2.1",
+ "resolved": "https://registry.npmjs.org/next-themes/-/next-themes-0.2.1.tgz",
+ "integrity": "sha512-B+AKNfYNIzh0vqQQKqQItTS8evEouKD7H5Hj3kmuPERwddR2TxvDSFZuTj6T7Jfn1oyeUyJMydPl1Bkxkh0W7A==",
+ "dev": true,
+ "peerDependencies": {
+ "next": "*",
+ "react": "*",
+ "react-dom": "*"
+ }
+ },
"node_modules/next/node_modules/postcss": {
"version": "8.4.14",
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.14.tgz",
diff --git a/package.json b/package.json
index 09efabb..f2e38e9 100644
--- a/package.json
+++ b/package.json
@@ -25,6 +25,7 @@
"autoprefixer": "^10.4.15",
"husky": "^8.0.3",
"lint-staged": "^14.0.1",
+ "next-themes": "^0.2.1",
"postcss": "^8.4.30",
"prettier": "3.0.3",
"tailwindcss": "^3.3.3"
diff --git a/src/app/layout.jsx b/src/app/layout.jsx
index 9faa593..ccef5aa 100644
--- a/src/app/layout.jsx
+++ b/src/app/layout.jsx
@@ -1,12 +1,15 @@
'use client'
+import { ThemeProvider } from 'next-themes'
import './global.css'
export default function RootLayout({ children }) {
return (
-
+
- {children}
+
+ {children}
+
)
diff --git a/src/app/page.jsx b/src/app/page.jsx
index 616f32d..7efded3 100644
--- a/src/app/page.jsx
+++ b/src/app/page.jsx
@@ -1,5 +1,7 @@
'use client'
+import { useState, useEffect } from 'react'
+import { useTheme } from 'next-themes'
import Message from '@/components/message'
const now = Date.now()
@@ -14,6 +16,21 @@ const MOCK_MESSAGES = [
]
export default function Home() {
+ const [mounted, setMounted] = useState(false)
+ const { resolvedTheme, setTheme } = useTheme()
+
+ useEffect(() => {
+ setMounted(true)
+ }, [])
+
+ if (!mounted) {
+ return null
+ }
+
+ const toggleThemeHandler = () => {
+ setTheme(resolvedTheme === 'dark' ? 'light' : 'dark')
+ }
+
return (
{MOCK_MESSAGES.map(({ sentAt, content }, i) => (
@@ -21,6 +38,12 @@ export default function Home() {
{content}
))}
+
)
}