search

nuxt-modules / color-mode

Dark and Light mode with auto detection made easy with Nuxt 🌗
https://color-mode.nuxtjs.org
MIT License
1.12k stars 112 forks source link

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

Open plushdohn opened 8 months ago

plushdohn commented 8 months ago

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 commented 8 months ago

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

plushdohn commented 8 months ago

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 commented 8 months ago

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

plushdohn commented 8 months ago

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 commented 6 months ago

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 commented 6 months ago

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?

soylomass commented 1 month ago

@plushdohn Have you solved this? I'm trying to set colorMode.preference on ssr but it doesn't work.