gonets/FRONT/BUILD/resources/app/src/components/UI/buttons/toggletheme.tsx

26 lines
No EOL
639 B
TypeScript

import styled, { useTheme } from "styled-components";
import { IconComponent as Icon } from '../../../const/theme/icons';
import { ThemName } from "../../../const/theme/names";
const Button = styled.div`
width: 100%;
cursor: pointer;
`
const IconContainer = styled.div`
padding: 10px;
color: ${props => props.theme.text};
`
export default function ThemeButton() {
const theme = useTheme();
const name = localStorage.getItem('theme') as ThemName
return (
<Button onClick={theme.toggleTheme}>
<IconContainer>
<Icon name={name} width="30" height="30"/>
</IconContainer>
</Button>
);
}