Merge pull request #72 from bathini79/feat/60-store-colorschema-in-lo…

…calstorage feat(ui): Added And Received ColorScheme from LocalStorage #60 #45
HexmosTech · Sep 1, 2023 · 544769e · 544769e
2 parents 3f72cc2 + f41aff9
commit 544769e
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 23 deletions.
diff --git a/platform/firecamp-ui/src/components/theme/FirecampThemeProvider.tsx b/platform/firecamp-ui/src/components/theme/FirecampThemeProvider.tsx
@@ -75,52 +75,64 @@ export const useFirecampStyle = createStyles((theme) => ({
 }));
 
 const FirecampThemeProvider: FC<IFirecampThemeProvider> = ({
-  themeVariant = EFirecampThemeVariant.LightPrimary,
+  themeVariant,
   children,
   ...props
 }) => {
-  const [colorScheme, setColorScheme] = useState<ColorScheme>('light');
-  const [themeColor, updatethemeColor] = useState<EFirecampThemeVariant>(
-    EFirecampThemeVariant.LightPrimary
-  );
 
-  useEffect(() => {
-    updateTheme(themeVariant);
-  }, [themeVariant]);
+  const _initialize = () => {
+    // on first time load set theme from local storage, if not found then set default
+    let themeStored = localStorage.getItem('theme') as EFirecampThemeVariant;
+    if (!Object.values(EFirecampThemeVariant).includes(themeStored)) {
+      themeStored = EFirecampThemeVariant.LightPrimary
+    }
+    return themeStored;
+  }
 
-  // update theme colorScheme & primaryColor
-  const updateTheme = (color: EFirecampThemeVariant) => {
-    // update the primary color
-    updatethemeColor(color);
+  const [colorScheme, setColorScheme] = useState<ColorScheme>('light');
+  const [theme, setTheme] = useState<EFirecampThemeVariant>(_initialize);
+
+  // update theme
+  const updateTheme = (theme: EFirecampThemeVariant) => {
 
     // update the color schema
     setColorScheme(
       [
         EFirecampThemeVariant.LightPrimary,
         EFirecampThemeVariant.LightSecondary,
-      ].includes(color)
+      ].includes(theme)
         ? 'light'
         : 'dark'
     );
 
+    // save in local storage
+    localStorage.setItem("theme", theme);
+
+    // update theme
+    setTheme(theme);
+
+    updateMonacoEditorTheme(theme)
+  };
+
+  const updateMonacoEditorTheme = (theme: EFirecampThemeVariant) => {
     // update the monaco editor theme
     const editorTheme = [
       EFirecampThemeVariant.LightPrimary,
       EFirecampThemeVariant.LightSecondary,
-    ].includes(color)
+    ].includes(theme)
       ? EEditorTheme.Lite
       : EEditorTheme.Dark;
 
     localStorage.setItem('editorTheme', editorTheme);
     EditorApi.setEditorTheme(editorTheme);
-  };
+  }
 
   return (
     //@ts-ignore
-    <ColorSchemeProvider colorScheme={themeColor}
-      toggleColorScheme={(c: ColorScheme | EFirecampThemeVariant) =>
-        updateTheme(c as EFirecampThemeVariant)
-      }
+    <ColorSchemeProvider colorScheme={theme}
+      toggleColorScheme={(c: ColorScheme | EFirecampThemeVariant) => {
+        updateTheme(c as EFirecampThemeVariant);
+      }}
     >
       <MantineProvider
         theme={{
@@ -438,7 +450,7 @@ const FirecampThemeProvider: FC<IFirecampThemeProvider> = ({
             'primary-color': [
               EFirecampThemeVariant.LightPrimary,
               EFirecampThemeVariant.DarkPrimary,
-            ].includes(themeColor)
+            ].includes(theme)
               ? primaryColor
               : secondaryColor,
             dark: defaultDarkColor,

diff --git a/platform/firecamp-ui/src/components/theme/FirecampThemeSelector.tsx b/platform/firecamp-ui/src/components/theme/FirecampThemeSelector.tsx
@@ -35,9 +35,9 @@ const FirecampThemeSelector = () => {
   const _setTheme = (t: any) => {
     try {
       // Set app body theme - for matching tailwind theme
-      document.body.className = `theme-${t.split('-')[0] || 'light'} primary-${
-        t.split('-')[1] || 'orange'
-      }`;
+      const themeMode = t.split('-')[0] || 'light';
+      const themeColor = t.split('-')[1] === 'primary' ? 'orange' : 'green';
+      document.body.className = `theme-${themeMode} primary-${themeColor}`;
     } catch (error) {
       console.log({ error });
     }
@@ -47,6 +47,7 @@ const FirecampThemeSelector = () => {
   const activeTheme = ThemeOptions.find(
     (t) => t.value === (colorScheme as EFirecampThemeVariant)
   );
+  if (!activeTheme) return <></>;
   return (
     <DropdownMenu
       onOpenChange={(v) => toggleOpen(v)}