35 lines
877 B
TypeScript
35 lines
877 B
TypeScript
import { useContext } from 'react';
|
|
import { themeContext } from 'src/context/theme-context';
|
|
import styles from 'src/styles/modules/components/buttons/themeToggler.module.scss';
|
|
|
|
type Props = {
|
|
className: string;
|
|
};
|
|
|
|
const ThemeToggler = (props: Props) => {
|
|
const { theme, setTheme } = useContext(themeContext);
|
|
const clickHandler = () => {
|
|
const themeToSet = theme === 'light' ? 'dark' : 'light';
|
|
setTheme(themeToSet);
|
|
};
|
|
|
|
return (
|
|
<button
|
|
className={`${styles.button} ${props.className}`}
|
|
onClick={clickHandler}
|
|
>
|
|
<span className='visually-hidden'>Change theme</span>
|
|
<svg
|
|
className={`icon ${styles.icon}`}
|
|
focusable='false'
|
|
aria-hidden='true'
|
|
role='img'
|
|
>
|
|
<use href='/svg/sprite.svg#icon-theme-switcher'></use>
|
|
</svg>
|
|
</button>
|
|
);
|
|
};
|
|
|
|
export default ThemeToggler;
|