2019-04-15 00:25:54 +02:00
|
|
|
import React, { PureComponent } from 'react'
|
2018-05-23 00:03:46 +02:00
|
|
|
import PropTypes from 'prop-types'
|
2018-05-12 01:42:29 +02:00
|
|
|
import Helmet from 'react-helmet'
|
2018-09-17 00:43:52 +02:00
|
|
|
import posed from 'react-pose'
|
|
|
|
|
import { Consumer } from '../../store/createContext'
|
2018-09-14 20:58:49 +02:00
|
|
|
import { fadeIn } from '../atoms/Transitions'
|
|
|
|
|
|
2018-09-20 19:06:46 +02:00
|
|
|
import { ReactComponent as Day } from '../../images/day.svg'
|
|
|
|
|
import { ReactComponent as Night } from '../../images/night.svg'
|
2018-06-11 19:48:38 +02:00
|
|
|
import styles from './ThemeSwitch.module.scss'
|
2018-05-10 16:06:17 +02:00
|
|
|
|
2018-09-14 20:58:49 +02:00
|
|
|
const Animation = posed.aside(fadeIn)
|
2018-09-14 20:22:57 +02:00
|
|
|
|
2018-09-06 14:28:01 +02:00
|
|
|
const ThemeToggle = ({ dark }) => (
|
2018-06-24 18:20:34 +02:00
|
|
|
<span id="toggle" className={styles.checkboxContainer} aria-live="assertive">
|
2018-09-06 14:28:01 +02:00
|
|
|
<Day className={dark ? null : 'active'} />
|
2018-06-24 18:20:34 +02:00
|
|
|
<span className={styles.checkboxFake} />
|
2018-09-06 14:28:01 +02:00
|
|
|
<Night className={dark ? 'active' : null} />
|
2018-06-24 18:20:34 +02:00
|
|
|
</span>
|
|
|
|
|
)
|
2018-05-23 00:03:46 +02:00
|
|
|
|
2018-09-06 14:28:01 +02:00
|
|
|
ThemeToggle.propTypes = {
|
|
|
|
|
dark: PropTypes.bool
|
|
|
|
|
}
|
2018-05-10 16:06:17 +02:00
|
|
|
|
2018-09-17 00:43:52 +02:00
|
|
|
const ThemeToggleInput = ({ dark, toggleDark }) => (
|
|
|
|
|
<input
|
2018-09-28 19:38:49 +02:00
|
|
|
onChange={toggleDark()}
|
2018-09-17 00:43:52 +02:00
|
|
|
type="checkbox"
|
|
|
|
|
name="toggle"
|
|
|
|
|
value="toggle"
|
|
|
|
|
aria-describedby="toggle"
|
|
|
|
|
checked={dark}
|
|
|
|
|
/>
|
|
|
|
|
)
|
2018-05-10 17:58:45 +02:00
|
|
|
|
2018-09-17 00:43:52 +02:00
|
|
|
ThemeToggleInput.propTypes = {
|
|
|
|
|
dark: PropTypes.bool,
|
|
|
|
|
toggleDark: PropTypes.func
|
|
|
|
|
}
|
2018-05-10 16:06:17 +02:00
|
|
|
|
2018-09-17 00:43:52 +02:00
|
|
|
export default class ThemeSwitch extends PureComponent {
|
2018-05-10 16:06:17 +02:00
|
|
|
render() {
|
|
|
|
|
return (
|
2018-09-17 00:43:52 +02:00
|
|
|
<Consumer>
|
|
|
|
|
{({ dark, toggleDark }) => (
|
2019-04-15 00:25:54 +02:00
|
|
|
<>
|
2018-09-17 00:43:52 +02:00
|
|
|
<Helmet>
|
|
|
|
|
<body className={dark ? 'dark' : null} />
|
|
|
|
|
</Helmet>
|
2019-04-27 23:53:26 +02:00
|
|
|
<Animation className={styles.themeSwitch}>
|
2018-09-17 00:43:52 +02:00
|
|
|
<label className={styles.checkbox}>
|
|
|
|
|
<span className={styles.label}>Toggle Night Mode</span>
|
|
|
|
|
<ThemeToggleInput dark={dark} toggleDark={toggleDark} />
|
|
|
|
|
<ThemeToggle dark={dark} />
|
|
|
|
|
</label>
|
|
|
|
|
</Animation>
|
2019-04-15 00:25:54 +02:00
|
|
|
</>
|
2018-09-17 00:43:52 +02:00
|
|
|
)}
|
|
|
|
|
</Consumer>
|
2018-05-10 16:06:17 +02:00
|
|
|
)
|
|
|
|
|
}
|
|
|
|
|
}
|
