fix: use black logo when browser prefers light mode

cenotelie · Sep 24, 2024 · 2510af7 · 2510af7
1 parent fb0ebd6
commit 2510af7
Show file tree

Hide file tree

Showing 8 changed files with 46 additions and 14 deletions.
diff --git a/src/webapp/account.html b/src/webapp/account.html
@@ -16,7 +16,11 @@
   <nav class="bg-white border-gray-200 px-4 lg:px-6 py-2.5 dark:bg-gray-800">
       <div class="flex flex-wrap justify-between items-center mx-auto max-w-screen-xl">
           <a href="/webapp/index.html" class="flex items-center">
-              <img src="./logo-white.svg" class="mr-3 h-6 sm:h-9" style="min-width: 200px;" alt="Cratery Logo" />
+              <picture>
+                  <source srcset="./logo-white.svg" media="(prefers-color-scheme: dark)" />
+                  <source srcset="./logo-black.svg" media="(prefers-color-scheme: light)" />
+                  <img src="./logo-white.svg" class="mr-3 h-6 sm:h-9" style="min-width: 200px;" alt="Cratery Logo" />
+              </picture>
           </a>
           <div class="flex items-center lg:order-2">
             <a id="link-admin" href="/webapp/admin.html" style="cursor: pointer;" class="text-gray-800 dark:text-white hover:bg-gray-50 focus:ring-4 focus:ring-gray-300 font-medium rounded-lg text-sm px-4 lg:px-5 py-2 lg:py-2.5 mr-2 dark:hover:bg-gray-700 focus:outline-none dark:focus:ring-gray-800">Admin</a>

diff --git a/src/webapp/admin-jobs-docgen.html b/src/webapp/admin-jobs-docgen.html
@@ -16,7 +16,11 @@
   <nav class="bg-white border-gray-200 px-4 lg:px-6 py-2.5 dark:bg-gray-800">
       <div class="flex flex-wrap justify-between items-center mx-auto max-w-screen-xl">
           <a href="/webapp/index.html" class="flex items-center">
-              <img src="./logo-white.svg" class="mr-3 h-6 sm:h-9" style="min-width: 200px;" alt="Cratery Logo" />
+              <picture>
+                  <source srcset="./logo-white.svg" media="(prefers-color-scheme: dark)" />
+                  <source srcset="./logo-black.svg" media="(prefers-color-scheme: light)" />
+                  <img src="./logo-white.svg" class="mr-3 h-6 sm:h-9" style="min-width: 200px;" alt="Cratery Logo" />
+              </picture>
           </a>
           <div class="flex items-center lg:order-2">
             <a id="link-admin" href="/webapp/admin.html" style="cursor: pointer;" class="text-gray-800 dark:text-white hover:bg-gray-50 focus:ring-4 focus:ring-gray-300 font-medium rounded-lg text-sm px-4 lg:px-5 py-2 lg:py-2.5 mr-2 dark:hover:bg-gray-700 focus:outline-none dark:focus:ring-gray-800">Admin</a>
@@ -254,4 +258,4 @@ <h3 class="mb-3 text-2xl font-bold text-gray-900 dark:text-white">Log</h3>
       }
     }
 </script>
-</html>
+</html>
diff --git a/src/webapp/admin-tokens.html b/src/webapp/admin-tokens.html
@@ -16,7 +16,11 @@
   <nav class="bg-white border-gray-200 px-4 lg:px-6 py-2.5 dark:bg-gray-800">
       <div class="flex flex-wrap justify-between items-center mx-auto max-w-screen-xl">
           <a href="/webapp/index.html" class="flex items-center">
-              <img src="./logo-white.svg" class="mr-3 h-6 sm:h-9" style="min-width: 200px;" alt="Cratery Logo" />
+              <picture>
+                  <source srcset="./logo-white.svg" media="(prefers-color-scheme: dark)" />
+                  <source srcset="./logo-black.svg" media="(prefers-color-scheme: light)" />
+                  <img src="./logo-white.svg" class="mr-3 h-6 sm:h-9" style="min-width: 200px;" alt="Cratery Logo" />
+              </picture>
           </a>
           <div class="flex items-center lg:order-2">
             <a id="link-admin" href="/webapp/admin.html" style="cursor: pointer;" class="text-gray-800 dark:text-white hover:bg-gray-50 focus:ring-4 focus:ring-gray-300 font-medium rounded-lg text-sm px-4 lg:px-5 py-2 lg:py-2.5 mr-2 dark:hover:bg-gray-700 focus:outline-none dark:focus:ring-gray-800">Admin</a>
