49 lines
1.1 KiB
TypeScript
49 lines
1.1 KiB
TypeScript
import IconButton from "@mui/material/IconButton";
|
|
|
|
import { Moon, Sun } from "lucide-react";
|
|
|
|
import { setMode } from "@/Features/UI/uiSlice.js";
|
|
import { useTheme } from "@mui/material";
|
|
import { useDispatch, useSelector } from "react-redux";
|
|
import type { RootState } from "@/Types/state";
|
|
|
|
export const SwitchTheme = () => {
|
|
const mode = useSelector((state: RootState) => state.ui.mode);
|
|
const dispatch = useDispatch();
|
|
const theme = useTheme();
|
|
|
|
const handleChange = () => {
|
|
dispatch(setMode(mode === "light" ? "dark" : "light"));
|
|
};
|
|
return (
|
|
<IconButton
|
|
id="theme-toggle"
|
|
onClick={handleChange}
|
|
sx={{
|
|
display: "flex",
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
"& svg": {
|
|
transition: "stroke 0.2s ease",
|
|
},
|
|
"&:hover svg path, &:hover svg line, &:hover svg polyline, &:hover svg rect, &:hover svg circle":
|
|
{
|
|
stroke: theme.palette.primary.main,
|
|
},
|
|
}}
|
|
>
|
|
{mode === "light" ? (
|
|
<Moon
|
|
size={16}
|
|
strokeWidth={1.5}
|
|
/>
|
|
) : (
|
|
<Sun
|
|
size={16}
|
|
strokeWidth={1.5}
|
|
/>
|
|
)}
|
|
</IconButton>
|
|
);
|
|
};
|