67 lines
1.9 KiB
TypeScript
67 lines
1.9 KiB
TypeScript
"use client";
|
|
|
|
import * as React from "react";
|
|
import { Moon, Sun } from "lucide-react";
|
|
import { useTheme } from "next-themes";
|
|
import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
|
|
|
|
export function ModeToggle() {
|
|
const { theme, setTheme, resolvedTheme } = useTheme();
|
|
const mounted = React.useSyncExternalStore(
|
|
() => () => {},
|
|
() => true,
|
|
() => false
|
|
);
|
|
|
|
// If not mounted, do not render anything to avoid mismatch
|
|
if (!mounted) {
|
|
return (
|
|
<div className="border-border bg-background/50 flex items-center gap-1 rounded-full border p-0.5">
|
|
<div className="h-1 w-1 rounded-full p-0" />
|
|
<div className="h-1 w-1 rounded-full p-0" />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const activeTheme = theme === "system" || !theme ? resolvedTheme : theme;
|
|
|
|
const handleToggle = (value: string) => {
|
|
if (!value) return;
|
|
setTheme(value);
|
|
};
|
|
|
|
return (
|
|
<ToggleGroup
|
|
type="single"
|
|
value={activeTheme}
|
|
onValueChange={handleToggle}
|
|
className="border-border bg-background/50 flex items-center gap-1 rounded-full border p-0.5 transition-all"
|
|
>
|
|
<ToggleGroupItem
|
|
value="light"
|
|
size="xs"
|
|
aria-label="Light Mode"
|
|
className={`cursor-pointer rounded-full p-0.5 transition-all ${
|
|
activeTheme === "light"
|
|
? "bg-primary text-primary-foreground"
|
|
: "hover:bg-muted/50 bg-transparent"
|
|
}`}
|
|
>
|
|
<Sun className="h-4 w-4" />
|
|
</ToggleGroupItem>
|
|
<ToggleGroupItem
|
|
value="dark"
|
|
size="xs"
|
|
aria-label="Dark Mode"
|
|
className={`cursor-pointer rounded-full p-0.5 transition-all ${
|
|
activeTheme === "dark"
|
|
? "bg-primary text-primary-foreground"
|
|
: "hover:bg-muted/50 bg-transparent"
|
|
}`}
|
|
>
|
|
<Moon className="h-4 w-4" />
|
|
</ToggleGroupItem>
|
|
</ToggleGroup>
|
|
);
|
|
}
|