Nuxt•4mo ago

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

<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>

4 Replies

isakwang•4mo ago

You might be overcomplicating it for yourself. If you are using tailwind you can have to img tags with one hidden in dark and the other in light. That solves it in pure css

abdOP•4mo ago

@isakwang how would you define that in CSS?

<template>
  <NuxtImg
    fetchpriority="high"
    decoding="async"
    style="color: transparent"
    :src="srcSet[0].src"
    :srcset="srcset"
    :alt="alt"
    :class="imgClass"
  />
  <NuxtImg
    fetchpriority="high"
    decoding="async"
    style="color: transparent"
    :src="darkSet[0].src"
    :srcset="darkSet"
    :alt="alt"
    :class="imgClass"
  />
</template>

<template>
  <NuxtImg
    fetchpriority="high"
    decoding="async"
    style="color: transparent"
    :src="srcSet[0].src"
    :srcset="srcset"
    :alt="alt"
    :class="imgClass"
  />
  <NuxtImg
    fetchpriority="high"
    decoding="async"
    style="color: transparent"
    :src="darkSet[0].src"
    :srcset="darkSet"
    :alt="alt"
    :class="imgClass"
  />
</template>

how would i implement that logic?

isakwang•4mo ago

<NuxtImg id='light' class='dark:hidden' /> <NuxtImg id='dark' class=' hidden dark:block' /> and then whatever else you do with classes

abdOP•4mo ago

ok thanks!

Gaming

Programming

tailwind dark mode reactive logo