📝 Fix Typer logo light/dark theme for GitHub and MkDocs

README.md

@@ -128,12 +128,7 @@ There's a <a href="https://www.youtube.com/watch?v=mpR8ngthqiE" class="external-
 
 ## **Typer**, the FastAPI of CLIs
 
-<a href="https://typer.tiangolo.com" target="_blank">
-    <picture>
-        <source media="(prefers-color-scheme: dark)" srcset="https://typer.tiangolo.com/img/logo-margin/logo-margin-white-vector.svg#only-dark">
-        <img src="https://typer.tiangolo.com/img/logo-margin/logo-margin-vector.svg" style="width: 20%;">
-    </picture>
-</a>
+<a href="https://typer.tiangolo.com" target="_blank"><img src="https://typer.tiangolo.com/img/logo-margin/logo-margin-vector.svg" style="width: 20%;"></a>
 
 If you are building a <abbr title="Command Line Interface">CLI</abbr> app to be used in the terminal instead of a web API, check out <a href="https://typer.tiangolo.com/" class="external-link" target="_blank">**Typer**</a>.
 

docs/en/docs/index.md

@@ -125,7 +125,17 @@ There's a <a href="https://www.youtube.com/watch?v=mpR8ngthqiE" class="external-
 
 ## **Typer**, the FastAPI of CLIs { #typer-the-fastapi-of-clis }
 
-<a href="https://typer.tiangolo.com" target="_blank"><img src="https://typer.tiangolo.com/img/logo-margin/logo-margin-vector.svg" style="width: 20%;"></a>
+<div>
+  <a href="https://typer.tiangolo.com" target="_blank">
+    <picture
+      data-light-src="https://typer.tiangolo.com/img/logo-margin/logo-margin-vector.svg"
+      data-dark-src="https://typer.tiangolo.com/img/logo-margin/logo-margin-white-vector.svg"
+    >
+      <source media="(prefers-color-scheme: dark)" srcset="https://typer.tiangolo.com/img/logo-margin/logo-margin-white-vector.svg">
+      <img src="https://typer.tiangolo.com/img/logo-margin/logo-margin-vector.svg" alt="Typer" width="20%">
+    </picture>
+  </a>
+</div>
 
 If you are building a <abbr title="Command Line Interface">CLI</abbr> app to be used in the terminal instead of a web API, check out <a href="https://typer.tiangolo.com/" class="external-link" target="_blank">**Typer**</a>.
 

docs/en/docs/js/custom.js

@@ -174,10 +174,25 @@ function handleSponsorImages() {
         });
 }
 
+function setupThemeImages() {
+    new MutationObserver(() => {
+        const scheme = document.body.getAttribute("data-md-color-scheme");
+        const isDark = scheme === "slate";
+        document.querySelectorAll("picture[data-light-src][data-dark-src]").forEach((picture) => {
+            const src = isDark ? picture.dataset.darkSrc : picture.dataset.lightSrc;
+            const source = picture.querySelector("source");
+            const img = picture.querySelector("img");
+            if (source) source.srcset = src;
+            if (img) img.src = src;
+        });
+    }).observe(document.body, { attributes: true, attributeFilter: ["data-md-color-scheme"] });
+}
+
 async function main() {
     setupTermynal();
     showRandomAnnouncement('announce-left', 5000)
     handleSponsorImages();
+    setupThemeImages();
 }
 document$.subscribe(() => {
     main()