light and dark mode project

src/App.jsx

@@ -14,6 +14,7 @@ import ImageSlider from "@/pages/ImageSlider";
 import LoadMoreData from "./pages/LoadMoreData";
 import TreeView from "./pages/tree-view/TreeView";
 import QRCodeGenerator from "./pages/QRCodeGenerator";
+import LightDarkMode from "./pages/light-dark-mode/light-dark-mode";
 
 function App() {
   return (
@@ -41,6 +42,8 @@ function App() {
           <Route path="tree-view" element={<TreeView menus={menus} />} />
           {/* generate QR code */}
           <Route path="qr-code-generator" element={<QRCodeGenerator />} />
+          {/* Light Dark Mode */}
+          <Route path='light-dark-mode' element={<LightDarkMode />} />
 
           {/* Error Page */}
           <Route path="*" element={<NotFound />} />

src/data/projects.js

@@ -33,6 +33,11 @@ export const projects = [
     id: 7,
     name: "QR Code Generator",
     path: 'qr-code-generator'
+  },
+  {
+    id: 8,
+    name: 'Light Dark Mode',
+    path: 'light-dark-mode',
   }
 ];
 

src/pages/light-dark-mode/light-dark-mode.jsx

@@ -0,0 +1,20 @@
+import { Button } from "@/components/ui/button";
+import useLocalStorage from "./useLocalStorage";
+
+export default function LightDarkMode() {
+
+  const [theme, setTheme] = useLocalStorage('theme', 'dark')
+
+  function handleToggleTheme() {
+    setTheme(theme === 'light' ? 'dark' : 'light')
+  }
+
+  return (
+    <div className="flex flex-col gap-3 flex-1 justify-center items-start data-[theme='dark']:bg-black data-[theme='light']:bg-white" data-theme={theme}>
+      <div className="container space-y-8">
+        <p className="data-[theme='dark']:text-white data-[theme='light']:text-black text-4xl" data-theme={theme}>Hello World !</p>
+        <Button className="data-[theme='dark']:bg-white data-[theme='dark']:text-black data-[theme='light']:bg-black data-[theme='light']:text-white ml-2" data-theme={theme} onClick={handleToggleTheme}>Change Theme</Button>
+      </div>
+    </div>
+  );
+}

src/pages/light-dark-mode/useLocalStorage.jsx

@@ -0,0 +1,24 @@
+import { useEffect, useState } from "react";
+
+export default function useLocalStorage(key, defaultValue) {
+  const [value, setValue] = useState(() => {
+    let currentValue;
+
+    try {
+      currentValue = JSON.parse(
+        localStorage.getItem(key) || String(defaultValue),
+      );
+    } catch (error) {
+      console.log(error);
+      currentValue = defaultValue;
+    }
+
+    return currentValue;
+  });
+
+  useEffect(() => {
+    localStorage.setItem(key, JSON.stringify(value));
+  }, [key, value]);
+
+  return [value, setValue];
+}