Nuxt•2d ago

Turning off dark mode in Nuxt 3.16 with Nuxt 4 compatibility mode + Nuxt ui 3

I'm trying to force the light mode to Nuxt UI 3 in a Nuxt 4 compatible project (3.16). I put this in my nuxt.config.ts:

colorMode: {
  preference: 'light',
},

colorMode: {
  preference: 'light',
},

But it doesn't work. All my Nuxt ui 3 elements stay in dark mode (system choice). How cn I force the light mode from a Nuxt 4 compatible set up?

9 Replies

kapa.ai•2d ago

Hi @enti. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To force light mode in a Nuxt 3.16 project with Nuxt 4 compatibility mode and Nuxt UI 3, you should use the ui.colorMode option in your nuxt.config.ts, not the colorMode root option. Nuxt UI 3 automatically registers the @nuxtjs/color-mode module, and its configuration should be nested under the ui key. Here’s how you can force light mode:

export default defineNuxtConfig({
  modules: ['@nuxt/ui'],
  ui: {
    colorMode: {
      preference: 'light',
      fallback: 'light',
      // You can also set 'forced' if you want to prevent switching:
      // forced: 'light'
    }
  }
})

export default defineNuxtConfig({
  modules: ['@nuxt/ui'],
  ui: {
    colorMode: {
      preference: 'light',
      fallback: 'light',
      // You can also set 'forced' if you want to prevent switching:
      // forced: 'light'
    }
  }
})

- Use preference: 'light' to set the default. - Use forced: 'light' if you want to prevent users from switching to dark mode. Important:
If a user has a color mode preference saved in localStorage, it will override your config. You may need to clear localStorage or instruct users to do so for the forced mode to take effect, as the color mode module prioritizes localStorage settings over config values [Stack Overflow]. Summary:
- Place your color mode config under ui in nuxt.config.ts. - Consider using the forced option if you want to lock the mode. - Be aware of localStorage overriding your settings. For more details, see the official Nuxt UI docs on color mode integration [Color Mode - Nuxt UI]. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2d ago

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

entiOP•2d ago

@kapa.ai This solution doesn't work either. My Nuxt ui elements stay in dark mode. I don't have any localstorage saved info. This is my nuxt.config.ts :

ui: {
  colorMode: {
    preference: 'light',
    fallback: 'light',
    forced: 'light',
  },
},

ui: {
  colorMode: {
    preference: 'light',
    fallback: 'light',
    forced: 'light',
  },
},

kapa.ai•2d ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- I'm sorry you're still experiencing issues. Based on the official Nuxt UI documentation, to force light mode, your configuration under the ui key in nuxt.config.ts is correct:

ui: {
  colorMode: {
    preference: 'light',
    fallback: 'light',
    forced: 'light',
  },
},

ui: {
  colorMode: {
    preference: 'light',
    fallback: 'light',
    forced: 'light',
  },
},

The documentation states that Nuxt UI automatically registers the @nuxtjs/color-mode module and that you can configure it using the ui.colorMode option in your nuxt.config.ts file. Setting forced: 'light' should prevent switching and force all components to use light mode [Color Mode - Nuxt UI]. However, if this is not working and you have confirmed there is no localStorage override, the knowledge sources do not provide further troubleshooting steps or known issues for this scenario. There may be a compatibility issue or a bug not covered in the documentation. Summary:
- Your configuration matches the official documentation for forcing light mode. - If it still does not work, the knowledge sources do not contain enough information to resolve this issue further. You may want to check for open issues on the Nuxt UI GitHub repository or seek help in the Nuxt community for this specific compatibility scenario. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2d ago

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

entiOP•2d ago

@kapa.ai Just so you know, you DON'T put these colorMode configurations in ui, but directly at the root of defineNuxtConfig. You were wrong all along

kapa.ai•2d ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Based on the official Nuxt UI documentation, the correct way to configure color mode for Nuxt UI 3 is to place the colorMode configuration under the ui key in your nuxt.config.ts, not at the root level. Here is the relevant example from the documentation:

export default defineNuxtConfig({
  modules: ['@nuxt/ui'],
  ui: {
    colorMode: {
      preference: 'light',
      fallback: 'light',
      forced: 'light'
    }
  }
})

export default defineNuxtConfig({
  modules: ['@nuxt/ui'],
  ui: {
    colorMode: {
      preference: 'light',
      fallback: 'light',
      forced: 'light'
    }
  }
})

This matches what you have already tried [Color Mode - Nuxt UI]. If placing the configuration at the root works for you, that behavior is not documented in the official Nuxt UI sources provided. According to the knowledge sources, the documented and supported approach is to use the ui.colorMode option. If the documented approach does not work in your setup, the knowledge sources do not provide further troubleshooting steps or alternative configuration methods. There may be a compatibility issue or undocumented behavior in your specific environment. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2d ago

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

entiOP•2d ago

Nope, this is the one working :

export default defineNuxtConfig({
  modules: ['@nuxt/ui'],
  colorMode: {
    preference: 'light',
    fallback: 'light',
    forced: 'light',
  },
})

export default defineNuxtConfig({
  modules: ['@nuxt/ui'],
  colorMode: {
    preference: 'light',
    fallback: 'light',
    forced: 'light',
  },
})

Gaming

Programming

Turning off dark mode in Nuxt 3.16 with Nuxt 4 compatibility mode + Nuxt ui 3

Did you find this page helpful?