feat: use css to show dark images

src/components/AutoDarkImage.vue

@@ -1,26 +1,20 @@
 <script setup lang="ts">
-import { usePreferredDark } from '@vueuse/core'
-import { onMounted, ref, watch } from 'vue'
 const props = defineProps<{
   src: string
   srcDark?: string
   alt?: string
 }>()
-
-const url = ref('')
-const isDark = usePreferredDark()
-onMounted(() => {
-  watch(
-    isDark,
-    (newVal) => {
-      const src = newVal ? (props.srcDark ?? props.src) : props.src
-      url.value = src
-    },
-    { immediate: true },
-  )
-})
+const srcDarkValue = `url(${props.srcDark || props.src})`
 </script>
 
 <template>
-  <img :src="url" :alt="alt" />
+  <img class="auto-dark-img" :src="props.src" :alt="alt" />
 </template>
+
+<style lang="css" scoped>
+@media (prefers-color-scheme: dark) {
+  .auto-dark-img {
+    content: v-bind(srcDarkValue);
+  }
+}
+</style>