mirror of
https://github.com/CyberL1/dlinux-dashboard.git
synced 2025-01-22 01:19:18 -05:00
feat: add auto dark mode based on user settings
This commit is contained in:
parent
5fcc8b4859
commit
17c2a3042f
@ -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>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Loading…
x
Reference in New Issue
Block a user