import React from 'react' import PropTypes from 'prop-types' import Helmet from 'react-helmet' import posed from 'react-pose' import useDarkMode from '../../hooks/use-dark-mode' import { fadeIn } from '../atoms/Transitions' import { ReactComponent as Day } from '../../images/day.svg' import { ReactComponent as Night } from '../../images/night.svg' import styles from './ThemeSwitch.module.scss' const Animation = posed.aside(fadeIn) const ThemeToggle = ({ dark }) => ( ) ThemeToggle.propTypes = { dark: PropTypes.bool.isRequired } const ThemeToggleInput = ({ dark, toggleDark }) => ( toggleDark()} type="checkbox" name="toggle" value="toggle" aria-describedby="toggle" checked={dark} /> ) ThemeToggleInput.propTypes = { dark: PropTypes.bool.isRequired, toggleDark: PropTypes.func.isRequired } export default function ThemeSwitch() { const { darkMode, toggleDark } = useDarkMode() const themeColor = darkMode ? '#1d2224' : '#e7eef4' return ( <> ) }