ente/web/packages/shared/components/ThemeSwitcher.tsx
2024-03-01 12:21:07 +05:30

31 lines
1,005 B
TypeScript

import { THEME_COLOR } from "@ente/shared/themes/constants";
import DarkModeIcon from "@mui/icons-material/DarkMode";
import LightModeIcon from "@mui/icons-material/LightMode";
import { ToggleButton, ToggleButtonGroup } from "@mui/material";
interface Iprops {
themeColor: THEME_COLOR;
setThemeColor: (theme: THEME_COLOR) => void;
}
export default function ThemeSwitcher({ themeColor, setThemeColor }: Iprops) {
const handleChange = (event, themeColor: THEME_COLOR) => {
if (themeColor !== null) {
setThemeColor(themeColor);
}
};
return (
<ToggleButtonGroup
size="small"
value={themeColor}
exclusive
onChange={handleChange}
>
<ToggleButton value={THEME_COLOR.LIGHT}>
<LightModeIcon />
</ToggleButton>
<ToggleButton value={THEME_COLOR.DARK}>
<DarkModeIcon />
</ToggleButton>
</ToggleButtonGroup>
);
}