fumadocs-ui/dist/layouts/shared/theme-toggle.js

The Radix UI version of Fumadocs UI

'use client';

import { cn } from "@fumadocs/ui/cn";
import { jsx } from "react/jsx-runtime";
import { Airplay, Moon, Sun } from "lucide-react";
import { useEffect, useState } from "react";
import { cva } from "class-variance-authority";
import { useTheme } from "next-themes";

//#region src/layouts/shared/theme-toggle.tsx
const itemVariants = cva("size-6.5 rounded-full p-1.5 text-fd-muted-foreground", { variants: { active: {
	true: "bg-fd-accent text-fd-accent-foreground",
	false: "text-fd-muted-foreground"
} } });
const full = [
	["light", Sun],
	["dark", Moon],
	["system", Airplay]
];
function ThemeToggle({ className, mode = "light-dark", ...props }) {
	const { setTheme, theme, resolvedTheme } = useTheme();
	const [mounted, setMounted] = useState(false);
	useEffect(() => {
		setMounted(true);
	}, []);
	const container = cn("inline-flex items-center rounded-full border p-1", className);
	if (mode === "light-dark") {
		const value$1 = mounted ? resolvedTheme : null;
		return /* @__PURE__ */ jsx("button", {
			className: container,
			"aria-label": `Toggle Theme`,
			onClick: () => setTheme(value$1 === "light" ? "dark" : "light"),
			"data-theme-toggle": "",
			children: full.map(([key, Icon]) => {
				if (key === "system") return;
				return /* @__PURE__ */ jsx(Icon, {
					fill: "currentColor",
					className: cn(itemVariants({ active: value$1 === key }))
				}, key);
			})
		});
	}
	const value = mounted ? theme : null;
	return /* @__PURE__ */ jsx("div", {
		className: container,
		"data-theme-toggle": "",
		...props,
		children: full.map(([key, Icon]) => /* @__PURE__ */ jsx("button", {
			"aria-label": key,
			className: cn(itemVariants({ active: value === key })),
			onClick: () => setTheme(key),
			children: /* @__PURE__ */ jsx(Icon, {
				className: "size-full",
				fill: "currentColor"
			})
		}, key))
	});
}

//#endregion
export { ThemeToggle };
//# sourceMappingURL=theme-toggle.js.map