Some theme love

YeonV · Jan 4, 2025 · 42d9d34 · 42d9d34
1 parent 3e0477a
commit 42d9d34
Show file tree

Hide file tree

Showing 6 changed files with 241 additions and 22 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -48,7 +48,7 @@ export default function App() {
         palette: {
           ...ledfxThemes[
             window.localStorage.getItem('ledfx-theme') ?? ledfxTheme
-          ].palette
+          ]?.palette
         }
       }),
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -150,11 +150,11 @@ export default function App() {
       } else if (proto[1] === 'command') {
         if (proto[2] === 'theme') {
           if (proto[3] === 'light') {
-            window.localStorage.setItem('ledfx-theme', 'LightBlack')
+            window.localStorage.setItem('ledfx-theme', 'LightBw')
             reloadTheme()
           }
           if (proto[3] === 'dark') {
-            window.localStorage.setItem('ledfx-theme', 'DarkWhite')
+            window.localStorage.setItem('ledfx-theme', 'DarkBw')
             reloadTheme()
           }
           if (proto[3] === 'reset') {

diff --git a/src/components/Bars/BarTop.tsx b/src/components/Bars/BarTop.tsx
@@ -48,7 +48,7 @@ import pkg from '../../../package.json'
 import { Ledfx } from '../../api/ledfx'
 import TourHome from '../Tours/TourHome'
 import { backendUrl } from '../../pages/Device/Cloud/CloudComponents'
-import { ledfxThemes } from '../../themes/AppThemes'
+import { ledfxThemes, themes } from '../../themes/AppThemes'
 import useWakeLock from '../../utils/useWakeLook'
 import OrderListDialog from '../DnD/OrderListDialog'
 
@@ -154,9 +154,7 @@ const Title = (
         frConfig.updateUrl &&
         frConfig.releaseUrl ? (
           <Button
-            color={
-              t && ['DarkWhite', 'LightBlack'].includes(t) ? 'primary' : 'error'
-            }
+            color={t && ['DarkBw', 'LightBw'].includes(t) ? 'primary' : 'error'}
             variant="contained"
             onClick={() => window.open(frConfig.releaseUrl)}
             sx={{ ml: 2 }}
@@ -660,14 +658,105 @@ const TopBar = () => {
                                 t.startsWith('Dark') ? 'DarkMode' : 'LightMode'
                               }
                             />
-                            {t}
                           </ListItemIcon>
                           <ListItemText>{t}</ListItemText>
                         </Stack>
                       </MenuItem>
                     ))}
                   </Select>
                 )}
+                {localStorage.getItem('username') === 'YeonV' && (
+                  <MenuItem
+                    onClick={() => {
+                      const t =
+                        window.localStorage.getItem('ledfx-theme') || 'DarkBlue'
+                      const mode = t.startsWith('Dark') ? 'dark' : 'light'
+                      const color =
+                        ((mode === 'dark'
+                          ? t.split('Dark')[1]
+                          : t.split('Light')[1]
+                        )?.toLowerCase() as keyof typeof themes) || 'blue'
+                      const newTheme =
+                        (mode === 'dark' ? 'Light' : 'Dark') +
+                        color.charAt(0).toUpperCase() +
+                        color.slice(1)
+                      setCurrentTheme(newTheme)
+                      window.localStorage.setItem('ledfx-theme', newTheme)
+                      reloadTheme()
+                    }}
+                  >
+                    <Stack direction={'row'}>
+                      <ListItemIcon sx={{ alignItems: 'center', minWidth: 38 }}>
+                        <BladeIcon
+                          name={
+                            theme.palette.mode === 'dark'
+                              ? 'DarkMode'
+                              : 'LightMode'
+                          }
+                        />
+                      </ListItemIcon>
+                      <ListItemText>DarkMode</ListItemText>
+                    </Stack>
+                  </MenuItem>
+                )}
+                {localStorage.getItem('username') === 'YeonV' && (
+                  <Select
+                    IconComponent={() => null}
+                    fullWidth
+                    sx={{ pl: 2 }}
+                    disableUnderline
+                    value={
+                      ((((
+                        window.localStorage.getItem('ledfx-theme') || 'DarkBlue'
+                      ).startsWith('Dark')
+                        ? 'dark'
+                        : 'light') === 'dark'
+                        ? (
+                            window.localStorage.getItem('ledfx-theme') ||
+                            'DarkBlue'
+                          ).split('Dark')[1]
+                        : (
+                            window.localStorage.getItem('ledfx-theme') ||
+                            'DarkBlue'
+                          ).split('Light')[1]
+                      )?.toLowerCase() as keyof typeof themes) || 'blue'
+                    }
+                    onChange={(e) => {
+                      const t =
+                        window.localStorage.getItem('ledfx-theme') || 'DarkBlue'
+                      const mode = t.startsWith('Dark') ? 'dark' : 'light'
+                      const newTheme =
+                        (mode === 'dark' ? 'Dark' : 'Lark') +
+                        e.target.value.charAt(0).toUpperCase() +
+                        e.target.value.slice(1)
+                      setCurrentTheme(newTheme)
+                      window.localStorage.setItem('ledfx-theme', newTheme)
+                      reloadTheme()
+                    }}
+                  >
+                    {Object.keys(themes).map((t) => (
+                      <MenuItem key={t} value={t}>
+                        <Stack direction={'row'}>
+                          <ListItemIcon
+                            sx={{
+                              alignItems: 'center',
+                              minWidth: 38,
+                              color:
+                                themes[t as keyof typeof themes][
+                                  theme.palette.mode
+                                ].palette.primary.main
+                            }}
+                          >
+                            <BladeIcon name={'circle'} />
+                          </ListItemIcon>
+                          <ListItemText>
+                            {t.charAt(0).toUpperCase() + t.slice(1)}
+                          </ListItemText>
+                        </Stack>
+                      </MenuItem>
+                    ))}
+                  </Select>
+                )}
               </Menu>
             )}
           </Toolbar>

