| 6 | import { useTranslation } from "react-i18next"; |
| 7 | |
| 8 | export default function ThemeModeSwitch() { |
| 9 | const { t } = useTranslation("settings"); |
| 10 | const [themeMode] = Settings.use("themeMode"); |
| 11 | const isDark = themeMode === "dark"; |
| 12 | |
| 13 | const handleToggle = () => { |
| 14 | Settings.themeMode = isDark ? "light" : "dark"; |
| 15 | }; |
| 16 | |
| 17 | return ( |
| 18 | <Tooltip> |
| 19 | <TooltipTrigger asChild> |
| 20 | <div |
| 21 | className={cn( |
| 22 | "bg-background shadow-xs outline-accent-foreground/10 relative h-6 w-11 cursor-pointer overflow-hidden rounded-full outline-1", |
| 23 | )} |
| 24 | > |
| 25 | {/* Hidden default thumb */} |
| 26 | <Switch |
| 27 | checked={isDark} |
| 28 | onCheckedChange={handleToggle} |
| 29 | className="absolute inset-0 h-full w-full cursor-pointer opacity-0" |
| 30 | /> |
| 31 | {/* Custom thumb with icon */} |
| 32 | <span |
| 33 | className={cn( |
| 34 | "pointer-events-none absolute left-0.5 top-0.5 flex h-5 w-5 items-center justify-center rounded-full transition-all duration-200", |
| 35 | isDark && "translate-x-5", |
| 36 | isDark ? "bg-neutral-300" : "bg-amber-200", |
| 37 | )} |
| 38 | > |
| 39 | {isDark ? <Moon className="h-3 w-3 text-slate-800" /> : <Sun className="h-3 w-3 text-amber-600" />} |
| 40 | </span> |
| 41 | </div> |
| 42 | </TooltipTrigger> |
| 43 | <TooltipContent side="left">{isDark ? t("themeMode.options.dark") : t("themeMode.options.light")}</TooltipContent> |
| 44 | </Tooltip> |
| 45 | ); |
| 46 | } |