tailwind dark mode reactive logo
i am trying to build a pattern where based on the dark mode setting the logo srcset will change.
using nuxt in universal mode
using nuxt in universal mode
<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><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>
