feat: add auto dark mode based on user settings

This commit is contained in:
CyberL1 2025-01-16 17:11:50 +01:00
parent 5fcc8b4859
commit 17c2a3042f

View File

@ -5,6 +5,7 @@ import "@fontsource/roboto/700.css";
import { import {
AppBar, AppBar,
Box, Box,
createTheme,
Drawer, Drawer,
Icon, Icon,
IconButton, IconButton,
@ -13,6 +14,7 @@ import {
ListItemButton, ListItemButton,
ListItemIcon, ListItemIcon,
ListItemText, ListItemText,
ThemeProvider,
Toolbar, Toolbar,
Typography, Typography,
} from "@mui/material"; } from "@mui/material";
@ -37,11 +39,17 @@ const sidebarItems: Item[] = [
const drawerWidth = 240; const drawerWidth = 240;
const darkTheme = createTheme({
colorSchemes: {
dark: true,
},
});
function App({ error }: { error?: boolean }) { function App({ error }: { error?: boolean }) {
const [isOpen, setOpen] = useState(false); const [isOpen, setOpen] = useState(false);
return ( return (
<> <ThemeProvider theme={darkTheme}>
<AppBar <AppBar
position="fixed" position="fixed"
sx={{ zIndex: (theme) => theme.zIndex.drawer + 1 }} sx={{ zIndex: (theme) => theme.zIndex.drawer + 1 }}
@ -103,7 +111,7 @@ function App({ error }: { error?: boolean }) {
{error && <ErrorPage />} {error && <ErrorPage />}
{localStorage.getItem("key") ? <Outlet /> : <Login />} {localStorage.getItem("key") ? <Outlet /> : <Login />}
</Box> </Box>
</> </ThemeProvider>
); );
} }