wow

src/components/Hero.astro

@@ -40,15 +40,9 @@
             data-node-id="42:10"
         >
             <picture class="contents">
-                <source
-                    id="hero-theme-source"
-                    media="(prefers-color-scheme: dark)"
-                    srcset="/hero-dark.avif"
-                    type="image/png"
-                />
                 <img
                     class="block h-full w-full object-cover object-center transition-[scale,border-radius,box-shadow] duration-500 ease-[var(--ease-out-expo)] hover:z-10 hover:scale-105 hover:rounded-lg hover:shadow-[0_15px_45px_#0006] motion-reduce:transition-none"
-                    src="/hero-light.avif"
+                    src="/hero-dark.avif"
                     alt="벚꽃이 핀 수로에서 보트를 타고 있는 캐릭터"
                     width="3840"
                     height="2160"
@@ -62,31 +56,3 @@
         </div>
     </section>
 </div>
-
-<script>
-    const heroThemeSource =
-        document.querySelector<HTMLSourceElement>("#hero-theme-source");
-
-    if (heroThemeSource) {
-        const syncHeroTheme = () => {
-            const root = document.documentElement;
-
-            if (root.classList.contains("dark")) {
-                heroThemeSource.media = "all";
-                heroThemeSource.srcset = "/hero-dark.avif";
-            } else if (root.classList.contains("light")) {
-                heroThemeSource.media = "all";
-                heroThemeSource.srcset = "/hero-light.avif";
-            } else {
-                heroThemeSource.media = "(prefers-color-scheme: dark)";
-                heroThemeSource.srcset = "/hero-dark.avif";
-            }
-        };
-
-        syncHeroTheme();
-        new MutationObserver(syncHeroTheme).observe(document.documentElement, {
-            attributes: true,
-            attributeFilter: ["class"],
-        });
-    }
-</script>