Add system to ThemeSwitch
This commit is contained in:
Pavel Zwerschke
parent
f14179100a
commit
6b4832de7c
@ -1,7 +1,49 @@
|
||||
'use client'
|
||||
|
||||
import { useEffect, useState } from 'react'
|
||||
import { Fragment, useEffect, useState } from 'react'
|
||||
import { useTheme } from 'next-themes'
|
||||
import { Menu, RadioGroup, Transition } from '@headlessui/react'
|
||||
|
||||
const Sun = () => (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
className="h-6 w-6 text-gray-900 dark:text-gray-100"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
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"
|
||||
clipRule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
const Moon = () => (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
className="h-6 w-6 text-gray-900 dark:text-gray-100"
|
||||
>
|
||||
<path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z" />
|
||||
</svg>
|
||||
)
|
||||
const Monitor = () => (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 20 20"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
className="h-6 w-6 text-gray-900 dark:text-gray-100"
|
||||
>
|
||||
<rect x="3" y="3" width="14" height="10" rx="2" ry="2"></rect>
|
||||
<line x1="7" y1="17" x2="13" y2="17"></line>
|
||||
<line x1="10" y1="13" x2="10" y2="17"></line>
|
||||
</svg>
|
||||
)
|
||||
|
||||
const ThemeSwitch = () => {
|
||||
const [mounted, setMounted] = useState(false)
|
||||
@ -15,27 +57,59 @@ const ThemeSwitch = () => {
|
||||
}
|
||||
|
||||
return (
|
||||
<button
|
||||
aria-label="Toggle Dark Mode"
|
||||
onClick={() => setTheme(theme === 'dark' || resolvedTheme === 'dark' ? 'light' : 'dark')}
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
className="h-6 w-6 text-gray-900 dark:text-gray-100"
|
||||
>
|
||||
{mounted && (theme === 'dark' || resolvedTheme === 'dark') ? (
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
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"
|
||||
clipRule="evenodd"
|
||||
/>
|
||||
) : (
|
||||
<path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z" />
|
||||
)}
|
||||
</svg>
|
||||
</button>
|
||||
<div className="mr-5">
|
||||
<Menu as="div" className="relative inline-block text-left">
|
||||
<div>
|
||||
<Menu.Button>{resolvedTheme === 'dark' ? <Moon /> : <Sun />}</Menu.Button>
|
||||
</div>
|
||||
<Transition
|
||||
as={Fragment}
|
||||
enter="transition ease-out duration-100"
|
||||
enterFrom="transform opacity-0 scale-95"
|
||||
enterTo="transform opacity-100 scale-100"
|
||||
leave="transition ease-in duration-75"
|
||||
leaveFrom="transform opacity-100 scale-100"
|
||||
leaveTo="transform opacity-0 scale-95"
|
||||
>
|
||||
<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">
|
||||
<RadioGroup value={theme} onChange={setTheme}>
|
||||
<div className="p-1">
|
||||
<RadioGroup.Option value="light">
|
||||
<Menu.Item>
|
||||
<button className="group flex w-full items-center rounded-md px-2 py-2 text-sm">
|
||||
<div className="mr-2">
|
||||
<Sun />
|
||||
</div>
|
||||
Light
|
||||
</button>
|
||||
</Menu.Item>
|
||||
</RadioGroup.Option>
|
||||
<RadioGroup.Option value="dark">
|
||||
<Menu.Item>
|
||||
<button className="group flex w-full items-center rounded-md px-2 py-2 text-sm">
|
||||
<div className="mr-2">
|
||||
<Moon />
|
||||
</div>
|
||||
Dark
|
||||
</button>
|
||||
</Menu.Item>
|
||||
</RadioGroup.Option>
|
||||
<RadioGroup.Option value="system">
|
||||
<Menu.Item>
|
||||
<button className="group flex w-full items-center rounded-md px-2 py-2 text-sm">
|
||||
<div className="mr-2">
|
||||
<Monitor />
|
||||
</div>
|
||||
System
|
||||
</button>
|
||||
</Menu.Item>
|
||||
</RadioGroup.Option>
|
||||
</div>
|
||||
</RadioGroup>
|
||||
</Menu.Items>
|
||||
</Transition>
|
||||
</Menu>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
@ -11,6 +11,7 @@
|
||||
"lint": "next lint --fix --dir pages --dir app --dir components --dir lib --dir layouts --dir scripts"
|
||||
},
|
||||
"dependencies": {
|
||||
"@headlessui/react": "1.7.17",
|
||||
"@next/bundle-analyzer": "14.0.3",
|
||||
"@tailwindcss/forms": "^0.5.4",
|
||||
"@tailwindcss/typography": "^0.5.9",
|
||||
|
||||
15
yarn.lock
15
yarn.lock
@ -2310,6 +2310,18 @@ __metadata:
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@headlessui/react@npm:1.7.17":
|
||||
version: 1.7.17
|
||||
resolution: "@headlessui/react@npm:1.7.17"
|
||||
dependencies:
|
||||
client-only: ^0.0.1
|
||||
peerDependencies:
|
||||
react: ^16 || ^17 || ^18
|
||||
react-dom: ^16 || ^17 || ^18
|
||||
checksum: 0cdb67747e7f606f78214dac0b48573247779e70534b4471515c094b74addda173dc6a9847d33aea9c6e6bc151016c034125328953077e32aa7947ebabed91f7
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@humanwhocodes/config-array@npm:^0.11.13":
|
||||
version: 0.11.13
|
||||
resolution: "@humanwhocodes/config-array@npm:0.11.13"
|
||||
@ -4222,7 +4234,7 @@ __metadata:
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"client-only@npm:0.0.1":
|
||||
"client-only@npm:0.0.1, client-only@npm:^0.0.1":
|
||||
version: 0.0.1
|
||||
resolution: "client-only@npm:0.0.1"
|
||||
checksum: 0c16bf660dadb90610553c1d8946a7fdfb81d624adea073b8440b7d795d5b5b08beb3c950c6a2cf16279365a3265158a236876d92bce16423c485c322d7dfaf8
|
||||
@ -10941,6 +10953,7 @@ __metadata:
|
||||
version: 0.0.0-use.local
|
||||
resolution: "tailwind-nextjs-starter-blog@workspace:."
|
||||
dependencies:
|
||||
"@headlessui/react": 1.7.17
|
||||
"@next/bundle-analyzer": 14.0.3
|
||||
"@svgr/webpack": ^8.0.1
|
||||
"@tailwindcss/forms": ^0.5.4
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user