From 6438db74e00e66b1ae3a973365a8018d6499b965 Mon Sep 17 00:00:00 2001
From: NgocTho <thob2112011@student.ctu.edu.vn>
Date: Sat, 2 Nov 2024 21:07:59 +0700
Subject: [PATCH] update the Theme Change button applying the theme change to
 the entire website.

---
 app/(root)/page.tsx              | 42 ++++++++++++--
 components/custom/RootNavbar.tsx | 94 ++++++++++++++++++++++++--------
 2 files changed, 109 insertions(+), 27 deletions(-)

diff --git a/app/(root)/page.tsx b/app/(root)/page.tsx
index e0f82ef..612db62 100644
--- a/app/(root)/page.tsx
+++ b/app/(root)/page.tsx
@@ -1,18 +1,52 @@
+"use client";
+import React, { useState, useEffect } from "react";
 import Link from "next/link";
 
 export default function Home() {
+  const [darkMode, setDarkMode] = useState<boolean>(false);
+  const loadDarkMode = () => {
+    setDarkMode((prevMode) => {
+      const newMode = !prevMode;
+      localStorage.getItem("darkMode");
+      return newMode;
+    });
+  };
+
+  useEffect(() => {
+    const savedTheme = localStorage.getItem("darkMode");
+    if (savedTheme !== null) {
+      setDarkMode(JSON.parse(savedTheme));
+    }
+    window.addEventListener("darkModeChanged", loadDarkMode);
+    return () => {
+      window.removeEventListener("darkModeChanged", loadDarkMode);
+    };
+  }, []);
+
+  useEffect(() => {
+    if (darkMode) {
+      document.body.classList.add("dark");
+    } else {
+      document.body.classList.remove("dark");
+    }
+  }, [darkMode]);
+
   return (
     <main>
       <section className="flex flex-col justify-center items-center min-h-screen text-center">
         <h1 className="text-4xl font-bold mb-4">Welcome to ML4E</h1>
         <p className="text-lg mb-6">
-          Discover learning resources, datasets, and a vibrant community for machine learning enthusiasts.
+          Discover learning resources, datasets, and a vibrant community for
+          machine learning enthusiasts.
         </p>
-        <Link href="/learn" className="px-6 py-3 bg-violet-700 text-white rounded-lg hover:bg-violet-900">
-            Get Started
+
+        <Link
+          href="/learn"
+          className="px-6 py-3 bg-violet-700 text-white rounded-lg hover:bg-violet-900"
+        >
+          Get Started
         </Link>
       </section>
     </main>
   );
 }
-
diff --git a/components/custom/RootNavbar.tsx b/components/custom/RootNavbar.tsx
index 666af3f..1b76879 100644
--- a/components/custom/RootNavbar.tsx
+++ b/components/custom/RootNavbar.tsx
@@ -3,7 +3,12 @@
 import Link from "next/link";
 import { useState, useEffect, useRef, useCallback } from "react";
 import { Button } from "@/components/ui/button";
-import { Dialog, DialogTrigger, DialogContent, DialogTitle } from "@/components/ui/dialog";
+import {
+  Dialog,
+  DialogTrigger,
+  DialogContent,
+  DialogTitle,
+} from "@/components/ui/dialog";
 import Image from "next/image";
 import { Search, Moon, Sun, MoreVertical } from "lucide-react";
 
