📝 use picture tag with media queries to specify the Type logo for light/dark theme

5 months ago · 5c6ec54729
12 changed files with 72 additions and 1 deletions
--- a/docs/de/docs/index.md
+++ b/docs/de/docs/index.md
@ -1,3 +1,9 @@
+<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>
 # FastAPI { #fastapi }

 <style>
--- a/docs/en/docs/index.md
+++ b/docs/en/docs/index.md
@ -125,7 +125,12 @@ 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>
+<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>

 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>.

--- a/docs/es/docs/index.md
+++ b/docs/es/docs/index.md
@ -1,3 +1,9 @@
+<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>
 # FastAPI { #fastapi }

 <style>
--- a/docs/fr/docs/index.md
+++ b/docs/fr/docs/index.md
@ -1,3 +1,9 @@
+<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>
 # FastAPI { #fastapi }

 <style>
--- a/docs/ja/docs/index.md
+++ b/docs/ja/docs/index.md
@ -1,3 +1,9 @@
+<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>
 # FastAPI { #fastapi }

 <style>
--- a/docs/ko/docs/index.md
+++ b/docs/ko/docs/index.md
@ -1,3 +1,9 @@
+<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>
 # FastAPI { #fastapi }

 <style>
--- a/docs/pt/docs/index.md
+++ b/docs/pt/docs/index.md
@ -1,3 +1,9 @@
+<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>
 # FastAPI { #fastapi }

 <style>
--- a/docs/ru/docs/index.md
+++ b/docs/ru/docs/index.md
@ -1,3 +1,9 @@
+<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>
 # FastAPI { #fastapi }

 <style>
--- a/docs/tr/docs/index.md
+++ b/docs/tr/docs/index.md
@ -1,3 +1,9 @@
+<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>
 # FastAPI { #fastapi }

 <style>
--- a/docs/uk/docs/index.md
+++ b/docs/uk/docs/index.md
@ -1,3 +1,9 @@
+<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>
 # FastAPI { #fastapi }

 <style>
--- a/docs/zh-hant/docs/index.md
+++ b/docs/zh-hant/docs/index.md
@ -1,3 +1,9 @@
+<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>
 # FastAPI { #fastapi }

 <style>
--- a/docs/zh/docs/index.md
+++ b/docs/zh/docs/index.md
@ -1,3 +1,9 @@
+<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>
 # FastAPI { #fastapi }

 <style>