Add themeSelector component

src/components/DesktopSideBar.tsx

@@ -1,86 +1,110 @@
-import { Box, ButtonBase } from '@mui/material';
-import React from 'react'
+import { Box, ButtonBase } from "@mui/material";
+import React from "react";
 import { HomeIcon } from "../assets/Icons/HomeIcon";
 import { MessagingIcon } from "../assets/Icons/MessagingIcon";
 import { Save } from "./Save/Save";
 import { HubsIcon } from "../assets/Icons/HubsIcon";
 import { CoreSyncStatus } from "./CoreSyncStatus";
-import { IconWrapper } from './Desktop/DesktopFooter';
+import { IconWrapper } from "./Desktop/DesktopFooter";
 import AppIcon from "./../assets/svgs/AppIcon.svg";
-import { useRecoilState } from 'recoil';
-import { enabledDevModeAtom } from '../atoms/global';
-import { AppsIcon } from '../assets/Icons/AppsIcon';
+import { useRecoilState } from "recoil";
+import { enabledDevModeAtom } from "../atoms/global";
+import { AppsIcon } from "../assets/Icons/AppsIcon";
+import ThemeSelector from "./Theme/ThemeSelector";
 
-export const DesktopSideBar = ({goToHome, setDesktopSideView, toggleSideViewDirects, hasUnreadDirects, isDirects, toggleSideViewGroups,hasUnreadGroups, isGroups, isApps, setDesktopViewMode, desktopViewMode, myName }) => {
-    const [isEnabledDevMode, setIsEnabledDevMode] =  useRecoilState(enabledDevModeAtom)
+export const DesktopSideBar = ({
+  goToHome,
+  setDesktopSideView,
+  toggleSideViewDirects,
+  hasUnreadDirects,
+  isDirects,
+  toggleSideViewGroups,
+  hasUnreadGroups,
+  isGroups,
+  isApps,
+  setDesktopViewMode,
+  desktopViewMode,
+  myName,
+}) => {
+  const [isEnabledDevMode, setIsEnabledDevMode] =
+    useRecoilState(enabledDevModeAtom);
 
   return (
-    <Box sx={{
-        width: '60px',
-        flexDirection: 'column',
-        height: '100vh',
-        alignItems: 'center',
-        display: 'flex',
-        gap: '25px'
-       }}>
-        <ButtonBase
-          sx={{
-            width: '60px',
-            height: '60px',
-            paddingTop: '23px'
-          }}
-          onClick={() => {
-            goToHome();
-
-          }}
-        >
-            
-            <HomeIcon
-              height={34}
-              color={desktopViewMode === 'home' ? 'white': "rgba(250, 250, 250, 0.5)"}
-
-            />
-        
-        </ButtonBase>
-        <ButtonBase
-          onClick={() => {
-            setDesktopViewMode('apps')
-            // setIsOpenSideViewDirects(false)
-            // setIsOpenSideViewGroups(false)
-          }}
-        >
-          <IconWrapper
-            color={isApps ? 'white' : "rgba(250, 250, 250, 0.5)"}
-            label="Apps"
-            selected={isApps}
-            disableWidth
-          >
-            <AppsIcon color={isApps ? 'white' : "rgba(250, 250, 250, 0.5)"} height={30} />
-          </IconWrapper>
-        </ButtonBase>
-        <ButtonBase
-          onClick={() => {
-            setDesktopViewMode('chat')
-          }}
-        >
+    <Box
+      sx={{
+        width: "60px",
+        flexDirection: "column",
+        height: "100vh",
+        alignItems: "center",
+        display: "flex",
+        gap: "25px",
+      }}
+    >
+      <ButtonBase
+        sx={{
+          width: "60px",
+          height: "60px",
+          paddingTop: "23px",
+        }}
+        onClick={() => {
+          goToHome();
+        }}
+      >
+        <HomeIcon
+          height={34}
+          color={
+            desktopViewMode === "home" ? "white" : "rgba(250, 250, 250, 0.5)"
+          }
+        />
+      </ButtonBase>
+      <ButtonBase
+        onClick={() => {
+          setDesktopViewMode("apps");
+          // setIsOpenSideViewDirects(false)
+          // setIsOpenSideViewGroups(false)
+        }}
+      >
         <IconWrapper
-            color={(hasUnreadDirects || hasUnreadGroups) ? "var(--unread)" : desktopViewMode === 'chat' ? 'white' :"rgba(250, 250, 250, 0.5)"}
-            label="Chat"
-            disableWidth
-          >
-            <MessagingIcon
-              height={30}
-              color={
-                (hasUnreadDirects || hasUnreadGroups)
-                  ? "var(--unread)"
-                  : desktopViewMode === 'chat'
-                  ? "white"
-                  : "rgba(250, 250, 250, 0.5)"
-              }
-            />
-    </IconWrapper>
-        </ButtonBase>
-        {/* <ButtonBase
+          color={isApps ? "white" : "rgba(250, 250, 250, 0.5)"}
+          label="Apps"
+          selected={isApps}
+          disableWidth
+        >
+          <AppsIcon
+            color={isApps ? "white" : "rgba(250, 250, 250, 0.5)"}
+            height={30}
+          />
+        </IconWrapper>
+      </ButtonBase>
+      <ButtonBase
+        onClick={() => {
+          setDesktopViewMode("chat");
+        }}
+      >
+        <IconWrapper
+          color={
+            hasUnreadDirects || hasUnreadGroups
+              ? "var(--unread)"
+              : desktopViewMode === "chat"
+              ? "white"
+              : "rgba(250, 250, 250, 0.5)"
+          }
+          label="Chat"
+          disableWidth
+        >
+          <MessagingIcon
+            height={30}
+            color={
+              hasUnreadDirects || hasUnreadGroups
+                ? "var(--unread)"
+                : desktopViewMode === "chat"
+                ? "white"
+                : "rgba(250, 250, 250, 0.5)"
+            }
+          />
+        </IconWrapper>
+      </ButtonBase>
+      {/* <ButtonBase
           onClick={() => {
             setDesktopSideView("groups");
             toggleSideViewGroups()
@@ -98,23 +122,32 @@ export const DesktopSideBar = ({goToHome, setDesktopSideView, toggleSideViewDire
             />
      
         </ButtonBase> */}
-        <Save isDesktop disableWidth myName={myName} />
-        {/* <CoreSyncStatus imageSize="30px" position="left" /> */}
-        {isEnabledDevMode && (
-          <ButtonBase
+      <Save isDesktop disableWidth myName={myName} />
+      {/* <CoreSyncStatus imageSize="30px" position="left" /> */}
+      {isEnabledDevMode && (
+        <ButtonBase
           onClick={() => {
-            setDesktopViewMode('dev')
+            setDesktopViewMode("dev");
           }}
         >
           <IconWrapper
-            color={desktopViewMode === 'dev' ? 'white' : "rgba(250, 250, 250, 0.5)"}
+            color={
+              desktopViewMode === "dev" ? "white" : "rgba(250, 250, 250, 0.5)"
+            }
             label="Dev"
             disableWidth
           >
-           <AppsIcon color={desktopViewMode === 'dev' ? 'white' : "rgba(250, 250, 250, 0.5)"} height={30} />
+            <AppsIcon
+              color={
+                desktopViewMode === "dev" ? "white" : "rgba(250, 250, 250, 0.5)"
+              }
+              height={30}
+            />
           </IconWrapper>
         </ButtonBase>
-        )}
-       </Box>
-  )
-}
+      )}
+
+      <ThemeSelector style={{ position: "fixed", bottom: "1%" }} />
+    </Box>
+  );
+};