@@ -266,4 +270,4 @@ <h3 class="mb-3 text-2xl font-bold text-gray-900 dark:text-white">Revoke this to
       });
     }
 </script>
-</html>
+</html>
diff --git a/src/webapp/admin-users.html b/src/webapp/admin-users.html
@@ -16,7 +16,11 @@
   <nav class="bg-white border-gray-200 px-4 lg:px-6 py-2.5 dark:bg-gray-800">
       <div class="flex flex-wrap justify-between items-center mx-auto max-w-screen-xl">
           <a href="/webapp/index.html" class="flex items-center">
-              <img src="./logo-white.svg" class="mr-3 h-6 sm:h-9" style="min-width: 200px;" alt="Cratery Logo" />
+              <picture>
+                  <source srcset="./logo-white.svg" media="(prefers-color-scheme: dark)" />
+                  <source srcset="./logo-black.svg" media="(prefers-color-scheme: light)" />
+                  <img src="./logo-white.svg" class="mr-3 h-6 sm:h-9" style="min-width: 200px;" alt="Cratery Logo" />
+              </picture>
           </a>
           <div class="flex items-center lg:order-2">
             <a id="link-admin" href="/webapp/admin.html" style="cursor: pointer;" class="text-gray-800 dark:text-white hover:bg-gray-50 focus:ring-4 focus:ring-gray-300 font-medium rounded-lg text-sm px-4 lg:px-5 py-2 lg:py-2.5 mr-2 dark:hover:bg-gray-700 focus:outline-none dark:focus:ring-gray-800">Admin</a>
@@ -211,4 +215,4 @@ <h3 class="mb-3 text-2xl font-bold text-gray-900 dark:text-white">Delete this us
       });
     }
 </script>
-</html>
+</html>
diff --git a/src/webapp/admin.html b/src/webapp/admin.html
@@ -16,7 +16,11 @@
   <nav class="bg-white border-gray-200 px-4 lg:px-6 py-2.5 dark:bg-gray-800">
       <div class="flex flex-wrap justify-between items-center mx-auto max-w-screen-xl">
           <a href="/webapp/index.html" class="flex items-center">
-              <img src="./logo-white.svg" class="mr-3 h-6 sm:h-9" style="min-width: 200px;" alt="Cratery Logo" />
+              <picture>
+                  <source srcset="./logo-white.svg" media="(prefers-color-scheme: dark)" />
+                  <source srcset="./logo-black.svg" media="(prefers-color-scheme: light)" />
+                  <img src="./logo-white.svg" class="mr-3 h-6 sm:h-9" style="min-width: 200px;" alt="Cratery Logo" />
+              </picture>
           </a>
           <div class="flex items-center lg:order-2">
             <a id="link-admin" href="/webapp/admin.html" style="cursor: pointer;" class="text-gray-800 dark:text-white hover:bg-gray-50 focus:ring-4 focus:ring-gray-300 font-medium rounded-lg text-sm px-4 lg:px-5 py-2 lg:py-2.5 mr-2 dark:hover:bg-gray-700 focus:outline-none dark:focus:ring-gray-800">Admin</a>
@@ -57,4 +61,4 @@ <h1 class="text-xl font-bold leading-tight tracking-tight text-gray-900 md:text-
 <link href="/webapp/index.css" rel="stylesheet" />
 <script src="/webapp/api.js"></script>
 <script src="/webapp/index.js"></script>
-</html>
+</html>
diff --git a/src/webapp/crate.html b/src/webapp/crate.html
@@ -16,7 +16,11 @@
   <nav class="bg-white border-gray-200 px-4 lg:px-6 py-2.5 dark:bg-gray-800">
       <div class="flex flex-wrap justify-between items-center mx-auto max-w-screen-xl">
           <a href="/webapp/index.html" class="flex items-center">
