rhl-lieferscheine/components/app-shell/ThemeToggleButton.jsx

"use client";

import React from "react";
import { Moon, Sun } from "lucide-react";
import { useTheme } from "next-themes";

import { Button } from "@/components/ui/button";
import {
	Tooltip,
	TooltipContent,
	TooltipProvider,
	TooltipTrigger,
} from "@/components/ui/tooltip";

export default function ThemeToggleButton() {
	const { setTheme } = useTheme();

	function toggleTheme() {
		// Read current theme from the DOM class to avoid hydration-unsafe theme reads.
		const isDark =
			typeof document !== "undefined" &&
			document.documentElement.classList.contains("dark");

		setTheme(isDark ? "light" : "dark");
	}

	return (
		<TooltipProvider delayDuration={200}>
			<Tooltip>
				<TooltipTrigger asChild>
					<Button
						type="button"
						variant="ghost"
						size="icon-sm"
						onClick={toggleTheme}
						aria-label="Design umschalten"
					>
						{/* Light mode: show Moon (switch to dark) */}
						<Moon className="h-4 w-4 dark:hidden" aria-hidden="true" />

						{/* Dark mode: show Sun (switch to light) */}
						<Sun className="hidden h-4 w-4 dark:block" aria-hidden="true" />

						<span className="sr-only">Design umschalten</span>
					</Button>
				</TooltipTrigger>

				<TooltipContent side="bottom">Design umschalten</TooltipContent>
			</Tooltip>
		</TooltipProvider>
	);
}