sendou.ink/app/components/layout/ColorModeToggle.tsx
2022-09-05 21:10:57 +03:00

25 lines
641 B
TypeScript

import { Theme, useTheme } from "~/modules/theme";
import { MoonIcon } from "../icons/Moon";
import { SunIcon } from "../icons/Sun";
export function ColorModeToggle() {
const [, setTheme] = useTheme();
const toggleTheme = () => {
setTheme((prevTheme) =>
prevTheme === Theme.LIGHT ? Theme.DARK : Theme.LIGHT
);
};
return (
<button
className="layout__header__button"
onClick={toggleTheme}
data-cy="theme-switch-button"
>
<SunIcon className="light-mode-only layout__header__button__icon" />
<MoonIcon className="dark-mode-only layout__header__button__icon" />
</button>
);
}