-              <img src="./logo-white.svg" class="mr-3 h-6 sm:h-9" style="min-width: 200px;" alt="Cratery Logo" />
+              <picture>
+                  <source srcset="./logo-white.svg" media="(prefers-color-scheme: dark)" />
+                  <source srcset="./logo-black.svg" media="(prefers-color-scheme: light)" />
+                  <img src="./logo-white.svg" class="mr-3 h-6 sm:h-9" style="min-width: 200px;" alt="Cratery Logo" />
+              </picture>
           </a>
           <div class="flex items-center lg:order-2">
             <a id="link-admin" href="/webapp/admin.html" style="cursor: pointer;" class="text-gray-800 dark:text-white hover:bg-gray-50 focus:ring-4 focus:ring-gray-300 font-medium rounded-lg text-sm px-4 lg:px-5 py-2 lg:py-2.5 mr-2 dark:hover:bg-gray-700 focus:outline-none dark:focus:ring-gray-800">Admin</a>

diff --git a/src/webapp/index-outdated.html b/src/webapp/index-outdated.html
@@ -16,7 +16,11 @@
   <nav class="bg-white border-gray-200 px-4 lg:px-6 py-2.5 dark:bg-gray-800">
       <div class="flex flex-wrap justify-between items-center mx-auto max-w-screen-xl">
           <a href="/webapp/index.html" class="flex items-center">
-              <img src="./logo-white.svg" class="mr-3 h-6 sm:h-9" style="min-width: 200px;" alt="Cratery Logo" />
+              <picture>
+                  <source srcset="./logo-white.svg" media="(prefers-color-scheme: dark)" />
+                  <source srcset="./logo-black.svg" media="(prefers-color-scheme: light)" />
+                  <img src="./logo-white.svg" class="mr-3 h-6 sm:h-9" style="min-width: 200px;" alt="Cratery Logo" />
+              </picture>
           </a>
           <div class="flex items-center lg:order-2">
             <a id="link-admin" href="/webapp/admin.html" style="cursor: pointer;" class="text-gray-800 dark:text-white hover:bg-gray-50 focus:ring-4 focus:ring-gray-300 font-medium rounded-lg text-sm px-4 lg:px-5 py-2 lg:py-2.5 mr-2 dark:hover:bg-gray-700 focus:outline-none dark:focus:ring-gray-800">Admin</a>
@@ -78,4 +82,4 @@ <h1 class="text-xl font-bold leading-tight tracking-tight text-gray-900 md:text-
     return card;
   }
 </script>
-</html>
+</html>
diff --git a/src/webapp/index.html b/src/webapp/index.html
@@ -16,7 +16,11 @@
   <nav class="bg-white border-gray-200 px-4 lg:px-6 py-2.5 dark:bg-gray-800">
       <div class="flex flex-wrap justify-between items-center mx-auto max-w-screen-xl">
           <a href="/webapp/index.html" class="flex items-center">
-              <img src="./logo-white.svg" class="mr-3 h-6 sm:h-9" style="min-width: 200px;" alt="Cratery Logo" />
+              <picture>
+                  <source srcset="./logo-white.svg" media="(prefers-color-scheme: dark)" />
+                  <source srcset="./logo-black.svg" media="(prefers-color-scheme: light)" />
+                  <img src="./logo-white.svg" class="mr-3 h-6 sm:h-9" style="min-width: 200px;" alt="Cratery Logo" />
+              </picture>
           </a>
           <div class="flex items-center lg:order-2">
             <a id="link-admin" href="/webapp/admin.html" style="cursor: pointer;" class="text-gray-800 dark:text-white hover:bg-gray-50 focus:ring-4 focus:ring-gray-300 font-medium rounded-lg text-sm px-4 lg:px-5 py-2 lg:py-2.5 mr-2 dark:hover:bg-gray-700 focus:outline-none dark:focus:ring-gray-800">Admin</a>
@@ -182,4 +186,4 @@ <h1 class="text-xl font-bold leading-tight tracking-tight text-gray-900 md:text-
     return div;
   }
 </script>
-</html>
+</html>