import React, { memo, useEffect, useState } from 'react'
import PropTypes from 'prop-types'
import Helmet from 'react-helmet'
import useDarkMode from 'use-dark-mode'
import Icon from '../atoms/Icon'
import styles from './ThemeSwitch.module.scss'
const ThemeToggle = memo(({ dark }) => (
))
ThemeToggle.displayName = 'ThemeToggle'
ThemeToggle.propTypes = {
dark: PropTypes.bool.isRequired
}
const ThemeToggleInput = memo(({ dark, toggleDark }) => (
toggleDark()}
type="checkbox"
name="toggle"
value="toggle"
aria-describedby="toggle"
checked={dark}
/>
))
ThemeToggleInput.displayName = 'ThemeToggleInput'
ThemeToggleInput.propTypes = {
dark: PropTypes.bool.isRequired,
toggleDark: PropTypes.func.isRequired
}
const HeadItems = ({ bodyClass, themeColor }) => (
)
HeadItems.propTypes = {
bodyClass: PropTypes.string.isRequired,
themeColor: PropTypes.string.isRequired
}
function ThemeSwitch() {
const { value, toggle } = useDarkMode(false, {
classNameDark: 'dark',
classNameLight: 'light'
})
const [themeColor, setThemeColor] = useState()
const [bodyClass, setBodyClass] = useState()
useEffect(() => {
setBodyClass(value ? 'dark' : null)
setThemeColor(value ? '#1d2224' : '#e7eef4')
}, [value])
return (
<>
)
}
export default memo(ThemeSwitch)