Skip to content

Commit 6b4832d

Browse files
pavelzwpavelzw
committed
Add system to ThemeSwitch
1 parent f141791 commit 6b4832d

File tree

3 files changed

+111
-23
lines changed

3 files changed

+111
-23
lines changed

‎components/ThemeSwitch.tsx‎

Lines changed: 96 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,49 @@
11
'use client'
22

3-
import { useEffect, useState } from 'react'
3+
import { Fragment, useEffect, useState } from 'react'
44
import { useTheme } from 'next-themes'
5+
import { Menu, RadioGroup, Transition } from '@headlessui/react'
6+
7+
const Sun = () => (
8+
<svg
9+
xmlns="http://www.w3.org/2000/svg"
10+
viewBox="0 0 20 20"
11+
fill="currentColor"
12+
className="h-6 w-6 text-gray-900 dark:text-gray-100"
13+
>
14+
<path
15+
fillRule="evenodd"
16+
d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z"
17+
clipRule="evenodd"
18+
/>
19+
</svg>
20+
)
21+
const Moon = () => (
22+
<svg
23+
xmlns="http://www.w3.org/2000/svg"
24+
viewBox="0 0 20 20"
25+
fill="currentColor"
26+
className="h-6 w-6 text-gray-900 dark:text-gray-100"
27+
>
28+
<path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z" />
29+
</svg>
30+
)
31+
const Monitor = () => (
32+
<svg
33+
xmlns="http://www.w3.org/2000/svg"
34+
viewBox="0 0 20 20"
35+
fill="none"
36+
stroke="currentColor"
37+
stroke-width="2"
38+
stroke-linecap="round"
39+
stroke-linejoin="round"
40+
className="h-6 w-6 text-gray-900 dark:text-gray-100"
41+
>
42+
<rect x="3" y="3" width="14" height="10" rx="2" ry="2"></rect>
43+
<line x1="7" y1="17" x2="13" y2="17"></line>
44+
<line x1="10" y1="13" x2="10" y2="17"></line>
45+
</svg>
46+
)
547

648
const ThemeSwitch = () => {
749
const [mounted, setMounted] = useState(false)
@@ -15,27 +57,59 @@ const ThemeSwitch = () => {
1557
}
1658

1759
return (
18-
<button
19-
aria-label="Toggle Dark Mode"
20-
onClick={() => setTheme(theme === 'dark' || resolvedTheme === 'dark' ? 'light' : 'dark')}
21-
>
22-
<svg
23-
xmlns="http://www.w3.org/2000/svg"
24-
viewBox="0 0 20 20"
25-
fill="currentColor"
26-
className="h-6 w-6 text-gray-900 dark:text-gray-100"
27-
>
28-
{mounted && (theme === 'dark' || resolvedTheme === 'dark') ? (
29-
<path
30-
fillRule="evenodd"
31-
d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z"
32-
clipRule="evenodd"
33-
/>
34-
) : (
35-
<path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z" />
36-
)}
37-
</svg>
38-
</button>
60+
<div className="mr-5">
61+
<Menu as="div" className="relative inline-block text-left">
62+
<div>
63+
<Menu.Button>{resolvedTheme === 'dark' ? <Moon /> : <Sun />}</Menu.Button>
64+
</div>
65+
<Transition
66+
as={Fragment}
67+
enter="transition ease-out duration-100"
68+
enterFrom="transform opacity-0 scale-95"
69+
enterTo="transform opacity-100 scale-100"
70+
leave="transition ease-in duration-75"
71+
leaveFrom="transform opacity-100 scale-100"
72+
leaveTo="transform opacity-0 scale-95"
73+
>
74+
<Menu.Items className="absolute right-0 mt-2 w-32 origin-top-right divide-y divide-gray-100 rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:bg-gray-800">
75+
<RadioGroup value={theme} onChange={setTheme}>
76+
<div className="p-1">
77+
<RadioGroup.Option value="light">
78+
<Menu.Item>
79+
<button className="group flex w-full items-center rounded-md px-2 py-2 text-sm">
80+
<div className="mr-2">
81+
<Sun />
82+
</div>
83+
Light
84+
</button>
85+
</Menu.Item>
86+
</RadioGroup.Option>
87+
<RadioGroup.Option value="dark">
88+
<Menu.Item>
89+
<button className="group flex w-full items-center rounded-md px-2 py-2 text-sm">
90+
<div className="mr-2">
91+
<Moon />
92+
</div>
93+
Dark
94+
</button>
95+
</Menu.Item>
96+
</RadioGroup.Option>
97+
<RadioGroup.Option value="system">
98+
<Menu.Item>
99+
<button className="group flex w-full items-center rounded-md px-2 py-2 text-sm">
100+
<div className="mr-2">
101+
<Monitor />
102+
</div>
103+
System
104+
</button>
105+
</Menu.Item>
106+
</RadioGroup.Option>
107+
</div>
108+
</RadioGroup>
109+
</Menu.Items>
110+
</Transition>
111+
</Menu>
112+
</div>
39113
)
40114
}
41115

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@
1111
"lint": "next lint --fix --dir pages --dir app --dir components --dir lib --dir layouts --dir scripts"
1212
},
1313
"dependencies": {
14+
"@headlessui/react": "1.7.17",
1415
"@next/bundle-analyzer": "14.0.3",
1516
"@tailwindcss/forms": "^0.5.4",
1617
"@tailwindcss/typography": "^0.5.9",

‎yarn.lock‎

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2310,6 +2310,18 @@ __metadata:
23102310
languageName: node
23112311
linkType: hard
23122312

2313+
"@headlessui/react@npm:1.7.17":
2314+
version: 1.7.17
2315+
resolution: "@headlessui/react@npm:1.7.17"
2316+
dependencies:
2317+
client-only: ^0.0.1
2318+
peerDependencies:
2319+
react: ^16 || ^17 || ^18
2320+
react-dom: ^16 || ^17 || ^18
2321+
checksum: 0cdb67747e7f606f78214dac0b48573247779e70534b4471515c094b74addda173dc6a9847d33aea9c6e6bc151016c034125328953077e32aa7947ebabed91f7
2322+
languageName: node
2323+
linkType: hard
2324+
23132325
"@humanwhocodes/config-array@npm:^0.11.13":
23142326
version: 0.11.13
23152327
resolution: "@humanwhocodes/config-array@npm:0.11.13"
@@ -4222,7 +4234,7 @@ __metadata:
42224234
languageName: node
42234235
linkType: hard
42244236

4225-
"client-only@npm:0.0.1":
4237+
"client-only@npm:0.0.1, client-only@npm:^0.0.1":
42264238
version: 0.0.1
42274239
resolution: "client-only@npm:0.0.1"
42284240
checksum: 0c16bf660dadb90610553c1d8946a7fdfb81d624adea073b8440b7d795d5b5b08beb3c950c6a2cf16279365a3265158a236876d92bce16423c485c322d7dfaf8
@@ -10941,6 +10953,7 @@ __metadata:
1094110953
version: 0.0.0-use.local
1094210954
resolution: "tailwind-nextjs-starter-blog@workspace:."
1094310955
dependencies:
10956+
"@headlessui/react": 1.7.17
1094410957
"@next/bundle-analyzer": 14.0.3
1094510958
"@svgr/webpack": ^8.0.1
1094610959
"@tailwindcss/forms": ^0.5.4

0 commit comments

Comments
 (0)