nginx-proxy-manager/frontend/src/components/ThemeSwitcher.tsx

import {
	Icon,
	IconButton,
	IconButtonProps,
	useColorMode,
} from "@chakra-ui/react";
import { FiSun, FiMoon } from "react-icons/fi";

import { intl } from "src/locale";

interface ThemeSwitcherProps {
	background?: "normal" | "transparent";
}
function ThemeSwitcher({ background }: ThemeSwitcherProps) {
	const { colorMode, toggleColorMode } = useColorMode();
	const additionalProps: Partial<IconButtonProps> = {};
	if (background === "transparent") {
		additionalProps["backgroundColor"] = "transparent";
	}

	return (
		<IconButton
			onClick={toggleColorMode}
			{...additionalProps}
			aria-label={
				colorMode === "light"
					? intl.formatMessage({ id: "theme.to-dark" })
					: intl.formatMessage({ id: "theme.to-light" })
			}
			icon={<Icon as={colorMode === "light" ? FiMoon : FiSun} />}
		/>
	);
}

export { ThemeSwitcher };