add options in dropdown for switching app theme

MichaelPesce · Sep 24, 2024 · c115d3a · c115d3a
1 parent cb15840
commit c115d3a
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 5 deletions.
diff --git a/electron/ui/src/components/Boilerplate/Header/Header.js b/electron/ui/src/components/Boilerplate/Header/Header.js
@@ -4,9 +4,9 @@ import LoggingPanel from '../../LoggingPanel/LoggingPanel';
 import {useNavigate} from "react-router-dom";
 import {Menu, MenuItem, IconButton} from '@mui/material';
 import ListIcon from '@mui/icons-material/List';
+import {themes} from '../../../theme';
 
-export default function Header({theme, hasTheme}) {
-    console.debug("header hasTheme=", hasTheme, ", theme=", theme);
+export default function Header({theme, hasTheme, changeTheme}) {
     let navigate = useNavigate();
     const [showLogs, setShowLogs] = React.useState(false)
     const [actionsList, setActionsList] = React.useState(false)
@@ -63,8 +63,12 @@ export default function Header({theme, hasTheme}) {
                         onClose={() => setActionsList(false)}
                     >
                         <MenuItem className="view-logs" onClick={handleShowLogs}>View Logs</MenuItem>
-                        <MenuItem className="return-home" onClick={handleNavigateHome}>Return to list
-                            page</MenuItem>
+                        {Object.keys(themes).map((key, idx) => {
+                            if (key != localStorage.getItem("theme")) return (
+                                <MenuItem key={key} className="change_theme" onClick={() => changeTheme(key)}>Switch to {key}</MenuItem>
+                            )
+                        })}
+                        <MenuItem className="return-home" onClick={handleNavigateHome}>Return to list page</MenuItem>
                     </Menu>
                 </div>
             </div>

diff --git a/electron/ui/src/components/MainContent/MainContent.js b/electron/ui/src/components/MainContent/MainContent.js
@@ -20,7 +20,7 @@ export default function MainContent(props) {
         const spState = props.subProcState;
         return (
             <Container id='AppRootContainer'>
-                <Header theme={theme} hasTheme={hasTheme}/>
+                <Header theme={theme} hasTheme={hasTheme} changeTheme={props.changeTheme}/>
                 <Routes>
                     <Route path="flowsheet/:id/config" element={<FlowsheetConfig
                         numberOfSubprocesses={spState.value}