-
-
Notifications
You must be signed in to change notification settings - Fork 8
/
theme-switch.tsx
65 lines (60 loc) · 1.59 KB
/
theme-switch.tsx
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
import { useLocalStorage } from 'foxact/use-local-storage'
import { Button } from '@/components/ui/button'
const builtinColors = [
'zinc',
'slate',
'stone',
'gray',
'neutral',
'red',
'rose',
'orange',
'green',
'blue',
'yellow',
'violet',
] as const
const builtinRadiuses = [0, 0.3, 0.5, 0.75, 1] as const
export function ThemeSwitch() {
const [currentColor, setCurrentColor] = useLocalStorage<
(typeof builtinColors)[number]
>('currentColor', 'neutral')
const [currentRadius, setCurrentRadius] = useLocalStorage<
(typeof builtinRadiuses)[number]
>('currentRadius', 0.5)
return (
<div className="space-y-4">
<p>Color</p>
<div className="grid grid-cols-6 gap-2">
{builtinColors.map(color => (
<Button
key={color}
onClick={() => {
document.body.classList.remove(`theme-${currentColor}`)
document.body.classList.add(`theme-${color}`)
setCurrentColor(color)
}}
variant={color === currentColor ? 'default' : 'secondary'}
>
{color}
</Button>
))}
</div>
<p>Radius</p>
<div className="flex gap-2">
{builtinRadiuses.map(radius => (
<Button
key={radius}
onClick={() => {
document.body.style.setProperty('--radius', `${radius}rem`)
setCurrentRadius(radius)
}}
variant={radius === currentRadius ? 'default' : 'secondary'}
>
{radius}
</Button>
))}
</div>
</div>
)
}