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>
}
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>
);
}