From d547e858cec1616037f189b2de441c9e901c9d23 Mon Sep 17 00:00:00 2001
From: Adrien Vannson <adrien.vannson@protonmail.com>
Date: Wed, 1 Mar 2023 10:35:29 +0100
Subject: [PATCH] Possibility to switch to dark theme

---
 src/App.js | 35 +++++++++++++++++++++++------------
 1 file changed, 23 insertions(+), 12 deletions(-)

diff --git a/src/App.js b/src/App.js
index d27cc4e..3a4444d 100644
--- a/src/App.js
+++ b/src/App.js
@@ -147,7 +147,7 @@ function RoomInformation({ roomId, setIsEditDialogOpen }) {
   </div>
 }
 
-function TopBar() {
+function TopBar({toggleTheme}) {
   const [openAboutModal, setOpenAboutModal] = React.useState(false);
 
   const handleOpenAboutModal = () => {
@@ -164,6 +164,7 @@ function TopBar() {
         <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
           ENcarteS
         </Typography>
+        <Button color="inherit" onClick={toggleTheme}>Changer de thème</Button>
         <Button color="inherit" onClick={handleOpenAboutModal}>À propos</Button>
       </Toolbar>
     </AppBar>
@@ -255,7 +256,7 @@ function EditDialog({ isOpen, setIsOpen, room }) {
   </Dialog>
 }
 
-export default function App() {
+function App({toggleTheme}) {
   const [currentFloor, setCurrentFloor] = React.useState(undefined);
   const [selectedRoom, setSelectedRoom] = React.useState(undefined);
   const [isEditDialogOpen, setIsEditDialogOpen] = React.useState(false);
@@ -266,9 +267,9 @@ export default function App() {
       setIsOpen={setIsEditDialogOpen}
       room={selectedRoom}
     />
-    <TopBar />
+    <TopBar toggleTheme={toggleTheme}/>
     <div style={{ flexGrow: '1', display: 'flex', flexDirection: 'line', flexWrap: 'nowrap' }}>
-      { currentFloor !== undefined ? <Map
+      {currentFloor !== undefined ? <Map
         selectedRoom={selectedRoom}
         callbackRoomSelected={setSelectedRoom}
         floorID={currentFloor}
@@ -291,17 +292,27 @@ export default function App() {
   </>
 }
 
-const darkTheme = createTheme({
-  palette: {
-    mode: 'dark',
-  },
-});
+export default function ThemedApp() {
+  const [themeMode, setThemeMode] = React.useState('light');
+
+  const theme = createTheme({
+    palette: {
+      mode: themeMode,
+    },
+  });
+
+  const toggleTheme = () => {
+    if (themeMode === 'light') {
+      setThemeMode('dark')
+    } else {
+      setThemeMode('light')
+    }
+  }
 
-function ThemedApp() {
   return (
-    <ThemeProvider theme={darkTheme}>
+    <ThemeProvider theme={theme}>
       <CssBaseline />
-      <App />
+      <App toggleTheme={toggleTheme} />
     </ThemeProvider>
   );
 }