mirror of https://github.com/kremalicious/ipfs.git
56 lines
1.2 KiB
TypeScript
56 lines
1.2 KiB
TypeScript
import React from 'react'
|
|
import useDarkMode from 'use-dark-mode'
|
|
|
|
import Day from '../images/day.svg'
|
|
import Night from '../images/night.svg'
|
|
import styles from './ThemeSwitch.module.css'
|
|
|
|
const ThemeToggle = () => (
|
|
<span id="toggle" className={styles.checkboxContainer} aria-live="assertive">
|
|
<Day />
|
|
<span className={styles.checkboxFake} />
|
|
<Night />
|
|
</span>
|
|
)
|
|
|
|
const ThemeToggleInput = ({
|
|
isDark,
|
|
toggleDark
|
|
}: {
|
|
isDark: boolean
|
|
toggleDark(): void
|
|
}) => (
|
|
<input
|
|
onChange={toggleDark}
|
|
type="checkbox"
|
|
name="toggle"
|
|
value="toggle"
|
|
aria-describedby="toggle"
|
|
checked={isDark}
|
|
/>
|
|
)
|
|
|
|
export default function ThemeSwitch() {
|
|
const darkMode = useDarkMode(false, {
|
|
classNameDark: 'dark',
|
|
classNameLight: 'light'
|
|
})
|
|
|
|
return (
|
|
<aside className={styles.themeSwitch}>
|
|
<label
|
|
htmlFor="toggle"
|
|
className={styles.checkbox}
|
|
onClick={darkMode.toggle}
|
|
>
|
|
<span className={styles.label}>Toggle Dark Mode</span>
|
|
<ThemeToggleInput
|
|
isDark={darkMode.value}
|
|
toggleDark={darkMode.toggle}
|
|
/>
|
|
<ThemeToggle />
|
|
</label>
|
|
</aside>
|
|
)
|
|
}
|