t0ng7u
948780e3fa
Remove hard-coded and capped border radius overrides so shared controls and feature actions consistently follow the active theme radius. - Replace fixed radius utilities with semantic theme-aware radius tokens - Remove redundant `rounded-full` and pixel-based overrides from header, toolbar, Playground, and utility actions - Drop unused `StatusBadge` rounded prop usage - Keep existing component behavior intact while improving global theme consistency
61 lines
2.0 KiB
TypeScript
Vendored
61 lines
2.0 KiB
TypeScript
Vendored
import { useEffect } from 'react'
|
|
import { Check, Moon, Sun } from 'lucide-react'
|
|
import { useTranslation } from 'react-i18next'
|
|
import { cn } from '@/lib/utils'
|
|
import { useTheme } from '@/context/theme-provider'
|
|
import { Button } from '@/components/ui/button'
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuItem,
|
|
DropdownMenuTrigger,
|
|
} from '@/components/ui/dropdown-menu'
|
|
|
|
export function ThemeSwitch() {
|
|
const { t } = useTranslation()
|
|
const { theme, setTheme } = useTheme()
|
|
|
|
/* Update theme-color meta tag
|
|
* when theme is updated */
|
|
useEffect(() => {
|
|
const themeColor = theme === 'dark' ? '#020817' : '#fff'
|
|
const metaThemeColor = document.querySelector("meta[name='theme-color']")
|
|
if (metaThemeColor) metaThemeColor.setAttribute('content', themeColor)
|
|
}, [theme])
|
|
|
|
return (
|
|
<DropdownMenu modal={false}>
|
|
<DropdownMenuTrigger
|
|
render={<Button variant='ghost' size='icon' className='h-9 w-9' />}
|
|
>
|
|
<Sun className='size-[1.2rem] scale-100 rotate-0 transition-all dark:scale-0 dark:-rotate-90' />
|
|
<Moon className='absolute size-[1.2rem] scale-0 rotate-90 transition-all dark:scale-100 dark:rotate-0' />
|
|
<span className='sr-only'>{t('Toggle theme')}</span>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent align='end'>
|
|
<DropdownMenuItem onClick={() => setTheme('light')}>
|
|
{t('Light')}{' '}
|
|
<Check
|
|
size={14}
|
|
className={cn('ms-auto', theme !== 'light' && 'hidden')}
|
|
/>
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem onClick={() => setTheme('dark')}>
|
|
{t('Dark')}
|
|
<Check
|
|
size={14}
|
|
className={cn('ms-auto', theme !== 'dark' && 'hidden')}
|
|
/>
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem onClick={() => setTheme('system')}>
|
|
{t('System')}
|
|
<Check
|
|
size={14}
|
|
className={cn('ms-auto', theme !== 'system' && 'hidden')}
|
|
/>
|
|
</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
)
|
|
}
|