diff --git a/docs/src/components/QRCode.astro b/docs/src/components/QRCode.astro
index ec1c8a2..4194df2 100644
--- a/docs/src/components/QRCode.astro
+++ b/docs/src/components/QRCode.astro
@@ -46,7 +46,6 @@ const uniqueId = `qr-${Math.random().toString(36).substr(2, 9)}`;
     (darkModeQR || lightModeQR) && (
         <img
             id={uniqueId}
-            src={lightModeQR}
             alt={alt}
             width={size}
             height={size}
@@ -57,6 +56,20 @@ const uniqueId = `qr-${Math.random().toString(36).substr(2, 9)}`;
     )
 }
 
+<script is:inline define:vars={{ uniqueId, lightModeQR, darkModeQR }}>
+    (function () {
+        const img = document.getElementById(uniqueId);
+        if (!img) return;
+
+        const theme = document.documentElement.getAttribute("data-theme");
+        if (theme === "dark" && darkModeQR) {
+            img.setAttribute("src", darkModeQR);
+        } else if (lightModeQR) {
+            img.setAttribute("src", lightModeQR);
+        }
+    })();
+</script>
+
 <script>
     function updateQRCodes() {
         const theme = document.documentElement.getAttribute("data-theme");
@@ -76,8 +89,10 @@ const uniqueId = `qr-${Math.random().toString(36).substr(2, 9)}`;
         });
     }
 
+    // Set initial theme on page load
     updateQRCodes();
 
+    // Watch for theme changes
     const observer = new MutationObserver((mutations) => {
         mutations.forEach((mutation) => {
             if (