From 14da9f50105f3bde55cff2daf48b71d9fe170d6f Mon Sep 17 00:00:00 2001
From: Aryan Ramesh Jain <138214350+jainaryan04@users.noreply.github.com>
Date: Thu, 31 Oct 2024 22:31:39 +0530
Subject: [PATCH] initial #469: add hook and toggle

---
 frontend/src/Pages/Herosection.jsx      |  4 +++-
 frontend/src/components/ThemeToggle.jsx | 32 +++++++++++++++++++++++++
 frontend/src/hooks/useDarkMode.js       | 16 +++++++++++++
 3 files changed, 51 insertions(+), 1 deletion(-)
 create mode 100644 frontend/src/components/ThemeToggle.jsx
 create mode 100644 frontend/src/hooks/useDarkMode.js

diff --git a/frontend/src/Pages/Herosection.jsx b/frontend/src/Pages/Herosection.jsx
index 750dcf4..3fbc936 100644
--- a/frontend/src/Pages/Herosection.jsx
+++ b/frontend/src/Pages/Herosection.jsx
@@ -1,5 +1,6 @@
 import React from "react";
 import "./Herosection.css";
+import ThemeToggle from "../components/ThemeToggle"
 import logo from "../assets/stationsaarthi.svg";
 import navigationsvg from "../assets/svg/navigation.svg";
 import bookingsvg from "../assets/svg/bookings.svg";
@@ -56,8 +57,9 @@ const Herosection = () => {
   return (
     <>
       <div className="relative z-50 flex items-center justify-between gap-[88vw]">
-        <div>
+        <div className="flex flex-row gap-x-2">
           <Navbar />
+          <ThemeToggle />
         </div>
 
         <div className="flex items-center justify-center">
diff --git a/frontend/src/components/ThemeToggle.jsx b/frontend/src/components/ThemeToggle.jsx
new file mode 100644
index 0000000..d7d0c43
--- /dev/null
+++ b/frontend/src/components/ThemeToggle.jsx
@@ -0,0 +1,32 @@
+import { FaSun, FaMoon } from 'react-icons/fa';
+import useDarkMode from '../hooks/useDarkMode';
+import "../../src/index.css";
+
+const ThemeSwitcher = () => {
+  const [theme, setTheme] = useDarkMode();
+  const isDarkMode = theme === 'dark';
+
+  return (
+    <div className="flex flex-row justify-center items-center">
+      <label className="relative inline-block w-16 h-9">
+  <input
+    type="checkbox"
+    className="sr-only peer"
+    checked={isDarkMode}
+    onChange={() => setTheme(isDarkMode ? 'light' : 'dark')}
+  />
+  <span className="block w-full h-full bg-blue-500 rounded-3xl border-2 border-blue-400 cursor-pointer peer-checked:bg-slate-800 peer-checked:border-blue-400 transition-colors duration-400"></span>
+
+  {/* Sun Icon for Light Mode */}
+  <span className="absolute top-1/2 left-[0.3em] w-4 h-4 bg-gradient-to-r from-pink-500 to-orange-400 rounded-full transform -translate-y-1/2 transition-all duration-400 opacity-100 peer-checked:opacity-0"></span>
+
+  {/* Moon Icon for Dark Mode */}
+  <span className="absolute top-1/2 left-[calc(100%-1.3em)] w-4 h-4 bg-transparent rounded-full transform -translate-y-1/2 transition-all duration-400 opacity-0 peer-checked:opacity-100 peer-checked:shadow-[inset_-3px_-2px_5px_-2px_#8983f7,inset_-8px_-4px_0_0_#a3dafb]"></span>
+</label>
+
+
+      </div>
+  );
+};
+
+export default ThemeSwitcher;
\ No newline at end of file
diff --git a/frontend/src/hooks/useDarkMode.js b/frontend/src/hooks/useDarkMode.js
new file mode 100644
index 0000000..1513686
--- /dev/null
+++ b/frontend/src/hooks/useDarkMode.js
@@ -0,0 +1,16 @@
+import { useState, useEffect } from 'react';
+
+const useDarkMode = () => {
+  const [theme, setTheme] = useState(() => localStorage.getItem('theme') || 'light');
+
+  useEffect(() => {
+    const root = document.documentElement;
+    const isDark = theme === 'dark';
+    root.classList.toggle('dark', isDark);
+    localStorage.setItem('theme', theme);
+  }, [theme]);
+
+  return [theme, setTheme];
+};
+
+export default useDarkMode;
\ No newline at end of file