src/components/Theme/ThemeContext.tsx

@@ -0,0 +1,23 @@
+import { createContext, useContext, useState, useMemo } from 'react';
+import { ThemeProvider as MuiThemeProvider } from '@mui/material/styles';
+import { darkTheme, lightTheme } from '../../styles/theme';
+
+const ThemeContext = createContext({ themeMode: 'light', toggleTheme: () => {} });
+
+export const ThemeProvider = ({ children }: { children: React.ReactNode }) => {
+  const [themeMode, setThemeMode] = useState('light');
+
+  const theme = useMemo(() => (themeMode === 'light' ? lightTheme : darkTheme), [themeMode]);
+
+  const toggleTheme = () => {
+    setThemeMode((prevMode) => (prevMode === 'light' ? 'dark' : 'light'));
+  };
+
+  return (
+    <ThemeContext.Provider value={{ themeMode, toggleTheme }}>
+      <MuiThemeProvider theme={theme}>{children}</MuiThemeProvider>
+    </ThemeContext.Provider>
+  );
+};
+
+export const useThemeContext = () => useContext(ThemeContext);

src/components/Theme/ThemeSelector.tsx

@@ -0,0 +1,18 @@
+import { useThemeContext } from "./ThemeContext";
+import { Switch } from "@mui/material";
+import { Brightness4, Brightness7 } from "@mui/icons-material";
+
+const ThemeSelector = ({ style }) => {
+  const { themeMode, toggleTheme } = useThemeContext();
+
+  return (
+    <div
+      style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: "1px", ...style }}
+    >
+      {themeMode === "dark" ? <Brightness7 /> : <Brightness4 />}
+      <Switch checked={themeMode === "dark"} onChange={toggleTheme} />
+    </div>
+  );
+};
+
+export default ThemeSelector;