-
Notifications
You must be signed in to change notification settings - Fork 3.7k
Expand file tree
/
Copy paththeme-toggle.tsx
More file actions
66 lines (61 loc) · 1.65 KB
/
Copy paththeme-toggle.tsx
File metadata and controls
66 lines (61 loc) · 1.65 KB
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
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
'use client'
import type { SVGProps } from 'react'
import { useTheme } from 'next-themes'
function SunIcon(props: SVGProps<SVGSVGElement>) {
return (
<svg
xmlns='http://www.w3.org/2000/svg'
width='16'
height='16'
viewBox='0 0 24 24'
fill='none'
stroke='currentColor'
strokeWidth='1.5'
strokeLinecap='round'
strokeLinejoin='round'
{...props}
>
<circle cx='12' cy='12' r='4' />
<path d='M12 2v2' />
<path d='M12 20v2' />
<path d='m4.93 4.93 1.41 1.41' />
<path d='m17.66 17.66 1.41 1.41' />
<path d='M2 12h2' />
<path d='M20 12h2' />
<path d='m6.34 17.66-1.41 1.41' />
<path d='m19.07 4.93-1.41 1.41' />
</svg>
)
}
function MoonIcon(props: SVGProps<SVGSVGElement>) {
return (
<svg
xmlns='http://www.w3.org/2000/svg'
width='16'
height='16'
viewBox='0 0 24 24'
fill='none'
stroke='currentColor'
strokeWidth='1.5'
strokeLinecap='round'
strokeLinejoin='round'
{...props}
>
<path d='M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z' />
</svg>
)
}
export function ThemeToggle() {
const { resolvedTheme, setTheme } = useTheme()
return (
<button
type='button'
onClick={() => setTheme(resolvedTheme === 'dark' ? 'light' : 'dark')}
className='flex size-[30px] cursor-pointer items-center justify-center rounded-lg text-[var(--text-icon)] transition-colors hover:bg-[var(--surface-active)]'
aria-label='Toggle theme'
>
<SunIcon className='block size-[14px] dark:hidden' />
<MoonIcon className='hidden size-[14px] dark:block' />
</button>
)
}