Why is my nuxt app color mode configuration not working with the "prefrence : light" ?

[amirsafaricg]

this is my nuxt color mode config in nuxt.config.ts:

colorMode: { classSuffix: '', preference: 'light', fallback: 'light', },

its starting always by default dark mode. how Can i fix it and put the prefrence on system ?

[NenoSun]

I am also having the same issue.

[akncnkoc]

i am also having the same issue

[MuhammadM1998]

TLDR: Try removing color-mode cookie and it should work fine

Just faced this issue and the problem that there was already a color mode cookie with value=system (the default). It looks like the module only creates the cookie if there's none while it should always override it or override when the cookie value != preference.

[damisparks]

It is related to #263

Recommendation

Ideally, you'd like to dark mode by default, Here is what your config should look like. The solution works for me.

export default defineNuxtConfig({
  colorMode: {
    preference: 'dark',
    fallback: 'dark'
  }
})

Note 💡

If you're stuck in light mode even after changing this setting, you might need to remove the nuxt-color-mode entry from your browser's local storage.