You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
46 lines
1.1 KiB
46 lines
1.1 KiB
import { Button } from '@/components/ui/button' |
|
import { useTheme } from '@/providers/ThemeProvider' |
|
import { Moon, Sun, SunMoon } from 'lucide-react' |
|
import { useTranslation } from 'react-i18next' |
|
|
|
export default function ThemeToggle({ |
|
variant = 'titlebar' |
|
}: { |
|
variant?: 'titlebar' | 'small-screen-titlebar' |
|
}) { |
|
const { t } = useTranslation() |
|
const { themeSetting, setThemeSetting } = useTheme() |
|
|
|
return ( |
|
<> |
|
{themeSetting === 'system' ? ( |
|
<Button |
|
variant={variant} |
|
size={variant} |
|
onClick={() => setThemeSetting('light')} |
|
title={t('switch to light theme')} |
|
> |
|
<SunMoon /> |
|
</Button> |
|
) : themeSetting === 'light' ? ( |
|
<Button |
|
variant={variant} |
|
size={variant} |
|
onClick={() => setThemeSetting('dark')} |
|
title={t('switch to dark theme')} |
|
> |
|
<Sun /> |
|
</Button> |
|
) : ( |
|
<Button |
|
variant={variant} |
|
size={variant} |
|
onClick={() => setThemeSetting('system')} |
|
title={t('switch to system theme')} |
|
> |
|
<Moon /> |
|
</Button> |
|
)} |
|
</> |
|
) |
|
}
|
|
|