Nuxt•3w ago

show me how to make dark mode for nuxt3 with ssr = true

show me how to make dark mode for nuxt3 with ssr = true but every time I f5 it doesn't get out of sync causing the background to have the wrong color for 1s before returning to the previously set color

5 Replies

kapa.ai•3w ago

Hi @Hùng Lê. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- I'll show you how to implement dark mode in Nuxt 3 with SSR enabled while preventing the flash of incorrect theme (FOUC) that happens on page refresh. Setting up Dark Mode in Nuxt 3 Nuxt UI automatically registers the @nuxtjs/color-mode module for you, which handles dark mode functionality. If you're not using Nuxt UI, you'll need to install this module separately. Basic Implementation First, let's look at how to create a color mode toggle button:

<script setup>
const colorMode = useColorMode()

const isDark = computed({
  get() {
    return colorMode.value === 'dark'
  },
  set() {
    colorMode.preference = colorMode.value === 'dark' ? 'light' : 'dark'
  }
})
</script>

<template>
  <ClientOnly v-if="!colorMode?.forced">
    <UButton
      :icon="isDark ? 'i-lucide-moon' : 'i-lucide-sun'"
      color="neutral"
      variant="ghost"
      @click="isDark = !isDark"
    />

    <template #fallback>
      <div class="size-8" />
    </template>
  </ClientOnly>
</template>

<script setup>
const colorMode = useColorMode()

const isDark = computed({
  get() {
    return colorMode.value === 'dark'
  },
  set() {
    colorMode.preference = colorMode.value === 'dark' ? 'light' : 'dark'
  }
})
</script>

<template>
  <ClientOnly v-if="!colorMode?.forced">
    <UButton
      :icon="isDark ? 'i-lucide-moon' : 'i-lucide-sun'"
      color="neutral"
      variant="ghost"
      @click="isDark = !isDark"
    />

    <template #fallback>
      <div class="size-8" />
    </template>
  </ClientOnly>
</template>

This example uses the useColorMode composable to toggle between light and dark modes. The ClientOnly wrapper ensures hydration doesn't cause issues with SSR Link to Color Mode docs. Preventing Flash of Incorrect Theme To prevent the flash of incorrect theme on page refresh (F5), you need to ensure the color mode is properly synchronized between the server and client. Here's how to do it: 1. Configure the color mode module in your nuxt.config.ts:

export default defineNuxtConfig({
  // If you're using Nuxt UI, it's already included
  modules: ['@nuxtjs/color-mode'],
  colorMode: {
    preference: 'system', // default value
    fallback: 'light',    // fallback value if not system preference found
    classSuffix: '',      // This removes the `class` suffix from generated classes
    storageKey: 'nuxt-color-mode' // localStorage key
  }
})

export default defineNuxtConfig({
  // If you're using Nuxt UI, it's already included
  modules: ['@nuxtjs/color-mode'],
  colorMode: {
    preference: 'system', // default value
    fallback: 'light',    // fallback value if not system preference found
    classSuffix: '',      // This removes the `class` suffix from generated classes
    storageKey: 'nuxt-color-mode' // localStorage key
  }
})

2. Add a color-scheme meta tag to your app.vue:

<script setup>
// You can force a specific mode if needed
// const colorMode = useColorMode()
// colorMode.preference = 'dark'
</script>

<template>
  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>
</template>

<script setup>
// You can force a specific mode if needed
// const colorMode = useColorMode()
// colorMode.preference = 'dark'
</script>

<template>
  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>
</template>

3. Add CSS variables for your theme in your main CSS file:

@import "tailwindcss";
@import "@nuxt/ui";

:root {
  --ui-bg: var(--ui-color-neutral-50);
  --ui-text: var(--ui-color-neutral-900);
}

.dark {
  --ui-bg: var(--ui-color-neutral-950);
  --ui-border: var(--ui-color-neutral-900);
}

@import "tailwindcss";
@import "@nuxt/ui";

:root {
  --ui-bg: var(--ui-color-neutral-50);
  --ui-text: var(--ui-color-neutral-900);
}

.dark {
  --ui-bg: var(--ui-color-neutral-950);
  --ui-border: var(--ui-color-neutral-900);
}

This setup uses CSS variables that will be applied immediately when the page loads, preventing the flash of incorrect theme Link to Theme Tokens. Important Note The @nuxtjs/color-mode module will prioritize reading and using the settings in localStorage, regardless of how you set your preference value in the configuration Link to Stack Overflow post. This is why it's important to have the correct fallback value. Using Pre-built Components If you're using Nuxt UI Pro, you can use pre-built components for color mode switching: 1. ColorModeButton:

<template>
  <UColorModeButton />
</template>

<template>
  <UColorModeButton />
</template>

2. ColorModeSwitch:

<template>
  <UColorModeSwitch />
</template>

<template>
  <UColorModeSwitch />
</template>

These components handle all the logic for you and are already optimized for SSR Link to ColorModeButton. By following these steps, you'll have a properly functioning dark mode in your Nuxt 3 application with SSR enabled, without the flash of incorrect theme on page refresh. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3w ago

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

pearbender•4d ago

@kapa.ai Hey, I'm running into the same problem. can you disable local storage and always update the mode light/dark when the os setting changes?

kapa.ai•4d ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- I'm sorry, but the knowledge sources do not explicitly mention a way to disable localStorage for color mode in Nuxt 3 or Nuxt UI, nor do they describe a built-in option to always update the mode based on OS settings without persisting the preference in localStorage. The sources do confirm that the @nuxtjs/color-mode module prioritizes localStorage:

"This method will only work properly if localStorage does not have any color-mode settings. This is because the @nuxtjs/color-mode module will prioritize reading and using the settings in localStorage, regardless of how you set your preference value."

Stack Overflow post There is no documented option in the provided sources to disable localStorage or force the color mode to always follow the OS setting dynamically. If you need this behavior, you may need to look for updates in the official documentation or consider a custom implementation, but the current knowledge sources do not provide a solution for this scenario. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4d ago

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

Gaming

Programming

show me how to make dark mode for nuxt3 with ssr = true

Did you find this page helpful?