Mysaa/Encartes-web
1
0
Fork 0
mirror of https://gitlab.aliens-lyon.fr/encartes/web-interface.git synced 2026-03-17 22:51:04 +01:00
Code Issues Packages Projects Releases Wiki Activity

Possibility to switch to dark theme

Browse Source
This commit is contained in:
Adrien Vannson 2023-03-01 10:35:29 +01:00
parent 507f9e2951
commit d547e858ce
No known key found for this signature in database
GPG Key ID: FE2E66FD978C1A55
1 changed files with 23 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
src/App.js
View File

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