Merge pull request #1528 from vinaybadgujar102/quick_toggle

Quick toggle dark/light mode based on current time

src/components/Header/Header.tsx

@@ -7,6 +7,8 @@ import { inboxIcon, openEnvelopeIcon } from "@assets/index";
 import zinzenDarkLogo from "@assets/images/zinzenDarkLogo.svg";
 import zinzenLightLogo from "@assets/images/zinzenLightLogo.svg";
 import searchIcon from "@assets/images/searchIcon.svg";
+import darkModeIcon from "@assets/images/darkModeIcon.svg";
+import lightModeIcon from "@assets/images/lightModeIcon.svg";
 
 import {
   darkModeState,
@@ -76,6 +78,9 @@ const Header: React.FC<IHeader> = ({ title, debounceSearch }) => {
     handlePopState();
   }, [location]);
 
+  const currentHour = new Date().getHours();
+  const isNighttime = currentHour >= 18 || currentHour < 6;
+
   return (
     <div className="header">
       {displaySearch && debounceSearch ? (
@@ -101,6 +106,11 @@ const Header: React.FC<IHeader> = ({ title, debounceSearch }) => {
             </h6>
           </div>
           <div className="header-items">
+            {isNighttime && !darkModeStatus ? (
+              <HeaderBtn path={darkModeIcon} alt="dark mode" />
+            ) : !isNighttime && darkModeStatus ? (
+              <HeaderBtn path={lightModeIcon} alt="light mode" />
+            ) : null}
             {["myGoals", "Inbox"].includes(title) && !isInboxOpen && (
               <HeaderBtn path={searchIcon} alt="zinzen search" />
             )}

src/components/Header/HeaderBtn.tsx

@@ -1,14 +1,15 @@
 import React from "react";
-import { openInbox, displayToast } from "@src/store";
+import { openInbox, displayToast, darkModeState } from "@src/store";
 import { useLocation, useNavigate } from "react-router-dom";
-import { useRecoilValue, useSetRecoilState } from "recoil";
+import { useRecoilValue, useSetRecoilState, useRecoilState } from "recoil";
 import Settings from "./Settings";
 
 const HeaderBtn = ({ path, alt }: { path: string; alt: string }) => {
   const { state } = useLocation();
   const navigate = useNavigate();
   const isInboxOpen = useRecoilValue(openInbox);
   const setShowToast = useSetRecoilState(displayToast);
+  const [darkModeStatus, setDarkModeStatus] = useRecoilState(darkModeState);
 
   const handleClick = async () => {
     if (alt === "zinzen hints") {
@@ -28,7 +29,13 @@ const HeaderBtn = ({ path, alt }: { path: string; alt: string }) => {
         }
         navigate("/MyGoals", { state: { ...newState, goalsHistory: [], isInboxOpen: true } });
       }
-    }
+    } else if (alt === "light mode") {
+      localStorage.setItem("darkMode", darkModeStatus ? "off" : "on");
+      setDarkModeStatus(!darkModeStatus);
+    } else if (alt == "dark mode") {
+      localStorage.setItem("darkMode", darkModeStatus ? "off" : "on");
+      setDarkModeStatus(!darkModeStatus);
+    } 
   };
 
   return (