Document how to force color mode dynamically (e.g. from a useFetch response)

[plushdohn]

Is your feature request related to a problem? Please describe.

Related to #100. In that issue @Atinux said it's not possible with Nuxt 2, but I still couldn't figure out how to do it with Nuxt 3.

Describe the solution you'd like

I think this might be a good addition to the Force a Color mode section of the docs.

Describe alternatives you've considered

I tried overriding during SSR both useColorMode().preference and useColorMode().value but none of them work, the page still flashes.

Additional context

I'd gladly make a PR to document this if I knew how to do it 😄 Maybe the server plugin can be modified to not only check the meta of the target page during routing but also check if a colorMode.value was manually set?

[Atinux]

What is your use case to depend on a fetch call for forcing the color mode?

[plushdohn]

What is your use case to depend on a fetch call for forcing the color mode?

In my specific case we are using Nuxt as a sort of site builder, and each site can customise its theme which includes light or dark color schemes. I'm aware it's not the best case for a11y as you would probably still want to follow the user's preference, but sites are design-heavy and highly customisable so it's a tradeoff we accept. For now we have to tolerate a light mode flash on dark sites.

The linked issue had another use-case which is forcing the color mode for a specific article in a blog with a call to a CMS.

[Atinux]

Is it for specific pages or for the whole site @plushdohn ?

[plushdohn]

Is it for specific pages or for the whole site @plushdohn ?

Specific for the "public sites" part of the app. The landing page and the dashboard for the site builder obey the user's preferences for color mode.

[Atinux]

One solution would be to use a page middleware @plushdohn that fetch the pages that need to force a specific mode.

See example on https://stackblitz.com/~/edit/github-qvp2nk?file=middleware/color-mode.global.ts

[plushdohn]

Thanks @Atinux, that seems to work but not in our case since our fetch call may fetch thousands of articles, not just a few routes. That said, we might be able to just fetch the next route's info and keep it in cache as it SSRs after middleware.

Although I do wonder if there's a way to simply set the related attribute on the html element during SSR? Since we can already manually set the preference, the problem is just the flash during SSR. What's the blocker for this?