blob: c44f6df5876784d825939bd9a430902f60894be8 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
|
import { Form } from '@components/Form';
import { MoonIcon, SunIcon } from '@components/Icons';
import Spinner from '@components/Spinner/Spinner';
import { t } from '@lingui/macro';
import { useTheme } from 'next-themes';
import { FormEvent, useEffect, useState } from 'react';
import styles from './ThemeToggle.module.scss';
const ThemeToggle = () => {
const [isMounted, setIsMounted] = useState<boolean>(false);
const { resolvedTheme, setTheme } = useTheme();
useEffect(() => {
setIsMounted(true);
}, []);
const onSubmit = (e: FormEvent) => {
e.preventDefault();
};
if (!isMounted) return <Spinner />;
const isDarkTheme = resolvedTheme === 'dark';
return (
<Form modifier="theme" submitHandler={onSubmit}>
<input
className={styles.checkbox}
type="checkbox"
id="dark-theme"
name="dark-theme"
checked={isDarkTheme}
onChange={() => setTheme(isDarkTheme ? 'light' : 'dark')}
/>
<label htmlFor="dark-theme" className={styles.label}>
<span className={styles.title}>{t`Theme:`}</span>
<SunIcon />
<span className={styles.toggle}></span>
<MoonIcon />
</label>
</Form>
);
};
export default ThemeToggle;
|
