2018-05-12 01:42:29 +02:00
|
|
|
import React, { PureComponent, Fragment } from 'react'
|
|
|
|
|
import Helmet from 'react-helmet'
|
2018-05-10 20:56:58 +02:00
|
|
|
import { FadeIn } from '../atoms/Animations'
|
2018-05-10 16:06:17 +02:00
|
|
|
import { ReactComponent as Day } from '../../images/day.svg'
|
|
|
|
|
import { ReactComponent as Night } from '../../images/night.svg'
|
|
|
|
|
import './ThemeSwitch.scss'
|
|
|
|
|
|
2018-05-11 21:44:34 +02:00
|
|
|
class ThemeSwitch extends PureComponent {
|
2018-05-10 16:06:17 +02:00
|
|
|
constructor(props) {
|
|
|
|
|
super(props)
|
|
|
|
|
|
2018-05-10 17:58:45 +02:00
|
|
|
this.state = { dark: false }
|
2018-05-10 16:06:17 +02:00
|
|
|
}
|
|
|
|
|
|
2018-05-12 01:42:29 +02:00
|
|
|
componentDidMount() {
|
2018-05-10 17:58:45 +02:00
|
|
|
const now = new Date().getHours()
|
|
|
|
|
|
|
|
|
|
if (now >= 19 || now <= 7) {
|
|
|
|
|
this.setState({ dark: true })
|
|
|
|
|
}
|
2018-05-10 20:56:58 +02:00
|
|
|
}
|
2018-05-10 17:58:45 +02:00
|
|
|
|
2018-05-10 16:06:17 +02:00
|
|
|
isDark = () => this.state.dark === true
|
|
|
|
|
|
2018-05-10 17:58:45 +02:00
|
|
|
handleChange = () => {
|
2018-05-10 16:06:17 +02:00
|
|
|
this.setState({ dark: !this.isDark() })
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
render() {
|
|
|
|
|
return (
|
2018-05-12 01:42:29 +02:00
|
|
|
<Fragment>
|
|
|
|
|
<Helmet>
|
|
|
|
|
<body className={this.state.dark ? 'dark' : null} />
|
|
|
|
|
</Helmet>
|
|
|
|
|
<FadeIn>
|
|
|
|
|
<aside className="themeswitch">
|
|
|
|
|
<label className="checkbox">
|
|
|
|
|
<span className="checkbox__label">Toggle Night Mode</span>
|
|
|
|
|
<input
|
|
|
|
|
onChange={this.handleChange}
|
|
|
|
|
type="checkbox"
|
|
|
|
|
name="toggle"
|
|
|
|
|
value="toggle"
|
|
|
|
|
aria-describedby="toggle"
|
|
|
|
|
checked={this.state.dark}
|
|
|
|
|
/>
|
|
|
|
|
<span
|
|
|
|
|
id="toggle"
|
|
|
|
|
className="checkbox__faux-container"
|
|
|
|
|
aria-live="assertive"
|
|
|
|
|
>
|
|
|
|
|
<Day className={this.state.dark ? 'icon' : 'icon active'} />
|
|
|
|
|
<span className="checkbox__faux" />
|
|
|
|
|
<Night className={this.state.dark ? 'icon active' : 'icon'} />
|
|
|
|
|
</span>
|
|
|
|
|
</label>
|
|
|
|
|
</aside>
|
|
|
|
|
</FadeIn>
|
|
|
|
|
</Fragment>
|
2018-05-10 16:06:17 +02:00
|
|
|
)
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
export default ThemeSwitch
|
