From d06c87037a1337490bb03b5d37633b601fb47177 Mon Sep 17 00:00:00 2001
From: pheralb <pablohdez4340@gmail.com>
Date: Sun, 31 Aug 2025 13:43:31 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=9B=A0=EF=B8=8F=20Improve=20svgCard=20com?=
 =?UTF-8?q?ponent=20to=20support=20theme-based=20image=20rendering?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/svgs/svgCard.svelte | 54 +++++++++++++++++++++++-------
 1 file changed, 41 insertions(+), 13 deletions(-)

diff --git a/src/components/svgs/svgCard.svelte b/src/components/svgs/svgCard.svelte
index 4aef7ae..70c4f6d 100644
--- a/src/components/svgs/svgCard.svelte
+++ b/src/components/svgs/svgCard.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
   import type { iSVG } from "@/types/svg";
   import { cn } from "@/utils/cn";
+  import { mode } from "mode-watcher";
 
   // Icons:
   import XIcon from "@lucide/svelte/icons/x";
@@ -31,6 +32,7 @@
   // States:
   let wordmarkSvg = $state<boolean>(false);
   let moreTagsOptions = $state<boolean>(false);
+  let changeThemeMode = $state<boolean>(false);
 
   // Icon Stroke & Size:
   let iconStroke = 1.8;
@@ -68,20 +70,46 @@
   </div>
   <!-- Image -->
   {#if wordmarkSvg == true && svgInfo.wordmark !== undefined}
+    {#if changeThemeMode}
+      <img
+        class={cn("block", globalImageStyles)}
+        src={typeof svgInfo.wordmark !== "string"
+          ? mode.current === "dark"
+            ? svgInfo.wordmark?.light || ""
+            : svgInfo.wordmark?.dark || ""
+          : svgInfo.wordmark || ""}
+        alt={svgInfo.title}
+        title={svgInfo.title}
+        loading="lazy"
+      />
+    {:else}
+      <img
+        class={cn("hidden dark:block", globalImageStyles)}
+        src={typeof svgInfo.wordmark !== "string"
+          ? svgInfo.wordmark?.dark || ""
+          : svgInfo.wordmark || ""}
+        alt={svgInfo.title}
+        title={svgInfo.title}
+        loading="lazy"
+      />
+      <img
+        class={cn("block dark:hidden", globalImageStyles)}
+        src={typeof svgInfo.wordmark !== "string"
+          ? svgInfo.wordmark?.light || ""
+          : svgInfo.wordmark || ""}
+        alt={svgInfo.title}
+        title={svgInfo.title}
+        loading="lazy"
+      />
+    {/if}
+  {:else if changeThemeMode}
     <img
-      class={cn("hidden dark:block", globalImageStyles)}
-      src={typeof svgInfo.wordmark !== "string"
-        ? svgInfo.wordmark?.dark || ""
-        : svgInfo.wordmark || ""}
-      alt={svgInfo.title}
-      title={svgInfo.title}
-      loading="lazy"
-    />
-    <img
-      class={cn("block dark:hidden", globalImageStyles)}
-      src={typeof svgInfo.wordmark !== "string"
-        ? svgInfo.wordmark?.light || ""
-        : svgInfo.wordmark || ""}
+      class={cn("block", globalImageStyles)}
+      src={typeof svgInfo.route !== "string"
+        ? mode.current === "dark"
+          ? svgInfo.route.light
+          : svgInfo.route.dark
+        : svgInfo.route}
       alt={svgInfo.title}
       title={svgInfo.title}
       loading="lazy"