✨ Show dark logo on transparent background

src/css/custom.css

@@ -98,4 +98,12 @@ svg {
 
 .navbar-home-top .navbar__link, .navbar-home-top .navbar__title, .navbar-home-top .navbar__toggle, .navbar-home-top .navbar__items {
   @apply sm:text-white;
+}
+
+.navbar-home #header-logo-dark {
+  @apply block;
+}
+
+.navbar-home-top #header-logo-dark {
+  @apply sm:opacity-100;
 }

src/theme/Logo/index.tsx

@@ -0,0 +1,86 @@
+import React from 'react';
+import Link from '@docusaurus/Link';
+import useBaseUrl from '@docusaurus/useBaseUrl';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import { useThemeConfig, type NavbarLogo } from '@docusaurus/theme-common';
+import ThemedImage from '@theme/ThemedImage';
+import type { Props } from '@theme/Logo';
+
+function LogoThemedImage({
+  logo,
+  alt,
+  imageClassName,
+}: {
+  logo: NavbarLogo;
+  alt: string;
+  imageClassName?: string;
+}) {
+  const sources = {
+    light: useBaseUrl(logo.src),
+    dark: useBaseUrl(logo.srcDark || logo.src),
+  };
+  const themedImage = (
+    <ThemedImage
+      className={logo.className}
+      sources={sources}
+      height={logo.height}
+      width={logo.width}
+      alt={alt}
+      style={logo.style}
+    />
+  );
+
+  // Is this extra div really necessary?
+  // introduced in https://github.com/facebook/docusaurus/pull/5666
+  return imageClassName ? (
+    <div className={`${imageClassName} relative`}>
+      {themedImage}
+      <img
+        src={logo.srcDark}
+        id="header-logo-dark"
+        className={`${logo.className} hidden absolute top-0 right-0 bottom-0 left-0 opacity-0 transition-opacity duration-400`}
+        style={logo.style}
+        alt={alt}
+      />
+    </div>
+  ) : (
+    themedImage
+  );
+}
+
+export default function Logo(props: Props): JSX.Element {
+  const {
+    siteConfig: { title },
+  } = useDocusaurusContext();
+  const {
+    navbar: { title: navbarTitle, logo },
+  } = useThemeConfig();
+
+  const { imageClassName, titleClassName, ...propsRest } = props;
+  const logoLink = useBaseUrl(logo?.href || '/');
+
+  // If visible title is shown, fallback alt text should be
+  // an empty string to mark the logo as decorative.
+  const fallbackAlt = navbarTitle ? '' : title;
+
+  // Use logo alt text if provided (including empty string),
+  // and provide a sensible fallback otherwise.
+  const alt = logo?.alt ?? fallbackAlt;
+
+  return (
+    <Link
+      to={logoLink}
+      {...propsRest}
+      {...(logo?.target && { target: logo.target })}
+    >
+      {logo && (
+        <LogoThemedImage
+          logo={logo}
+          alt={alt}
+          imageClassName={imageClassName}
+        />
+      )}
+      {navbarTitle != null && <b className={titleClassName}>{navbarTitle}</b>}
+    </Link>
+  );
+}