2021-03-13 03:35:50 +01:00
|
|
|
import React, { useEffect, useState } from 'react'
|
2018-05-23 00:03:46 +02:00
|
|
|
import PropTypes from 'prop-types'
|
2020-04-11 23:40:25 +02:00
|
|
|
import { Helmet } from 'react-helmet'
|
2019-11-13 11:59:59 +01:00
|
|
|
import Icon from '../atoms/Icon'
|
2021-03-12 23:47:28 +01:00
|
|
|
import {
|
|
|
|
|
checkboxContainer,
|
|
|
|
|
checkboxFake,
|
|
|
|
|
themeSwitch,
|
|
|
|
|
checkbox,
|
|
|
|
|
label
|
|
|
|
|
} from './ThemeSwitch.module.css'
|
2021-03-13 03:35:50 +01:00
|
|
|
import useDarkMode from '../../hooks/useDarkMode'
|
2018-05-10 16:06:17 +02:00
|
|
|
|
2021-03-13 03:35:50 +01:00
|
|
|
const ThemeToggle = ({ dark }) => (
|
2021-03-12 23:47:28 +01:00
|
|
|
<span id="toggle" className={checkboxContainer} aria-live="assertive">
|
2019-11-13 13:32:11 +01:00
|
|
|
<Icon name="Sun" className={!dark ? null : 'active'} />
|
2021-03-12 23:47:28 +01:00
|
|
|
<span className={checkboxFake} />
|
2019-11-13 13:32:11 +01:00
|
|
|
<Icon name="Moon" className={dark ? 'active' : null} />
|
2018-06-24 18:20:34 +02:00
|
|
|
</span>
|
2021-03-13 03:35:50 +01:00
|
|
|
)
|
2018-05-23 00:03:46 +02:00
|
|
|
|
2018-09-06 14:28:01 +02:00
|
|
|
ThemeToggle.propTypes = {
|
2019-05-26 23:52:27 +02:00
|
|
|
dark: PropTypes.bool.isRequired
|
2018-09-06 14:28:01 +02:00
|
|
|
}
|
2018-05-10 16:06:17 +02:00
|
|
|
|
2021-03-13 01:03:23 +01:00
|
|
|
const ThemeToggleInput = ({ dark, toggleDark }) => (
|
2018-09-17 00:43:52 +02:00
|
|
|
<input
|
2021-03-13 03:51:52 +01:00
|
|
|
onChange={() => toggleDark()}
|
2018-09-17 00:43:52 +02:00
|
|
|
type="checkbox"
|
|
|
|
|
name="toggle"
|
|
|
|
|
value="toggle"
|
|
|
|
|
aria-describedby="toggle"
|
|
|
|
|
checked={dark}
|
|
|
|
|
/>
|
2021-03-13 01:03:23 +01:00
|
|
|
)
|
2019-11-28 19:58:49 +01:00
|
|
|
|
2018-09-17 00:43:52 +02:00
|
|
|
ThemeToggleInput.propTypes = {
|
2019-05-26 23:52:27 +02:00
|
|
|
dark: PropTypes.bool.isRequired,
|
|
|
|
|
toggleDark: PropTypes.func.isRequired
|
2018-09-17 00:43:52 +02:00
|
|
|
}
|
2018-05-10 16:06:17 +02:00
|
|
|
|
2019-11-28 19:58:49 +01:00
|
|
|
const HeadItems = ({ bodyClass, themeColor }) => (
|
|
|
|
|
<Helmet>
|
|
|
|
|
<body className={bodyClass} />
|
|
|
|
|
<meta name="theme-color" content={themeColor} />
|
|
|
|
|
<meta
|
|
|
|
|
name="apple-mobile-web-app-status-bar-style"
|
|
|
|
|
content="black-translucent"
|
|
|
|
|
/>
|
|
|
|
|
</Helmet>
|
|
|
|
|
)
|
|
|
|
|
|
|
|
|
|
HeadItems.propTypes = {
|
2020-03-07 03:11:52 +01:00
|
|
|
bodyClass: PropTypes.string,
|
2019-11-28 19:58:49 +01:00
|
|
|
themeColor: PropTypes.string.isRequired
|
|
|
|
|
}
|
|
|
|
|
|
2021-03-13 01:03:23 +01:00
|
|
|
export default function ThemeSwitch() {
|
2021-03-13 03:35:50 +01:00
|
|
|
const { value, toggle } = useDarkMode()
|
2020-02-15 14:05:14 +01:00
|
|
|
const [themeColor, setThemeColor] = useState('')
|
|
|
|
|
const [bodyClass, setBodyClass] = useState('')
|
2019-11-26 18:25:42 +01:00
|
|
|
|
|
|
|
|
useEffect(() => {
|
2019-11-28 19:58:49 +01:00
|
|
|
setBodyClass(value ? 'dark' : null)
|
|
|
|
|
setThemeColor(value ? '#1d2224' : '#e7eef4')
|
|
|
|
|
}, [value])
|
2019-11-09 19:12:58 +01:00
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<>
|
2019-11-28 19:58:49 +01:00
|
|
|
<HeadItems themeColor={themeColor} bodyClass={bodyClass} />
|
2021-03-12 23:47:28 +01:00
|
|
|
<aside className={themeSwitch}>
|
|
|
|
|
<label className={checkbox}>
|
|
|
|
|
<span className={label}>Toggle Night Mode</span>
|
2019-11-28 19:58:49 +01:00
|
|
|
<ThemeToggleInput dark={value} toggleDark={toggle} />
|
|
|
|
|
<ThemeToggle dark={value} />
|
2019-11-09 19:12:58 +01:00
|
|
|
</label>
|
2019-11-16 13:37:25 +01:00
|
|
|
</aside>
|
2019-11-09 19:12:58 +01:00
|
|
|
</>
|
|
|
|
|
)
|
2018-05-10 16:06:17 +02:00
|
|
|
}
|
