update ThemeSwitcher

src/components/Sidebar/ThemeSwitcher.tsx

@@ -1,9 +1,30 @@
-import React, { useState } from 'react';
+import { ToggleButton, ToggleButtonGroup } from '@mui/material';
+import React from 'react';
+import DarkModeIcon from '@mui/icons-material/DarkMode';
+import LightModeIcon from '@mui/icons-material/LightMode';
 import { THEMES } from 'types/theme';
-import ThemeToggler from './ThemeToggler';
-
-export default function ThemeSwitcher() {
-    const [theme, setTheme] = useState<THEMES>(THEMES.DARK);
-
-    return <ThemeToggler theme={theme} setTheme={setTheme} />;
+interface Iprops {
+    theme: THEMES;
+    setTheme: (theme: THEMES) => void;
+}
+export default function ThemeSwitcher({ theme, setTheme }: Iprops) {
+    const handleChange = (event, theme: THEMES) => {
+        setTheme(theme);
+    };
+
+    return (
+        <ToggleButtonGroup
+            color="primary"
+            size="small"
+            value={theme}
+            exclusive
+            onChange={handleChange}>
+            <ToggleButton value={THEMES.LIGHT}>
+                <LightModeIcon />
+            </ToggleButton>
+            <ToggleButton value={THEMES.DARK}>
+                <DarkModeIcon />
+            </ToggleButton>
+        </ToggleButtonGroup>
+    );
 }

src/components/Sidebar/ThemeToggler.tsx

@@ -1,30 +0,0 @@
-import { ToggleButton, ToggleButtonGroup } from '@mui/material';
-import React from 'react';
-import DarkModeIcon from '@mui/icons-material/DarkMode';
-import LightModeIcon from '@mui/icons-material/LightMode';
-import { THEMES } from 'types/theme';
-interface Iprops {
-    theme: THEMES;
-    setTheme: (theme: THEMES) => void;
-}
-export default function ThemeToggler({ theme, setTheme }: Iprops) {
-    const handleChange = (event, theme: THEMES) => {
-        setTheme(theme);
-    };
-
-    return (
-        <ToggleButtonGroup
-            color="primary"
-            size="small"
-            value={theme}
-            exclusive
-            onChange={handleChange}>
-            <ToggleButton value={THEMES.LIGHT}>
-                <LightModeIcon />
-            </ToggleButton>
-            <ToggleButton value={THEMES.DARK}>
-                <DarkModeIcon />
-            </ToggleButton>
-        </ToggleButtonGroup>
-    );
-}

src/utils/storage/localStorage.ts

@@ -18,6 +18,7 @@ export enum LS_KEYS {
     LOGS = 'logs',
     USER_DETAILS = 'userDetails',
     COLLECTION_SORT_BY = 'collectionSortBy',
+    THEME = 'theme',
 }
 
 export const setData = (key: LS_KEYS, value: object) => {