add theme toggle functionality

dev-KPI · Sep 29, 2023 · 3bd926d · 3bd926d
1 parent 181081f
commit 3bd926d
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 3 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git 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
@@ -1,12 +1,15 @@
 'use client'
 
+import { ThemeProvider } from 'next-themes'
 import './global.css'
 
 export default function RootLayout({ children }) {
   return (
-    <html lang="en">
+    <html lang="en" suppressHydrationWarning>
       <body className="bg-lightAccent dark:bg-darkAccent flex flex-col bg-slate-300">
-        <main>{children}</main>
+        <ThemeProvider attribute="class">
+          <main>{children}</main>
+        </ThemeProvider>
       </body>
     </html>
   )

diff --git 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,13 +16,34 @@ 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 (
     <main className="flex flex-col gap-3 p-3">
       {MOCK_MESSAGES.map(({ sentAt, content }, i) => (
         <Message key={i} sentAt={sentAt}>
           {content}
         </Message>
       ))}
+      <button
+        className="w-fit mx-auto rounded text-light p-2 bg-primary border border-dark dark:border-lightAccent"
+        onClick={toggleThemeHandler}
+      >
+        Toggle Theme
+      </button>
     </main>
   )
 }