Enable dapps to have a dark logo variant (#3552)

Enable dapps to have a dark logo variant since not all browsers support
svg media queries in img tags.

Author: sea-snake

src/frontend/src/lib/components/ui/AuthorizeHeader.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-  import { isNullish, nonNullish } from "@dfinity/utils";
   import Badge from "$lib/components/ui/Badge.svelte";
   import Ellipsis from "$lib/components/utils/Ellipsis.svelte";
   import { getDapps } from "$lib/legacy/flows/dappsExplorer/dapps.js";
@@ -27,16 +26,27 @@
   <div
     class={[
       "flex shrink-0 items-center justify-center overflow-hidden rounded-2xl",
-      isNullish(dapp?.logoSrc) &&
+      dapp?.logoSrc === undefined &&
         "border-border-tertiary text-fg-primary bg-bg-primary border",
     ]}
   >
-    {#if nonNullish(dapp?.logoSrc)}
+    {#if dapp?.logoSrc !== undefined}
       <img
-        src={dapp?.logoSrc}
-        alt={`${dapp?.name ?? origin} logo`}
-        class="h-16 max-w-50 object-contain"
+        src={dapp.logoSrc}
+        alt={`${dapp.name} logo`}
+        class={[
+          "h-16 max-w-50 object-contain",
+          dapp.logoDarkSrc !== undefined && "dark:hidden",
+        ]}
       />
+      {#if dapp.logoDarkSrc !== undefined}
+        <img
+          src={dapp.logoDarkSrc}
+          alt={`${dapp.name} logo`}
+          class="hidden h-16 max-w-50 object-contain dark:block"
+          aria-hidden="true"
+        />
+      {/if}
     {:else}
       <div class="flex size-16 items-center justify-center" aria-hidden="true">
         <GlobeIcon class="size-6" />

src/frontend/src/lib/icons/caffeine_logo_dark.svg

@@ -690,6 +690,7 @@
     "oneLiner": "Self-writing apps platform: the first complete tech stack designed for AI.",
     "website": "https://caffeine.ai",
     "authOrigins": ["https://caffeine.ai", "https://app.caffeine.ai"],
-    "logo": "caffeine_logo.svg"
+    "logo": "caffeine_logo.svg",
+    "logoDark": "caffeine_logo_dark.svg"
   }
 ]

src/frontend/src/lib/legacy/flows/dappsExplorer/dapps.json

@@ -49,6 +49,15 @@ export class KnownDapp {
     ] as string;
   }
 
+  public get logoDarkSrc(): string | undefined {
+    if (this.descr.logoDark === undefined) {
+      return;
+    }
+    return iconFiles[
+      `/src/frontend/src/lib/icons/${this.descr.logoDark}`
+    ] as string;
+  }
+
   public get name(): string {
     return this.descr.name;
   }