blog/src/components/molecules/ThemeSwitch.tsx

import React, { ReactElement } from 'react'
import useDarkMode from '../../hooks/useDarkMode'
import Icon from '../atoms/Icon'
import * as styles from './ThemeSwitch.module.css'

export default function ThemeSwitch(): ReactElement {
  const { isDarkMode, setIsDarkMode } = useDarkMode()

  return (
    <div className={styles.themeSwitch} title="Toggle Dark Mode">
      <label
        htmlFor="toggle"
        className={styles.checkbox}
        onClick={() => setIsDarkMode(!isDarkMode)}
        onKeyPress={() => setIsDarkMode(!isDarkMode)}
        role="presentation"
      >
        <span className={styles.label}>Toggle Dark Mode</span>
        <input
          onChange={() => setIsDarkMode(!isDarkMode)}
          type="checkbox"
          name="toggle"
          value="toggle"
          aria-describedby="toggle"
          checked={isDarkMode}
        />
        <div aria-live="assertive">
          {isDarkMode ? <Icon name="Sun" /> : <Icon name="Moon" />}
        </div>
      </label>
    </div>
  )
}