Color mode resets to light when opening new tabs (localStorage + SSR)

[Cody3395]

Version

@nuxtjs/color-mode: ^4.0.0
nuxt: ^3.20.2

Reproduction Link

I will attach a screen recording showing the issue.
The bug can also be reproduced directly on https://nuxt.com (its built-in color-mode demo).

Steps to reproduce

1. Use Nuxt 3 SSR with @nuxtjs/color-mode and storage: 'localStorage'.
2. Switch theme from light → dark.
3. Open any page link in a new tab (target="_blank").
4. Repeat quickly by opening multiple links in new tabs in rapid succession.

What is Expected?

• The new tab should load immediately with the correct theme (dark).
• The value in localStorage should stay stable.
• No flash or fallback to light mode should occur.

What is actually happening?

• When opening a new tab, the theme briefly resets to light, then switches back to dark after hydration.
• localStorage temporarily changes from "dark" → "light" → "dark" again.
• When opening tabs quickly, the UI becomes visually inconsistent due to the flicker.

This issue also happens on https://nuxt.com, which indicates it is a general problem with @nuxtjs/color-mode using localStorage in SSR mode.

https://mork.ro/rCcYj#

[SprayDev]

Have same problem with my site. Any updates here?

[sajjad101]

What I’ve noticed is that this issue is not coming from Nuxt itself, but from @nuxtjs/color-mode.

When a new page is opened, before the actual data is applied, it first reads the fallback value (the default data set in the @nuxtjs/color-mode configuration, which is used when no system preference is not available). Then, after the page loads, it updates the theme again.
By introducing a short delay, it’s possible to ensure that the correct data is detected and applied properly

I’m currently investigating this issue and will try to provide an update or fix for color-mode.

[sajjad101]

This isn’t actually a bug — it’s a limitation of SSR and localStorage.
If you store the setting in cookies instead of localStorage, it will work correctly.

colorMode: {
    preference: 'light',
    fallback: 'light',
    classSuffix: '',
    storage: 'cookie', // ✅ 
    storageKey: 'nuxt-color-mode'
  }