Add @eschricht/nuxt-color-mode module

[Eschricht]

🔗 Linked issue

resolves #1064

❓ Type of change

• 📖 Documentation (updates to the documentation or readme)
• 🐞 Bug fix (a non-breaking change that fixes an issue)
• 👌 Enhancement (improving an existing functionality)
• ✨ New feature (a non-breaking change that adds functionality)
• 🧹 Chore (updates to the build process or auxiliary tools and libraries)
• ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

Added @eschricht/nuxt-color-mode module

[atinux]

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]

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:
nuxt-modules/color-mode#188
nuxt-modules/color-mode#218
nuxt-modules/color-mode#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]

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 nuxt-modules/color-mode#219)

[Eschricht]

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

I'll close this one

[sharifzadesina]

@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]

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]

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

[atinux]

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]

@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.