From 27eba96f2044faefd6c907da073b660d1e4edfd4 Mon Sep 17 00:00:00 2001
From: QiShaoXuan <qishaoxuan777@gmail.com>
Date: Fri, 21 Oct 2022 14:28:43 +0800
Subject: [PATCH] feat: change theme logic

---
 packages/app/src/styles/themeProvider.tsx | 60 ++++++++++++++---------
 1 file changed, 38 insertions(+), 22 deletions(-)

diff --git a/packages/app/src/styles/themeProvider.tsx b/packages/app/src/styles/themeProvider.tsx
index 307d71eba8..097e0d5c72 100644
--- a/packages/app/src/styles/themeProvider.tsx
+++ b/packages/app/src/styles/themeProvider.tsx
@@ -34,33 +34,49 @@ export const ThemeProvider = ({
     localStorageThemeHelper.set(themeMode);
   };
 
+  // ===================== A temporary solution, just use system theme and not remember the user selected ====================
   useEffect(() => {
-    setMode(localStorageThemeHelper.get() || 'auto');
+    const systemThemeHelper = new SystemThemeHelper();
+    const systemTheme = systemThemeHelper.get();
+    setMode(systemTheme);
+
+    systemThemeHelper.onChange(() => {
+      setMode(systemThemeHelper.get());
+    });
   }, []);
 
   useEffect(() => {
-    const systemThemeHelper = new SystemThemeHelper();
-    const selectedThemeMode = localStorageThemeHelper.get();
+    setTheme(mode === 'auto' ? theme : mode);
+  }, [mode, setTheme, theme]);
+  // =====================  ====================
 
-    const themeMode = selectedThemeMode || mode;
-    if (themeMode === 'auto') {
-      setTheme(systemThemeHelper.get());
-    } else {
-      setTheme(themeMode);
-    }
-
-    // When system theme changed, change the theme mode
-    systemThemeHelper.onChange(() => {
-      // TODO: There may be should be provided a way to let user choose whether to
-      if (mode === 'auto') {
-        setTheme(systemThemeHelper.get());
-      }
-    });
-
-    return () => {
-      systemThemeHelper.dispose();
-    };
-  }, [mode]);
+  // useEffect(() => {
+  //   setMode(localStorageThemeHelper.get() || 'auto');
+  // }, []);
+  //
+  // useEffect(() => {
+  //   const systemThemeHelper = new SystemThemeHelper();
+  //   const selectedThemeMode = localStorageThemeHelper.get();
+  //
+  //   const themeMode = selectedThemeMode || mode;
+  //   if (themeMode === 'auto') {
+  //     setTheme(systemThemeHelper.get());
+  //   } else {
+  //     setTheme(themeMode);
+  //   }
+  //
+  //   // When system theme changed, change the theme mode
+  //   systemThemeHelper.onChange(() => {
+  //     // TODO: There may be should be provided a way to let user choose whether to
+  //     if (mode === 'auto') {
+  //       setTheme(systemThemeHelper.get());
+  //     }
+  //   });
+  //
+  //   return () => {
+  //     systemThemeHelper.dispose();
+  //   };
+  // }, [mode]);
 
   return (
     <ThemeContext.Provider value={{ mode, changeMode, theme: themeStyle }}>