Forced Color Mode Per Page Causes Unintended Behavior with nuxt-link in Nuxt3

[lhoucinecherif]

Hi,
I am using Nuxt3 with the colorMode module and fetching page-specific color modes from a Sanity backend. I want to force a specific color mode on certain pages. While the forced color mode works initially, clicking on the active nuxt-link for the current page causes the color mode to change unexpectedly.

Version

@nuxtjs/color-mode: 3.4.1
nuxt: 3.11.2

Reproduction Link

https://stackblitz.com/edit/github-qvp2nk-wgy2hy?file=middleware%2Fcolor-mode.global.ts

Steps to reproduce

1. Navigate to a page with a forced color mode. (light or dark)
2. Click on the active link of the current page.

What is Expected?

When navigating to a page with a forced color mode, the page should stay in the forced color mode, and clicking on the active nuxt-link should not change the color mode.

What is actually happening?

On pages with a forced color mode, clicking on the active link causes the color mode to change unexpectedly.

Thanks.

[atinux]

Nice catch @lhoucinecherif

This is quite weird, I suspect the issue comes from to the fact that you add the meta from a Nuxt middleware which is not called on the same route, but we use router.afterEach which is called anyway:

color-mode/src/runtime/plugin.client.ts

Line 47 in 577d3bd

: to.meta.colorMode

Could you try to use a Nuxt plugin instead an use useRouter().beforeEach() to update to.meta and see if this solves it?