1import { Switch } from '@headlessui/react';
2import classNames from 'classnames';
3import { useTheme } from 'next-themes';
4import { useEffect, useState } from 'react';
5
6export default function DarkMode() {
7 const { resolvedTheme, setTheme } = useTheme();
8 const [checked, setChecked] = useState<boolean>();
9 const isDark = resolvedTheme === 'dark';
10
11 useEffect(() => {
12 setChecked(resolvedTheme === 'dark');
13 }, [resolvedTheme]);
14
15 if (checked === undefined) {
16 return null;
17 }
18
19 return (
20 <div>
21 <Switch.Group as="div" className="flex items-center">
22 <Switch
23 checked={isDark}
24 onChange={(status) => {
25 setTheme(status ? 'dark' : 'light');
26 }}
27 className={classNames(
28 isDark ? 'bg-indigo-600' : 'bg-gray-400',
29 'relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500'
30 )}
31 >
32 <span
33 aria-hidden="true"
34 className={classNames(
35 isDark ? 'translate-x-5' : 'translate-x-0',
36 'pointer-events-none inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200'
37 )}
38 />
39 </Switch>
40 <Switch.Label as="span" className="ml-3">
41 <span className="text-sm font-medium cursor-pointer">
42 ダークモード
43 </span>
44 </Switch.Label>
45 </Switch.Group>
46 <div className="p-10 mt-6 rounded-xl shadow dark:bg-slate-800 bg-slate-100">
47 <p>
48 Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quo nihil
49 officiis itaque fuga laudantium, fugiat asperiores? Voluptatibus
50 facere doloremque dicta quo similique, dolores quisquam quos
51 perspiciatis ratione mollitia quibusdam quod.
52 </p>
53 </div>
54 </div>
55 );
56}
