adjust styling for black and white theme

YeonV · Sep 26, 2024 · 0f5c9bd · 0f5c9bd
1 parent cc2648b
commit 0f5c9bd
Show file tree

Hide file tree

Showing 6 changed files with 104 additions and 36 deletions.
diff --git a/src/components/AddButton/AddButton.tsx b/src/components/AddButton/AddButton.tsx
@@ -1,4 +1,4 @@
-import { Fab, IconButton } from '@mui/material'
+import { Fab, IconButton, useTheme } from '@mui/material'
 import { AddSharp as Add, ElectricalServices } from '@mui/icons-material'
 import { useState } from 'react'
 import useStore from '../../store/useStore'
@@ -16,7 +16,7 @@ import {
 
 const AddButton = ({ className, style, setBackdrop, sx }: AddButtonProps) => {
   const classes = useStyles()
-
+  const theme = useTheme()
   const features = useStore((state) => state.features)
   const openAddScene = useStore((state) => state.setDialogOpenAddScene)
   const openAddDevice = useStore((state) => state.setDialogOpenAddDevice)
@@ -80,12 +80,12 @@ const AddButton = ({ className, style, setBackdrop, sx }: AddButtonProps) => {
         sx={sx}
       >
         <Fab
-          color="primary"
           variant="circular"
           aria-label="add"
           onClick={handleClick}
+          sx={{ bgcolor: theme.palette.primary.main }}
         >
-          <Add />
+          <Add sx={{color: theme.palette.primary.contrastText }} />
         </Fab>
         <StyledMenu
           id="customized-menu"

diff --git a/src/components/Bars/BarTop.tsx b/src/components/Bars/BarTop.tsx
@@ -25,7 +25,11 @@ import {
   MenuItem,
   ListItemIcon,
   Button,
-  useTheme
+  useTheme,
+  Select,
+  Stack,
+  ListItemText,
+  Divider
 } from '@mui/material'
 import { styled } from '@mui/styles'
 
@@ -42,6 +46,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'
 
 export const StyledBadge = styled(Badge)(() => ({
   '& .MuiBadge-badge': {
@@ -81,6 +86,7 @@ const LeftButtons = (
         color="inherit"
         startIcon={<ChevronLeft />}
         onClick={() => history(-1)}
+        sx={{ mt: .9 }}
       >
         Back
       </Button>
@@ -121,7 +127,8 @@ const Title = (
   pathname: string,
   latestTag: string,
   updateAvailable: boolean,
-  virtuals: any
+  virtuals: any,
+  frConfig: Record<string, any>
 ) => {
   const newVerOnline =
   latestTag.replace('v', '').includes('-b')
@@ -134,13 +141,13 @@ const Title = (
     return (
       <>
         {`LedFx v${pkg.version}`}
-        {!process.env.MS_STORE && newVerOnline ? (
+        {!process.env.MS_STORE && newVerOnline && frConfig.updateUrl ? (
           <Button
             color="error"
             variant="contained"
             onClick={() =>
               window.open(
-                'https://github.com/YeonV/LedFx-Builds/releases/latest'
+                frConfig.updateUrl
               )
             }
             sx={{ ml: 2 }}
@@ -175,25 +182,28 @@ const Title = (
 }
 
 const TopBar = () => {
-  // const classes = useStyles();
+  // const classes = useStyles()
   const navigate = useNavigate()
   const theme = useTheme()
   const [updateAvailable, setUpdateAvailable] = useState(false)
 
   const [loggingIn, setLogginIn] = useState(false)
 
   const open = useStore((state) => state.ui.bars && state.ui.bars?.leftBar.open)
+  const [frConfig, setFrConfig] = useState({ updateUrl: '' })
   const latestTag = useStore((state) => state.ui.latestTag)
+  const currentTheme = useStore((state) => state.ui.currentTheme)
+  const setCurrentTheme = useStore((state) => state.ui.setCurrentTheme)
   const setLatestTag = useStore((state) => state.ui.setLatestTag)
   const setLeftBarOpen = useStore((state) => state.ui.setLeftBarOpen)
-  // const darkMode = useStore((state) => state.ui.darkMode);
-  // const setDarkMode = useStore((state) => state.ui.setDarkMode);
+  // const darkMode = useStore((state) => state.ui.darkMode)
+  // const setDarkMode = useStore((state) => state.ui.setDarkMode)
   const virtuals = useStore((state) => state.virtuals)
   const setDialogOpen = useStore((state) => state.setDialogOpen)
   const setHostManager = useStore((state) => state.setHostManager)
   const toggleGraphs = useStore((state) => state.toggleGraphs)
   const graphs = useStore((state) => state.graphs)
-  // const config = useStore((state) => state.config);
+  // const config = useStore((state) => state.config)
   const isLogged = useStore((state) => state.isLogged)
   const setIsLogged = useStore((state) => state.setIsLogged)
   const disconnected = useStore((state) => state.disconnected)
@@ -244,8 +254,8 @@ const TopBar = () => {
     setAnchorEl(null)
   }
   // const toggleDarkMode = () => {
-  //   setDarkMode(!darkMode);
-  // };
+  //   setDarkMode(!darkMode)
+  // }
 
   const changeGraphs = () => {
     toggleGraphs()
@@ -263,6 +273,15 @@ const TopBar = () => {
     localStorage.removeItem('ledfx-cloud-role')
     setIsLogged(false)
   }
+  useEffect(() => {
+    const fetchConfig = async () => {
+      const res = await fetch('/frontend_config.json')
+      const configData = await res.json()
+      setFrConfig(configData)
+    }
+
+    fetchConfig()
+  }, [])
 
   useEffect(() => {
     setIsLogged(!!localStorage.getItem('jwt'))
@@ -303,16 +322,15 @@ const TopBar = () => {
   }, [updateNotificationInterval, getUpdateInfo, latestTag])
 
   useEffect(() => {
-    const latest = async () => {
-      const res = await fetch(
-        'https://api.github.com/repos/YeonV/LedFx-Builds/releases/latest'
-      )
-      const resp = await res.json()
-      return resp.tag_name as string
+    if (frConfig.updateUrl) {
+      const latest = async () => {
+        const res = await fetch(frConfig.updateUrl);
+        const resp = await res.json();
+        return resp.tag_name as string;
+      };
+      latest().then((r) => r !== latestTag && setLatestTag(r));
     }
-    latest().then((r) => r !== latestTag && setLatestTag(r))
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [])
+  }, [frConfig]);
 
   useEffect(() => {
     const handleDisconnect = (e: any) => {
@@ -335,6 +353,13 @@ const TopBar = () => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
 
+  useEffect(() => {
+    const t = window.localStorage.getItem('ledfx-theme')
+    if (t && t !== currentTheme) {
+      setCurrentTheme(t)
+    }
+  }, [])
+
   return (
     <>
       {isElectron() && platform !== 'darwin' && (
@@ -380,7 +405,7 @@ const TopBar = () => {
               {LeftButtons(pathname, history, open, handleLeftBarOpen)}
             </div>
             <Typography variant="h6" noWrap style={{ margin: '0 auto' }}>
-              {Title(pathname, latestTag, updateAvailable, virtuals)}
+              {Title(pathname, latestTag, updateAvailable, virtuals, frConfig)}
             </Typography>
             <div
               style={{
@@ -556,6 +581,33 @@ const TopBar = () => {
                     {isLogged ? 'Logout' : 'Login with Github'}
                   </MenuItem>
                 )}
+                {localStorage.getItem('username') === 'YeonV' && <>
+                    <Divider />
+                    <Select
+                    IconComponent={()=>null}
+                    fullWidth
+                    sx={{ pl: 2}}
+                      disableUnderline
+                      value={currentTheme} onChange={(e) => {
+                        setCurrentTheme(e.target.value)
+                        window.localStorage.setItem('ledfx-theme', e.target.value)
+                        window.location.reload()
+                      }}
+                    >
+                      {Object.keys(ledfxThemes).map((t) => (
+                        <MenuItem key={t} value={t}>
+                          <Stack direction={'row'}>
+                            <ListItemIcon sx={{ alignItems: 'center',  minWidth: 38}}>
+                              <BladeIcon name={t.startsWith('Dark') ? 'DarkMode' : 'LightMode'} />
+                            </ListItemIcon>
+                            <ListItemText>
+                            {t}
+                            </ListItemText>
+                          </Stack>
+                        </MenuItem>
+                      ))}
+                    </Select>
+                  </>}
               </Menu>
             )}
           </Toolbar>

diff --git a/src/components/Tours/TourHome.tsx b/src/components/Tours/TourHome.tsx
@@ -97,11 +97,13 @@ const steps = [
 const TourHome = ({
   className = '',
   cally,
-  variant = 'button'
+  variant = 'button',
+  sx
 }: {
   className?: string
   variant?: string
   cally?: any
+  sx?: any
 }) => {
   const theme = useTheme()
   const tour = useStore((state) => state.tours.home)
@@ -126,7 +128,8 @@ const TourHome = ({
             bgcolor: theme.palette.primary.main,
             '&:hover': {
               bgcolor: theme.palette.primary.light
-            }
+            },
+            ...sx
           }}
         >
           <LiveHelp />

diff --git a/src/pages/Home/Dashboard.tsx b/src/pages/Home/Dashboard.tsx
@@ -181,7 +181,7 @@ const Dashboard = () => {
           <Stack spacing={2} direction="row">
             <Tooltip title="Startup Assistant">
               <Fab
-                aria-label="scan"
+                aria-label="intro"
                 onClick={() => {
                   setIntro(true)
                 }}
@@ -201,7 +201,7 @@ const Dashboard = () => {
                   height="auto"
                   src={fx}
                   alt="wled"
-                  style={{ filter: 'grayscale(100%) brightness(0)' }}
+                  style={{ filter: `grayscale(100%) brightness(0)${theme.palette.primary.contrastText === '#fff' ? ' invert(1)' : ''}` }}
                 />
               </Fab>
             </Tooltip>
@@ -239,7 +239,7 @@ const Dashboard = () => {
                       {`${Math.round((scanning / 30) * 100)}%`}
                     </Typography>
                   ) : (
-                    <BladeIcon name="wled" />
+                    <BladeIcon name="wled" sx={{ color: theme.palette.primary.contrastText}} />
                   )}
                   {scanning > -1 && (
                     <CircularProgress5
@@ -278,7 +278,7 @@ const Dashboard = () => {
                   height="auto"
                   src={openrgbLogo}
                   alt="wled"
-                  style={{ filter: 'grayscale(100%) brightness(0)' }}
+                  style={{ filter: `grayscale(100%) brightness(0)${theme.palette.primary.contrastText === '#fff' ? ' invert(1)' : ''}` }}
                 />
               </Fab>
             </Tooltip>
@@ -307,6 +307,7 @@ const Dashboard = () => {
                   type="fab"
                   color="primary"
                   style={{ margin: '8px' }}
+                  sx={{ color: theme.palette.primary.contrastText}}
                   icon={<DeleteForever />}
                   text="Delete frontend data?"
                   onConfirm={() => {
@@ -334,7 +335,7 @@ const Dashboard = () => {
           </Tooltip> */}
             <Tooltip title="Guided Tour">
               <span style={{ margin: 0, zIndex: 0 }}>
-                <TourHome className="step-one" variant="fab" />
+                <TourHome className="step-one" variant="fab" sx={{ color: theme.palette.primary.contrastText}} />
               </span>
             </Tooltip>
           </Stack>
@@ -354,7 +355,8 @@ const Dashboard = () => {
                   zIndex: 0
                 }}
                 sx={{
-                  bgcolor: theme.palette.text.disabled,
+                  color: theme.palette.primary.contrastText,
+                  bgcolor: theme.palette.mode === 'dark' ? theme.palette.primary.dark : theme.palette.primary.light,
                   '&:hover': {
                     bgcolor: theme.palette.primary.main
                   }
@@ -378,7 +380,8 @@ const Dashboard = () => {
                   zIndex: 0
                 }}
                 sx={{
-                  bgcolor: theme.palette.text.disabled,
+                  color: theme.palette.primary.contrastText,
+                  bgcolor: theme.palette.mode === 'dark' ? theme.palette.primary.dark : theme.palette.primary.light,
                   '&:hover': {
                     bgcolor: theme.palette.primary.main
                   }
@@ -402,7 +405,8 @@ const Dashboard = () => {
                   zIndex: 0
                 }}
                 sx={{
-                  bgcolor: theme.palette.text.disabled,
+                  fill: theme.palette.primary.contrastText,
+                  bgcolor: theme.palette.mode === 'dark' ? theme.palette.primary.dark : theme.palette.primary.light,
                   '&:hover': {
                     bgcolor: theme.palette.primary.main
                   }

diff --git a/src/pages/Home/Gauge.tsx b/src/pages/Home/Gauge.tsx
@@ -47,15 +47,15 @@ export default function Gauge(props: any) {
       >
         <Typography
           variant="h2"
-          color="secondary"
+          color="primary"
           fontSize={`${size / 4}em`}
           style={{ lineHeight: 1 }}
         >
           {current}
         </Typography>
         <Typography
           variant="caption"
-          color="secondary"
+          color="GrayText"
           fontSize={`${size / 12}em`}
           style={{ lineHeight: 1 }}
         >

diff --git a/src/store/ui/storeUI.tsx b/src/store/ui/storeUI.tsx
@@ -4,6 +4,15 @@ import pkg from '../../../package.json'
 import type { IStore } from '../useStore'
 
 const storeUI = (set: any) => ({
+  currentTheme: '',
+  setCurrentTheme: (theme: string): void =>
+    set(
+      produce((state: IStore) => {
+        state.ui.currentTheme = theme
+      }),
+      false,
+      'ui/currentTheme'
+    ),
   effectDescriptions: 'Hide' as 'Auto' | 'Show' | 'Hide',
   setEffectDescriptions: (mode: 'Auto' | 'Show' | 'Hide'): void =>
     set(