zitadel/apps/login/ui/Logo.tsx

import Image from "next/image";

type Props = {
  darkSrc: string;
  lightSrc: string;
  height?: number;
  width?: number;
};

export function Logo({ lightSrc, darkSrc, height = 40, width = 147.5 }: Props) {
  return (
    <>
      <div className="hidden dark:flex">
        <Image
          height={height}
          width={width}
          src={darkSrc}
          alt="logo"
          priority={true}
        />
      </div>
      <div className="flex dark:hidden">
        <Image
          height={height}
          width={width}
          priority={true}
          src={lightSrc}
          alt="logo"
        />
      </div>
    </>
  );
}