diff --git a/src/components/Dialogs/IntroDialog.tsx b/src/components/Dialogs/IntroDialog.tsx
@@ -167,12 +167,12 @@ export default function IntroDialog({
         label_left: 'Lightmode',
         label_right: 'Darkmode',
         action_left: () => {
-          window.localStorage.setItem('ledfx-theme', 'LightBlack')
+          window.localStorage.setItem('ledfx-theme', 'LightBw')
           reloadTheme()
           handleNext()
         },
         action_right: () => {
-          window.localStorage.setItem('ledfx-theme', 'DarkWhite')
+          window.localStorage.setItem('ledfx-theme', 'DarkBw')
           reloadTheme()
           handleNext()
         }

diff --git a/src/components/Dialogs/SmartBar.tsx b/src/components/Dialogs/SmartBar.tsx
@@ -141,8 +141,8 @@ const Bar = ({ handleClose, direct, maxWidth = 500, inputRef }: any) => {
                 'DarkBlue',
                 'DarkGrey',
                 'DarkPink',
-                'DarkWhite',
-                'LightBlack'
+                'DarkBw',
+                'LightBw'
               ].indexOf(value.replace('theme:', '')) > -1
             ) {
               window.localStorage.setItem(

diff --git a/src/pages/Scenes/ScenesRecent.tsx b/src/pages/Scenes/ScenesRecent.tsx
@@ -52,6 +52,7 @@ export default function ScenesRecent({ scenes, activateScene, title }: any) {
       current[key] = { ...scenes[key], used: i + 1 }
       return setTheScenes(current)
     })
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [scenes, recentScenes])
 
   return (

diff --git a/src/themes/AppThemes.tsx b/src/themes/AppThemes.tsx
@@ -95,7 +95,64 @@ export const BladeDarkGreenTheme = {
     }
   }
 }
