File size: 1,080 Bytes
dc06ee7 77ca676 dc06ee7 77ca676 dc06ee7 019f743 77ca676 019f743 29ee1c2 019f743 dc06ee7 019f743 77ca676 019f743 29ee1c2 019f743 dc06ee7 |
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 |
import Button from '@/components/ui/Button'
import useTheme from '@/hooks/useTheme'
import { MoonIcon, SunIcon } from 'lucide-react'
import { useCallback } from 'react'
import { controlButtonVariant } from '@/lib/constants'
import { useTranslation } from 'react-i18next'
/**
* Component that toggles the theme between light and dark.
*/
export default function ThemeToggle() {
const { theme, setTheme } = useTheme()
const setLight = useCallback(() => setTheme('light'), [setTheme])
const setDark = useCallback(() => setTheme('dark'), [setTheme])
const { t } = useTranslation()
if (theme === 'dark') {
return (
<Button
onClick={setLight}
variant={controlButtonVariant}
tooltip={t('header.themeToggle.switchToLight')}
size="icon"
side="bottom"
>
<MoonIcon />
</Button>
)
}
return (
<Button
onClick={setDark}
variant={controlButtonVariant}
tooltip={t('header.themeToggle.switchToDark')}
size="icon"
side="bottom"
>
<SunIcon />
</Button>
)
}
|