Merge pull request #938 from rishavd3v/fix/theme-toggle-position

Fix/theme toggle position - issue#934

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}

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,26 @@ const Settings = ({ isAdmin }) => {
             />
           </Stack>
         </ConfigBox>
+        <ConfigBox>
+          <Box>
+            <Typography component="h1">Appearance</Typography>
+            <Typography sx={{ mt: theme.spacing(2), mb: theme.spacing(2) }}>
+              Switch between light and dark mode.
+            </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>