N
Nuxt•2w ago
YoloJoeYolo

Color of Logo does not get updated from SSR prerendering although reference values changes

Hello everyone I am currently fixing a problem regarding my logo and it is a pain in the a.. The first attachment is our logo. In light mode, everything is okay, but when switching/running dark mode, it should display 'omott' in white. Due to SSR it loads initially in black and does not update itself when receiving the actuall colorMode. Does anyone know how I can force an update or fix this mess? I simplified code from my problem can be seen below. Logo.vue: 
<template>
  <img class="h-3/4" src="https://data.something.com/static/logos/K.svg" />
  <img
    class="h-2/4"
    :src="
      colorMode.value == 'light'
        ? 'https://data.something.com/static/logos/omott_black.svg'
        : 'https://data.something.com/static/logos/omott_white.svg'
    "
  />
  {{ colorMode.value }}
</template>
<script setup lang="ts">
const colorMode = useColorMode();
console.log(colorMode.value);
console.log(colorMode.value == 'light');
</script>
<template>
  <img class="h-3/4" src="https://data.something.com/static/logos/K.svg" />
  <img
    class="h-2/4"
    :src="
      colorMode.value == 'light'
        ? 'https://data.something.com/static/logos/omott_black.svg'
        : 'https://data.something.com/static/logos/omott_white.svg'
    "
  />
  {{ colorMode.value }}
</template>
<script setup lang="ts">
const colorMode = useColorMode();
console.log(colorMode.value);
console.log(colorMode.value == 'light');
</script>
No description
No description
2 Replies
kapa.ai
kapa.ai•2w ago
Hi @YoloJoeYolo. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- I understand your frustration with the logo color not updating properly when switching between light and dark modes in Nuxt. This is a common issue with SSR (Server-Side Rendering) where the initial render doesn't reflect the client-side color mode preference. Based on the knowledge sources, there are a few solutions you can implement: Solution 1: Use Nuxt UI's ColorModeImage component If you're using Nuxt UI Pro, you can use the UColorModeImage component which is specifically designed to handle different images for light and dark modes: 
<template>
  <img class="h-3/4" src="<https://data.something.com/static/logos/K.svg"> />
  <UColorModeImage
    class="h-2/4"
    light="<https://data.something.com/static/logos/omott_black.svg">
    dark="<https://data.something.com/static/logos/omott_white.svg">
  />
  {{ colorMode.value }}
</template>
<script setup lang="ts">
const colorMode = useColorMode();
</script>
<template>
  <img class="h-3/4" src="<https://data.something.com/static/logos/K.svg"> />
  <UColorModeImage
    class="h-2/4"
    light="<https://data.something.com/static/logos/omott_black.svg">
    dark="<https://data.something.com/static/logos/omott_white.svg">
  />
  {{ colorMode.value }}
</template>
<script setup lang="ts">
const colorMode = useColorMode();
</script>
This component automatically handles the switching between light and dark mode images ColorModeImage. Solution 2: Use ClientOnly component If you're not using Nuxt UI Pro, wrap your dynamic content in a ClientOnly component to ensure it only renders on the client side where the color mode is properly detected: 
<template>
  <img class="h-3/4" src="<https://data.something.com/static/logos/K.svg"> />
  <ClientOnly>
    <img
      class="h-2/4"
      :src="
        colorMode.value == 'light'
          ? '<https://data.something.com/static/logos/omott_black.svg'>
          : '<https://data.something.com/static/logos/omott_white.svg'>
      "
    />
    <template #fallback>
      <!-- Optional fallback content while client-side rendering happens -->
      <div class="h-2/4"></div>
    </template>
  </ClientOnly>
  {{ colorMode.value }}
</template>
<script setup lang="ts">
const colorMode = useColorMode();
</script>
<template>
  <img class="h-3/4" src="<https://data.something.com/static/logos/K.svg"> />
  <ClientOnly>
    <img
      class="h-2/4"
      :src="
        colorMode.value == 'light'
          ? '<https://data.something.com/static/logos/omott_black.svg'>
          : '<https://data.something.com/static/logos/omott_white.svg'>
      "
    />
    <template #fallback>
      <!-- Optional fallback content while client-side rendering happens -->
      <div class="h-2/4"></div>
    </template>
  </ClientOnly>
  {{ colorMode.value }}
</template>
<script setup lang="ts">
const colorMode = useColorMode();
</script>
This approach is demonstrated in the ColorModeButton example from Nuxt Color Mode documentation. Solution 3: Force a specific color mode If you want to ensure a specific color mode is used, you can set it explicitly in your code: 
<script setup lang="ts">
const colorMode = useColorMode();
// Force dark mode
colorMode.preference = 'dark';
</script>
<script setup lang="ts">
const colorMode = useColorMode();
// Force dark mode
colorMode.preference = 'dark';
</script>
This approach is mentioned in the Stack Overflow post about enabling dark mode. The issue you're experiencing is because the SSR renders with the default or system color mode, and then the client-side JavaScript needs to hydrate and update the DOM based on the actual user preference. By using one of these approaches, you can ensure your logo displays correctly in both light and dark modes. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•2w ago
<@408661804542066691> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Did you find this page helpful?