Apply version without custom JS

README.md

@@ -128,17 +128,13 @@ There's a <a href="https://www.youtube.com/watch?v=mpR8ngthqiE" class="external-
 
 ## **Typer**, the FastAPI of CLIs
 
-<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>
+<a href="https://typer.tiangolo.com" class="only-not-mkdocs">
+  <picture>
+    <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" style="width: 20%;">
+  </picture>
+</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/css/custom.css

@@ -212,3 +212,5 @@ Inspired by Termynal's CSS tricks with modifications
   border-bottom: .05rem dotted var(--md-default-fg-color--light);
   cursor: help;
 }
+
+.md-content .only-not-mkdocs { display: none; }

docs/en/docs/index.md

@@ -125,17 +125,18 @@ There's a <a href="https://www.youtube.com/watch?v=mpR8ngthqiE" class="external-
 
 ## **Typer**, the FastAPI of CLIs { #typer-the-fastapi-of-clis }
 
-<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>
+<a href="https://typer.tiangolo.com" class="only-not-mkdocs">
+  <picture>
+    <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" style="width: 20%;">
+  </picture>
+</a>
+<!-- only-mkdocs -->
+<a href="https://typer.tiangolo.com">
+    <img src="https://typer.tiangolo.com/img/logo-margin/logo-margin-vector.svg#only-light" style="width: 20%;">
+    <img src="https://typer.tiangolo.com/img/logo-margin/logo-margin-white-vector.svg#only-dark" style="width: 20%;">
+</a>
+<!-- /only-mkdocs -->
 
 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,36 +174,10 @@ function handleSponsorImages() {
         });
 }
 
-function setupThemeImages() {
-    const updateImages = () => {
-        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;
-            }
-        });
-    }
-
-    new MutationObserver(updateImages).observe(document.body, {
-        attributes: true,
-        attributeFilter: ["data-md-color-scheme"],
-    });
-
-    updateImages();
-}
-
 async function main() {
     setupTermynal();
     showRandomAnnouncement('announce-left', 5000)
     handleSponsorImages();
-    setupThemeImages();
 }
 document$.subscribe(() => {
     main()