search

nuxt / modules

Discover the Nuxt modules to add any CMS, Database, UI, Auth and integrations into your Vue application.
https://nuxt.com/modules
MIT License
946 stars 260 forks source link

Add @eschricht/nuxt-color-mode module #1069

Closed Eschricht closed 2 months ago

Eschricht commented 2 months ago

🔗 Linked issue

resolves #1064

❓ Type of change

📚 Description

Added @eschricht/nuxt-color-mode module

atinux commented 2 months ago

Thank you for working on this module, have you considered contributing to the main one?

@nuxtjs/color-mode support SSR and SSG actually (we don't need cookies to support this)

Eschricht commented 2 months ago

Thank you for working on this module, have you considered contributing to the main one?

@nuxtjs/color-mode support SSR and SSG actually (we don't need cookies to support this)

There has been multiple issues / pull requests on the main module to support both cookies and the sec-ch-prefers-color-scheme header but AFAIK there's no progress.

Examples: https://github.com/nuxt-modules/color-mode/pull/188 https://github.com/nuxt-modules/color-mode/issues/218 https://github.com/nuxt-modules/color-mode/issues/209

But I'd happy to help out with the main module if you'd like!

With full SSR support, I mean that it supports fetching system color scheme from the server (via the sec-ch-prefers-color-scheme) on supported browsers and avoid the flickering issue described here

Also, the server cannot access browsers local storage so anything stored there will be resolved on the client only. Using cookies instead solves that issue as those are shared with the server.

atinux commented 2 months ago

I just released the support for cookie storage!

Are you happy to help on sec-ch-prefers-color-scheme header detection? (I guess helping your review on https://github.com/nuxt-modules/color-mode/pull/219)

Eschricht commented 2 months ago

Sweet! I'll take a look at the sec-ch-prefers-color-scheme header during the weekend :+1:

I'll close this one

sharifzadesina commented 2 months ago

@atinux Even with cookie storage it doesn't work with SSR. color mode gets updated only after app mount and interestingly, it is not reactive and usages like: <img :src="/img/logo-${colorMode.value}.svg"> doesn't work for whatever reason. (src stays on the old value and doesn't get update after mount.)

atinux commented 2 months ago

please open an issue there to discuss about it.

it is hard to handle all cases so there are specific reasons why it works this way. like how do you handle pre-rendering or cached pages?

sharifzadesina commented 2 months ago

@atinux I don't have any pre-render or caching if you mean that. by the way @Eschricht's module works without problem.

atinux commented 2 months ago

Yes but when you make a module you need to think of all use cases, this is why I had to make compromises.

BTW, how does it work for you <img> if the preference is system and the server cannot detect the user color mode on the server?

sharifzadesina commented 2 months ago

@atinux I changed the preference from system to light, so we will always have a color mode before mounting. The problem is that the module adds HTML class successfully before mount, but it is not able to detect a valid colorMode.value before mount (even with cookie storage) and it causes a lot of problems. It is supposed to detect user preferences in cookie storage. I need to create a new issue with a demo for you.