@@ -65,26 +70,34 @@ function Navbar({ darkMode, toggleDarkMode, isOpen, setIsOpen }: NavbarProps) {
             />
             <span className="text-xl font-bold tracking-wider">ML4E</span>
           </Link>
-          <Link href="/learn" className="hidden md:block">Learn</Link>
-          <Link href="/datasets" className="hidden md:block">Datasets</Link>
-          <Link href="/community" className="hidden md:block">Community</Link>
+          <Link href="/learn" className="hidden md:block">
+            Learn
+          </Link>
+          <Link href="/datasets" className="hidden md:block">
+            Datasets
+          </Link>
+          <Link href="/community" className="hidden md:block">
+            Community
+          </Link>
         </div>
       </div>
       <div className="flex items-center justify-end space-x-4">
         <Dialog open={isOpen} onOpenChange={setIsOpen}>
-        <DialogTrigger asChild>
-  <Button
-    variant="outline"
-    className={`hidden md:flex items-center w-full max-w-xs h-10 rounded-2xl ${
-      darkMode ? "bg-[#1f2937] hover:bg-[#425167]" : "bg-[#f0f0f0] hover:bg-[#e0e0e0]"
-    } border-none outline-none`}
-    onClick={() => setIsOpen(true)}
-  >
-    <Search className={darkMode ? "text-gray-400" : "text-black"} />
-    <span className="ml-2 text-[#999595]">Search</span>
-    <span className="ml-24 text-gray-400 text-sm">Command + K</span>
-  </Button>
-</DialogTrigger>
+          <DialogTrigger asChild>
+            <Button
+              variant="outline"
+              className={`hidden md:flex items-center w-full max-w-xs h-10 rounded-2xl ${
+                darkMode
+                  ? "bg-[#1f2937] hover:bg-[#425167]"
+                  : "bg-[#f0f0f0] hover:bg-[#e0e0e0]"
+              } border-none outline-none`}
+              onClick={() => setIsOpen(true)}
+            >
+              <Search className={darkMode ? "text-gray-400" : "text-black"} />
+              <span className="ml-2 text-[#999595]">Search</span>
+              <span className="ml-24 text-gray-400 text-sm">Command + K</span>
+            </Button>
+          </DialogTrigger>
 
           <DialogContent
             className={`[&>button]:hidden p-6 rounded-lg shadow-lg w-full max-w-2xl outline-none border-none mb-12 max-h-full ${
@@ -121,13 +134,47 @@ function Navbar({ darkMode, toggleDarkMode, isOpen, setIsOpen }: NavbarProps) {
             </div>
           </DialogContent>
         </Dialog>
-        <button onClick={() => setIsOpen(true)} className={`md:hidden p-2 rounded-full ${darkMode ? "text-white" : "text-black"}`}><Search /></button>
-        <button className="md:hidden focus:outline-none" onClick={toggleDropdown}><MoreVertical className={darkMode ? "text-white" : "text-black"} /></button>
+        <button
+          onClick={() => setIsOpen(true)}
+          className={`md:hidden p-2 rounded-full ${
+            darkMode ? "text-white" : "text-black"
+          }`}
+        >
+          <Search />
+        </button>
+        <button
+          className="md:hidden focus:outline-none"
+          onClick={toggleDropdown}
+        >
+          <MoreVertical className={darkMode ? "text-white" : "text-black"} />
+        </button>
         {dropdownOpen && (
-          <div className={`absolute right-1 top-12 w-48 rounded-lg shadow-lg z-20 p-2 ${darkMode ? "bg-[#1f2937] text-white" : "bg-white text-black"}`}>
-            <Link href="/" onClick={() => setDropdownOpen(false)} className="block w-full px-4 py-2 hover:bg-gray-200 rounded-lg">Home</Link>
-            <Link href="/learn" onClick={() => setDropdownOpen(false)} className="block w-full px-4 py-2 hover:bg-gray-200 rounded-lg">Learn</Link>
-            <Link href="/about" onClick={() => setDropdownOpen(false)} className="block w-full px-4 py-2 hover:bg-gray-200 rounded-lg">About</Link>
+          <div
+            className={`absolute right-1 top-12 w-48 rounded-lg shadow-lg z-20 p-2 ${
+              darkMode ? "bg-[#1f2937] text-white" : "bg-white text-black"
+            }`}
+          >
+            <Link
+              href="/"
+              onClick={() => setDropdownOpen(false)}
+              className="block w-full px-4 py-2 hover:bg-gray-200 rounded-lg"
+            >
+              Home
+            </Link>
+            <Link
+              href="/learn"
+              onClick={() => setDropdownOpen(true)}
+              className="block w-full px-4 py-2 hover:bg-gray-200 rounded-lg"
+            >
+              Learn
+            </Link>
+            <Link
+              href="/about"
+              onClick={() => setDropdownOpen(false)}
+              className="block w-full px-4 py-2 hover:bg-gray-200 rounded-lg"
+            >
+              About
+            </Link>
           </div>
         )}
         <div className="flex items-center">
@@ -163,6 +210,7 @@ export default function RootNavbar() {
       localStorage.setItem("darkMode", JSON.stringify(newMode));
       return newMode;
     });
+    window.dispatchEvent(new Event("darkModeChanged"));
   };
 
   return (