Add next-themes logic + icons.

src/components/header/index.tsx

@@ -1,9 +1,57 @@
-import React from "react"
+import React, { useEffect, useState } from "react"
 import { DiGithubBadge } from "react-icons/di"
 import { MdSettings } from "react-icons/md"
 import Link from "next/link"
+import { useTheme } from "next-themes"
 
 export function Header() {
+  const { theme, systemTheme, setTheme } = useTheme()
+  const [mounted, setMounted] = useState(false)
+
+  useEffect(() => {
+    setMounted(true)
+  }, [])
+
+  const renderThemeToggle = () => {
+    if (!mounted) return null
+
+    const currentTheme = theme === "system" ? systemTheme : theme
+
+    if (currentTheme === "dark") {
+      return (
+        <button onClick={() => setTheme("light")}>
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            fill="currentColor"
+            className="w-6 h-6"
+          >
+            <title>Theme toggle</title>
+            <path
+              fillRule="evenodd"
+              d="M9.528 1.718a.75.75 0 01.162.819A8.97 8.97 0 009 6a9 9 0 009 9 8.97 8.97 0 003.463-.69.75.75 0 01.981.98 10.503 10.503 0 01-9.694 6.46c-5.799 0-10.5-4.701-10.5-10.5 0-4.368 2.667-8.112 6.46-9.694a.75.75 0 01.818.162z"
+              clipRule="evenodd"
+            />
+          </svg>
+        </button>
+      )
+    } else {
+      return (
+        <button onClick={() => setTheme("dark")}>
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            fill="currentColor"
+            className="w-6 h-6"
+          >
+            <title>Theme toggle</title>
+            <path d="M12 2.25a.75.75 0 01.75.75v2.25a.75.75 0 01-1.5 0V3a.75.75 0 01.75-.75zM7.5 12a4.5 4.5 0 119 0 4.5 4.5 0 01-9 0zM18.894 6.166a.75.75 0 00-1.06-1.06l-1.591 1.59a.75.75 0 101.06 1.061l1.591-1.59zM21.75 12a.75.75 0 01-.75.75h-2.25a.75.75 0 010-1.5H21a.75.75 0 01.75.75zM17.834 18.894a.75.75 0 001.06-1.06l-1.59-1.591a.75.75 0 10-1.061 1.06l1.59 1.591zM12 18a.75.75 0 01.75.75V21a.75.75 0 01-1.5 0v-2.25A.75.75 0 0112 18zM7.758 17.303a.75.75 0 00-1.061-1.06l-1.591 1.59a.75.75 0 001.06 1.061l1.591-1.59zM6 12a.75.75 0 01-.75.75H3a.75.75 0 010-1.5h2.25A.75.75 0 016 12zM6.697 7.757a.75.75 0 001.06-1.06l-1.59-1.591a.75.75 0 00-1.061 1.06l1.59 1.591z" />
+          </svg>
+        </button>
+      )
+    }
+  }
+
   return (
     <header className="bg-custom-green-light mb-5 mx-auto border-0 rounded-xl p-4 shadow-md">
       <div className="container flex justify-between items-center">
@@ -24,6 +72,7 @@ export function Header() {
               <MdSettings className="inline text-2xl" title="Settings" />
             </div>
           </Link>
+          {renderThemeToggle()}
         </div>
       </div>
     </header>

src/pages/_app.tsx

@@ -1,6 +1,7 @@
 import "../styles/global.css"
 import { AppProps } from "next/app"
 import { useEffect, useState } from "react"
+import { ThemeProvider } from "next-themes"
 
 export default function App({ Component, pageProps }: AppProps) {
   const [keys, setKeys] = useState<{
@@ -17,5 +18,9 @@ export default function App({ Component, pageProps }: AppProps) {
     })()
   }, [])
 
-  return <Component {...{ ...pageProps, keys }} />
+  return (
+    <ThemeProvider attribute="class">
+      <Component {...{ ...pageProps, keys }} />
+    </ThemeProvider>
+  )
 }

tailwind.config.js

@@ -5,14 +5,15 @@ module.exports = {
     "./src/components/**/*.{js,ts,jsx,tsx}",
     "./src/views/**/*.{js,ts,jsx,tsx}",
   ],
+  darkMode: "class",
   theme: {
     extend: {
       colors: {
-        'custom-green-light': '#6b9370',
-        'custom-green-dark': '#4D6A51',
-        'custom-black': '#3C3744'
-      }
-    }
+        "custom-green-light": "#6b9370",
+        "custom-green-dark": "#4D6A51",
+        "custom-black": "#3C3744",
+      },
+    },
   },
   plugins: [],
 }