index.tsx raw

   1  import { Button } from '@/components/ui/button'
   2  import { useTheme } from '@/providers/ThemeProvider'
   3  import { Moon, Sun, SunMoon } from 'lucide-react'
   4  import { useTranslation } from 'react-i18next'
   5  
   6  export default function ThemeToggle() {
   7    const { t } = useTranslation()
   8    const { themeSetting, setThemeSetting } = useTheme()
   9  
  10    return (
  11      <>
  12        {themeSetting === 'system' ? (
  13          <Button
  14            variant="ghost"
  15            size="titlebar-icon"
  16            onClick={() => setThemeSetting('light')}
  17            title={t('switch to light theme')}
  18          >
  19            <SunMoon />
  20          </Button>
  21        ) : themeSetting === 'light' ? (
  22          <Button
  23            variant="ghost"
  24            size="titlebar-icon"
  25            onClick={() => setThemeSetting('dark')}
  26            title={t('switch to dark theme')}
  27          >
  28            <Sun />
  29          </Button>
  30        ) : (
  31          <Button
  32            variant="ghost"
  33            size="titlebar-icon"
  34            onClick={() => setThemeSetting('system')}
  35            title={t('switch to system theme')}
  36          >
  37            <Moon />
  38          </Button>
  39        )}
  40      </>
  41    )
  42  }
  43