tailwind dark mode reactive logo

<template>
    <NuxtImg fetchpriority="high" decoding="async" style="color: transparent"  :srcset="srcset"
        :alt="alt" :class="imgClass" />
</template>

<script setup>
const { alt, imgClass, height, width } = defineProps({
    alt: String,
    imgClass: String,
    height: String,
    width: String,
})

// Define reactive state for dark mode
const isDarkMode = ref(false);

// Define image source sets
const srcSet = {
  src: "/images/logo.png",
  srcset: "/images/logo.png, /images/logo-2x.png 2x, /images/logo-3x.png 3x",
};

const darkSrcSet = {
  src: "/images/logo-dark.png",
  srcset: "/images/logo-dark.png, /images/logo-dark-2x.png 2x, /images/logo-dark-3x.png 3x",
};

// Update dark mode state on mount
onMounted(() => {
  // Check dark mode preference
  isDarkMode.value = window.matchMedia("(prefers-color-scheme: dark)").matches;
});

// Compute the srcset attribute based on the color scheme
const srcset = computed(() => {
  const set = isDarkMode.value ? darkSrcSet : srcSet;
  return set.srcset;
});
</script>