From 7aa36677952f2436f6551f9ed2982f1be5a556ef Mon Sep 17 00:00:00 2001
From: Rishav <rishavraj4273@gmail.com>
Date: Fri, 11 Oct 2024 22:57:57 +0530
Subject: [PATCH] modified theme toggle

---
 Client/src/Components/Sidebar/index.jsx |  4 ++--
 Client/src/Pages/Settings/index.jsx     | 24 +++++++++++++++++++++++-
 2 files changed, 25 insertions(+), 3 deletions(-)

diff --git a/Client/src/Components/Sidebar/index.jsx b/Client/src/Components/Sidebar/index.jsx
index 200c5dd01..80a47b68c 100644
--- a/Client/src/Components/Sidebar/index.jsx
+++ b/Client/src/Components/Sidebar/index.jsx
@@ -632,7 +632,7 @@ function Sidebar() {
             </MenuItem>
           )}
           {collapsed && <Divider />}
-          <MenuItem
+          {/* <MenuItem
             onClick={() => {
               dispatch(setMode("light"));
               closePopup();
@@ -647,7 +647,7 @@ function Sidebar() {
             }}
           >
             Dark
-          </MenuItem>
+          </MenuItem> */}
           <Divider />
           <MenuItem
             onClick={logout}
diff --git a/Client/src/Pages/Settings/index.jsx b/Client/src/Pages/Settings/index.jsx
index 9aba1c792..1021128cf 100644
--- a/Client/src/Pages/Settings/index.jsx
+++ b/Client/src/Pages/Settings/index.jsx
@@ -15,7 +15,7 @@ import {
 import { update } from "../../Features/Auth/authSlice";
 import PropTypes from "prop-types";
 import LoadingButton from "@mui/lab/LoadingButton";
-import { setTimezone } from "../../Features/UI/uiSlice";
+import { setTimezone, setMode } from "../../Features/UI/uiSlice";
 import timezones from "../../Utils/timezones.json";
 import { useState } from "react";
 import { ConfigBox } from "./styled";
@@ -32,6 +32,7 @@ const Settings = ({ isAdmin }) => {
   const { isLoading } = useSelector((state) => state.uptimeMonitors);
   const { isLoading: authIsLoading } = useSelector((state) => state.auth);
   const { timezone } = useSelector((state) => state.ui);
+  const {mode} = useSelector((state) => state.ui);
   const [checksIsLoading, setChecksIsLoading] = useState(false);
   const [form, setForm] = useState({
     ttl: checkTTL ? (checkTTL / SECONDS_PER_DAY).toString() : 0,
@@ -182,6 +183,27 @@ const Settings = ({ isAdmin }) => {
             />
           </Stack>
         </ConfigBox>
+        <ConfigBox>
+          <Box>
+            <Typography component="h1">Appearance</Typography>
+            <Typography sx={{ mt: theme.spacing(2), mb: theme.spacing(2) }}>
+              <Typography component="span">Theme</Typography>- The
+              timezone of the dashboard you publicly display.
+            </Typography>
+          </Box>
+          <Stack gap={theme.spacing(20)}>
+            <Select
+              id="theme-mode"
+              label="Theme Mode"
+              value={mode}
+              onChange={(e) => {
+                dispatch(setMode(e.target.value));
+              }}
+              items={[{_id:'light', name:'Light'},{_id:'dark', name:'Dark'}]}
+            >
+            </Select>
+          </Stack>
+        </ConfigBox>
         {isAdmin && (
           <ConfigBox>
             <Box>