Nuxt•4d ago

nuxt color mode on SSG

Hi there, I'm new to nuxt. To add dark mode to my Cloudflare-hosted website, I'm using nuxt color mode module and Tailwind CSS. I discovered that when I visit my website with the theme in light mode, the button in the images—which is the sun logo for light mode and the moon icon for dark mode—is set to moon even for a second or so then changes to sun icon when the page loads in light mode. When the page loads in dark mode, it works perfectly. Is there anyone who can teach me how to solve this problem? I'm sorry if the english is bad. I used translator

Nuxt

Color-mode · Nuxt Modules

Dark and Light mode for Nuxt with auto detection

Nuxt Tailwind

Tailwind CSS for Nuxt

Add Tailwind CSS to your Nuxt Applications.

2 Replies

kapa.ai•4d ago

Hi @eitaar. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Thank you for your question about Nuxt color mode with SSG (Static Site Generation). I understand you're experiencing an issue with the color mode icon flickering when the page loads in light mode. Let me help you with this based on the information available in the knowledge sources. The issue you're experiencing is likely related to how the color mode is applied during the initial page load. This can happen because the initial state is set before the client-side JavaScript has a chance to determine the correct color mode. To address this issue, you can try the following approaches: 1. Use the colorMode.preference setting in your nuxt.config.ts: You can set a default preference for the color mode. This might help reduce the flickering effect. Here's how you can do it:

   export default defineNuxtConfig({
     colorMode: {
       preference: 'light' // or 'dark' or 'system'
     }
   })

   export default defineNuxtConfig({
     colorMode: {
       preference: 'light' // or 'dark' or 'system'
     }
   })

Source: Getting-started > Theming (https://ui.nuxt.com/getting-started/theming#dark-mode) 2. Use the ClientOnly component: Wrap your color mode toggle button in a ClientOnly component. This ensures that the button is only rendered on the client-side, which can help prevent the initial flicker:

   <template>
     <ClientOnly>
       <UButton
         :icon="isDark ? 'i-heroicons-moon-20-solid' : 'i-heroicons-sun-20-solid'"
         color="gray"
         variant="ghost"
         aria-label="Theme"
         @click="isDark = !isDark"
       />
       <template #fallback>
         <div class="w-8 h-8" />
       </template>
     </ClientOnly>
   </template>

   <template>
     <ClientOnly>
       <UButton
         :icon="isDark ? 'i-heroicons-moon-20-solid' : 'i-heroicons-sun-20-solid'"
         color="gray"
         variant="ghost"
         aria-label="Theme"
         @click="isDark = !isDark"
       />
       <template #fallback>
         <div class="w-8 h-8" />
       </template>
     </ClientOnly>
   </template>

Source: Getting-started > Theming (https://ui.nuxt.com/getting-started/theming#dark-mode) 3. Set the color mode preference in app.vue: If you want to ensure that all pages use a specific color mode by default, you can set it up in your app.vue file:

   <script setup>
   const colorMode = useColorMode();
   colorMode.preference = 'light'; // or 'dark'
   </script>

   <script setup>
   const colorMode = useColorMode();
   colorMode.preference = 'light'; // or 'dark'
   </script>

Source: Stack Overflow Post > How to enable dark mode for all for .md pages in @nuxt/content > Conclusion (https://stackoverflow.com/questions/77667618) It's important to note that if you're using local storage to persist the user's color mode preference, this might override your default settings. The @nuxtjs/color-mode module prioritizes reading and using the settings in localStorage over the preference value set in the configuration. If you're still experiencing issues after trying these solutions, you might need to look into more advanced configurations or consider the specific requirements of your Cloudflare hosting setup. I hope these suggestions help you resolve the color mode flickering issue. If you need further assistance or have more questions about Nuxt, please don't hesitate to ask. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4d ago

<@1064617191175114943> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Gaming

Programming

nuxt color mode on SSG