Optimize Theme-handling

YeonV · Nov 12, 2024 · 7cdbe55 · 7cdbe55
1 parent 4fe30cb
commit 7cdbe55
Show file tree

Hide file tree

Showing 8 changed files with 46 additions and 31 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -34,27 +34,18 @@ export default function App() {
   // const darkMode = useStore((state) => state.ui.darkMode)
   const setCoreParams = useStore((state) => state.setCoreParams)
   const setCoreStatus = useStore((state) => state.setCoreStatus)
+  const changeTheme = useStore((state) => state.ui.changeTheme)
+  const reloadTheme = useStore((state) => state.ui.reloadTheme)
 
   const theme = useMemo(
-    () =>
-      createTheme({
-        ...ledfxThemes[ledfxTheme],
+    () => createTheme({
+        ...ledfxThemes[window.localStorage.getItem('ledfx-theme') ?? ledfxTheme],
         ...common,
         palette: {
-          ...ledfxThemes[ledfxTheme].palette
-          // mode: darkMode ? 'dark' : 'light',
-          // background: darkMode
-          //   ? {
-          //       default: '#030303',
-          //       paper: '#151515',
-          //     }
-          //   : {
-          //       default: '#bbb',
-          //       paper: '#fefefe',
-          //     },
+          ...ledfxThemes[window.localStorage.getItem('ledfx-theme') ?? ledfxTheme].palette
         }
       }),
-    []
+    [changeTheme]
   )
 
   useEffect(() => {
@@ -154,15 +145,15 @@ export default function App() {
         if (proto[2] === 'theme') {
           if (proto[3] === 'light') {
             window.localStorage.setItem('ledfx-theme', 'LightBlack')
-            window.location.reload()
+            reloadTheme()
           }
           if (proto[3] === 'dark') {
             window.localStorage.setItem('ledfx-theme', 'DarkWhite')
-            window.location.reload()
+            reloadTheme()
           }
           if (proto[3] === 'reset') {
             window.localStorage.setItem('ledfx-theme', 'DarkOrange')
-            window.location.reload()
+            reloadTheme()
           }
         }
       } else if (proto[1] === 'song') {

diff --git a/src/components/Bars/BarTop.tsx b/src/components/Bars/BarTop.tsx
@@ -215,6 +215,7 @@ const TopBar = () => {
   const { pathname } = useLocation()
   const history = useNavigate()
   const clearSnackbar = useStore((state) => state.ui.clearSnackbar)
+  const reloadTheme = useStore((state) => state.ui.reloadTheme)
   const features = useStore((state) => state.features)
   const platform = useStore((state) => state.platform)
   const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null)
@@ -626,7 +627,7 @@ const TopBar = () => {
                       value={currentTheme} onChange={(e) => {
                         setCurrentTheme(e.target.value)
                         window.localStorage.setItem('ledfx-theme', e.target.value)
-                        window.location.reload()
+                        reloadTheme()
                       }}
                     >
                       {Object.keys(ledfxThemes).map((t) => (

diff --git a/src/components/Dialogs/FrontendPixelsTooSmall.tsx b/src/components/Dialogs/FrontendPixelsTooSmall.tsx
@@ -39,11 +39,6 @@ export default function FrontendPixelsTooSmall() {
   )
   const setSystemSetting = (setting: string, value: any) => {
     setSystemConfig({ [setting]: value }).then(() => getSystemConfig())
-    // .then(() => {
-    //   setTimeout(() => {
-    //     window.location.reload()
-    //   }, 3000)
-    // })
   }
   const handleClose = () => setDialogOpenLessPixels(false)
 

diff --git a/src/components/Dialogs/IntroDialog.tsx b/src/components/Dialogs/IntroDialog.tsx
@@ -46,6 +46,7 @@ export default function IntroDialog({
   const setIntro = useStore((state) => state.setIntro)
   const setTour = useStore((state) => state.setTour)
   const setTourOpen = useStore((state) => state.setTourOpen)
+  const reloadTheme = useStore((state) => state.ui.reloadTheme)
   const small = useMediaQuery('(max-width: 720px)')
   const xsmall = useMediaQuery('(max-width: 600px)')
 
@@ -64,6 +65,8 @@ export default function IntroDialog({
 
   const graphsMulti = useStore((state) => state.graphsMulti)
   const assistant = useStore((state) => state.assistant)
+  const coreParams = useStore((state) => state.coreParams)
+  const isCC = coreParams && Object.keys(coreParams).length > 0
   const setAssistant = useStore((state) => state.setAssistant)
   const toggleGraphsMulti = useStore((state) => state.toggleGraphsMulti)
   const getSystemConfig = useStore((state) => state.getSystemConfig)
@@ -158,6 +161,22 @@ export default function IntroDialog({
         },
         action_right: handleNext
       },
+      isCC ?? ({
+        key: 'theme',
+        title: 'Choose your Theme',
+        label_left: 'Lightmode',
+        label_right: 'Darkmode',
+        action_left: () => {
+          window.localStorage.setItem('ledfx-theme', 'LightBlack')
+          reloadTheme()
+          handleNext()
+        },
+        action_right: () => {
+          window.localStorage.setItem('ledfx-theme', 'DarkWhite')
+          reloadTheme()
+          handleNext()
+        } 
+      }),
       {
         key: 'gotWled',
         title: 'Scan for devices?',

diff --git a/src/components/Dialogs/SmartBar.tsx b/src/components/Dialogs/SmartBar.tsx
@@ -20,6 +20,7 @@ const Bar = ({ handleClose, direct, maxWidth = 500, inputRef }: any) => {
   const setShowFeatures = useStore((state) => state.setShowFeatures)
   const features = useStore((state) => state.features)
   const setViewMode = useStore((state) => state.setViewMode)
+  const reloadTheme = useStore((state) => state.ui.reloadTheme)
   const filterOptions = createFilterOptions({
     stringify: (option: any) =>
       Object.keys(option).indexOf('is_device') > -1
@@ -148,7 +149,7 @@ const Bar = ({ handleClose, direct, maxWidth = 500, inputRef }: any) => {
                 'ledfx-theme',
                 value.replace('theme:', '')
               )
-              window.location.reload()
+              reloadTheme()
             }
           }
           if (value === 'BladeIsYeon') {

diff --git a/src/pages/User/AvatarPicker/AvatarPicker.tsx b/src/pages/User/AvatarPicker/AvatarPicker.tsx
@@ -222,7 +222,6 @@ const AvatarPicker = ({
       console.error(e)
     }
     setOpen(false)
-    // window.location.reload()
   }
 
   const onFileChange = async (e: any) => {

diff --git a/src/pages/User/User.tsx b/src/pages/User/User.tsx
@@ -70,7 +70,7 @@ const User = () => {
   const setSystemConfig = useStore((state) => state.setSystemConfig)
   const scenePL = useStore((state) => state.scenePL)
   const setScenePL = useStore((state) => state.setScenePL)
-
+  const reloadTheme = useStore((state) => state.ui.reloadTheme)
   const userName = localStorage.getItem('username')
 
   const filteredCloudEffects = {} as any
@@ -1049,16 +1049,16 @@ const User = () => {
                   onChange={(e) => {
                     if (e.target.value === 'DarkBlue') {
                       window.localStorage.setItem('ledfx-theme', 'DarkBlue')
-                      window.location.reload()
+                      reloadTheme()
                     } else if (e.target.value === 'DarkOrange') {
                       window.localStorage.setItem('ledfx-theme', 'DarkOrange')
-                      window.location.reload()
+                      reloadTheme()
                     } else if (e.target.value === 'DarkGreen') {
                       window.localStorage.setItem('ledfx-theme', 'DarkGreen')
-                      window.location.reload()
+                      reloadTheme()
                     } else if (e.target.value === 'DarkRed') {
                       window.localStorage.setItem('ledfx-theme', 'DarkRed')
-                      window.location.reload()
+                      reloadTheme()
                     }
                   }}
                 >

diff --git a/src/store/ui/storeUI.tsx b/src/store/ui/storeUI.tsx
@@ -112,6 +112,15 @@ const storeUI = (set: any) => ({
       false,
       'ui/keybinding'
     ),
+  changeTheme: false,
+  reloadTheme: (): void =>
+    set(
+      produce((state: IStore) => {
+        state.ui.changeTheme = !state.ui.changeTheme
+      }),
+      false,
+      'ui/changeTheme'
+    ),
   latestTag: pkg.version as string,
   setLatestTag: (tag: string): void =>
     set(