60 lines
1.7 KiB
TypeScript
60 lines
1.7 KiB
TypeScript
import * as React from "react";
|
|
import { useTheme, useColorScheme } from "@mui/material/styles";
|
|
import useMediaQuery from "@mui/material/useMediaQuery";
|
|
import IconButton from "@mui/material/IconButton";
|
|
import Tooltip from "@mui/material/Tooltip";
|
|
import DarkModeIcon from "@mui/icons-material/DarkMode";
|
|
import LightModeIcon from "@mui/icons-material/LightMode";
|
|
import type {} from "@mui/material/themeCssVarsAugmentation";
|
|
|
|
export default function ThemeSwitcher() {
|
|
const theme = useTheme();
|
|
|
|
const prefersDarkMode = useMediaQuery("(prefers-color-scheme: dark)");
|
|
const preferredMode = prefersDarkMode ? "dark" : "light";
|
|
|
|
const { mode, setMode } = useColorScheme();
|
|
|
|
const paletteMode = !mode || mode === "system" ? preferredMode : mode;
|
|
|
|
const toggleMode = React.useCallback(() => {
|
|
setMode(paletteMode === "dark" ? "light" : "dark");
|
|
}, [setMode, paletteMode]);
|
|
|
|
return (
|
|
<Tooltip
|
|
title={`${paletteMode === "dark" ? "Light" : "Dark"} mode`}
|
|
enterDelay={1000}
|
|
>
|
|
<div>
|
|
<IconButton
|
|
size="small"
|
|
aria-label={`Switch to ${
|
|
paletteMode === "dark" ? "light" : "dark"
|
|
} mode`}
|
|
onClick={toggleMode}
|
|
>
|
|
<React.Fragment>
|
|
<LightModeIcon
|
|
sx={{
|
|
display: "inline",
|
|
[theme.getColorSchemeSelector("dark")]: {
|
|
display: "none",
|
|
},
|
|
}}
|
|
/>
|
|
<DarkModeIcon
|
|
sx={{
|
|
display: "none",
|
|
[theme.getColorSchemeSelector("dark")]: {
|
|
display: "inline",
|
|
},
|
|
}}
|
|
/>
|
|
</React.Fragment>
|
|
</IconButton>
|
|
</div>
|
|
</Tooltip>
|
|
);
|
|
}
|