50 lines
1.2 KiB
TypeScript
50 lines
1.2 KiB
TypeScript
'use client'
|
|
|
|
import {
|
|
Select,
|
|
SelectContent,
|
|
SelectItem,
|
|
SelectTrigger,
|
|
SelectValue,
|
|
} from '@/components/ui/select'
|
|
import React, { useState } from 'react'
|
|
|
|
import type { Theme } from './types'
|
|
|
|
import { useTheme } from '..'
|
|
import { themeLocalStorageKey } from './types'
|
|
|
|
export const ThemeSelector: React.FC = () => {
|
|
const { setTheme } = useTheme()
|
|
const [value, setValue] = useState(() =>
|
|
typeof window === 'undefined' ? 'auto' : window.localStorage.getItem(themeLocalStorageKey) ?? 'auto',
|
|
)
|
|
|
|
const onThemeChange = (themeToSet: Theme & 'auto') => {
|
|
if (themeToSet === 'auto') {
|
|
setTheme(null)
|
|
setValue('auto')
|
|
} else {
|
|
setTheme(themeToSet)
|
|
setValue(themeToSet)
|
|
}
|
|
}
|
|
|
|
|
|
return (
|
|
<Select onValueChange={onThemeChange} value={value}>
|
|
<SelectTrigger
|
|
aria-label="Select a theme"
|
|
className="w-auto bg-transparent gap-2 pl-0 md:pl-3 border-none"
|
|
>
|
|
<SelectValue placeholder="Theme" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="auto">Auto</SelectItem>
|
|
<SelectItem value="light">Light</SelectItem>
|
|
<SelectItem value="dark">Dark</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
)
|
|
}
|