-export const BladeDarkWhiteTheme = {
+
+export const BladeLightGreenTheme = createTheme({
+  palette: {
+    mode: 'light',
+    primary: {
+      main: '#1db954'
+    },
+    secondary: {
+      main: '#14833b'
+    },
+    accent: {
+      main: '#20173c'
+    },
+    background: {
+      default: '#fdfdfd',
+      paper: '#eee'
+    }
+  }
+})
+
+export const BladeLightLegacyTheme = createTheme({
+  palette: {
+    mode: 'light',
+    primary: {
+      main: '#009688'
+    },
+    secondary: {
+      main: '#009688'
+    },
+    accent: {
+      main: '#20173c'
+    },
+    background: {
+      default: '#fdfdfd',
+      paper: '#eee'
+    }
+  }
+})
+
+export const BladeDarkLegacyTheme = {
+  palette: {
+    mode: 'dark' as PaletteMode | undefined,
+    primary: {
+      main: '#009688'
+    },
+    secondary: {
+      main: '#009688'
+    },
+    accent: {
+      main: '#20173c'
+    },
+    background: {
+      default: '#000',
+      paper: '#090909'
+    }
+  }
+}
+export const BladeDarkBwTheme = {
   palette: {
     mode: 'dark' as PaletteMode | undefined,
     primary: {
@@ -113,7 +170,7 @@ export const BladeDarkWhiteTheme = {
     }
   }
 }
-export const BladeLightBlackTheme = {
+export const BladeLightBwTheme = {
   palette: {
     mode: 'light' as PaletteMode | undefined,
     primary: {
@@ -160,7 +217,7 @@ export const BladeDarkTheme = createTheme({
       main: '#b00000'
     },
     secondary: {
-      main: '#00000'
+      main: '#400000'
     },
     accent: {
       main: '#20173c'
@@ -214,7 +271,7 @@ export const BladeDarkPinkTheme = createTheme({
   palette: {
     mode: 'dark',
     primary: {
-      main: '#bf026b'
+      main: '#ff80ab'
     },
     secondary: {
       main: '#bf026b'
@@ -229,6 +286,25 @@ export const BladeDarkPinkTheme = createTheme({
   }
 })
 
+export const BladeLightPinkTheme = createTheme({
+  palette: {
+    mode: 'light',
+    primary: {
+      main: '#e91e63'
+    },
+    secondary: {
+      main: '#c2185b'
+    },
+    accent: {
+      main: '#ff80ab'
+    },
+    background: {
+      default: '#fdfdfd',
+      paper: '#eee'
+    }
+  }
+})
+
 export const BladeLightRedTheme = createTheme({
   palette: {
     mode: 'light',
@@ -247,6 +323,24 @@ export const BladeLightRedTheme = createTheme({
     }
   }
 })
+export const BladeLightOrangeTheme = createTheme({
+  palette: {
+    mode: 'light',
+    primary: {
+      main: '#d48806'
+    },
+    secondary: {
+      main: '#edad2d'
+    },
+    accent: {
+      main: '#4281'
+    },
+    background: {
+      default: '#fdfdfd',
+      paper: '#eee'
+    }
+  }
+})
 export const BladeLightBlueTheme = createTheme({
   palette: {
     mode: 'light',
@@ -267,19 +361,54 @@ export const BladeLightBlueTheme = createTheme({
 })
 
 export const ledfxThemes = {
-  Dark: BladeDarkTheme,
   DarkRed: BladeDarkTheme,
   DarkOrange: BladeDarkOrangeTheme,
-  LightRed: BladeLightRedTheme,
-  LightBlue: BladeLightBlueTheme,
   DarkGreen: BladeDarkGreenTheme,
   DarkBlue: BladeDarkBlueTheme,
   DarkGrey: BladeDarkGreyTheme,
   DarkPink: BladeDarkPinkTheme,
-  DarkWhite: BladeDarkWhiteTheme,
-  LightBlack: BladeLightBlackTheme
+  DarkBw: BladeDarkBwTheme,
+  LightRed: BladeLightRedTheme,
+  LightOrange: BladeLightOrangeTheme,
+  LightBlue: BladeLightBlueTheme,
+  LightPink: BladeLightPinkTheme,
+  LightGreen: BladeLightGreenTheme,
+  LightLegacy: BladeLightLegacyTheme,
+  DarkLegacy: BladeDarkLegacyTheme,
+  LightBw: BladeLightBwTheme
 } as any
 
+export const themes = {
+  blue: {
+    dark: BladeDarkBlueTheme,
+    light: BladeLightBlueTheme
+  },
+  red: {
+    dark: BladeDarkTheme,
+    light: BladeLightRedTheme
+  },
+  orange: {
+    dark: BladeDarkOrangeTheme,
+    light: BladeLightOrangeTheme
+  },
+  pink: {
+    dark: BladeDarkPinkTheme,
+    light: BladeLightPinkTheme
+  },
+  green: {
+    dark: BladeDarkGreenTheme,
+    light: BladeLightGreenTheme
+  },
+  legacy: {
+    dark: BladeDarkLegacyTheme,
+    light: BladeLightLegacyTheme
+  },
+  bw: {
+    dark: BladeDarkBwTheme,
+    light: BladeLightBwTheme
+  }
+}
+
 export const ledfxTheme =
   (window.localStorage.getItem('ledfx-theme')
     ? window.localStorage.getItem('ledfx-theme')
@@ -288,5 +417,5 @@ export const ledfxTheme =
       : window.location.origin === 'https://my.ledfx.app'
         ? 'DarkGreen'
         : isElectron()
-          ? 'DarkWhite'
+          ? 'DarkBw'
           : 'DarkBlue') || 'DarkBlue'