43 lines
1,011 B
TypeScript
43 lines
1,011 B
TypeScript
import { Theme, withStyles } from "@material-ui/core/styles";
|
|
import Switch, { SwitchProps } from "@material-ui/core/Switch";
|
|
import React from "react";
|
|
|
|
import MoonIcon from "../../icons/Moon";
|
|
import SunIcon from "../../icons/Sun";
|
|
|
|
const switchStyles = theme => ({
|
|
bar: {
|
|
"$colorPrimary$checked + &": {
|
|
backgroundColor: theme.palette.background.paper
|
|
},
|
|
background: theme.palette.background.paper
|
|
},
|
|
checked: {
|
|
"& svg": {
|
|
background: theme.palette.primary.main,
|
|
color: theme.palette.background.paper
|
|
}
|
|
},
|
|
colorPrimary: {},
|
|
root: {
|
|
"& svg": {
|
|
background: theme.palette.primary.main,
|
|
borderRadius: "100%",
|
|
height: 20,
|
|
width: 20
|
|
},
|
|
width: 58
|
|
}
|
|
});
|
|
const ThemeSwitch = withStyles(switchStyles, {
|
|
name: "ThemeSwitch"
|
|
})((props: SwitchProps) => (
|
|
<Switch
|
|
{...props}
|
|
color="primary"
|
|
icon={<SunIcon />}
|
|
checkedIcon={<MoonIcon />}
|
|
/>
|
|
));
|
|
ThemeSwitch.displayName = "ThemeSwitch";
|
|
export default ThemeSwitch;
|