Get color-theme while server render

[Kolobok12309]

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

While ssr you can't get user system color theme. It not saved in cookie and browser don't send Sec-CH-Prefers-Color-Scheme

Like this #209, #204, #100

Describe the solution you'd like

Send Accept-CH: Sec-CH-Prefers-Color-Scheme on every request, and read Sec-CH-Prefers-Color-Scheme if it exist

Describe alternatives you've considered

Alternative you can save color-theme in cookie or combine this techniques

Additional context

We use code like this

const themeHeader = 'Sec-CH-Prefers-Color-Scheme';

serverInit(req: IncomingMessage, res: ServerResponse) {
  const cookies = Cookie(req, res);

  const systemTheme = req.headers[
    themeHeader.toLowerCase()
  ] as SystemThemeName;
  const userTheme = cookies.get(storeName) as ThemeName;

  if (systemTheme) this.systemTheme = systemTheme;
  if (userTheme) this.userTheme = userTheme;

  res.setHeader('Accept-CH', themeHeader);
},

[Eschricht]

Since I ran into this issue myself, I created my own version of this module but with slightly less functionality (doesn't support forcing color mode on specific pages).

However, it does support the Sec-CH-Prefers-Color-Scheme header and the preferred color mode is stored in a cookie instead of localStorage, thus it allows full SSR support.

https://github.com/Eschricht/nuxt-color-mode

[toniengelhardt]

Would be amazing to get @Eschricht 's implementation merged into this module.

For context, on my landing page (Promptmetheus) I render two different preview images with NuxtImg based on the color theme. Since it is the LCP it is important that it gets server rendered and not deferred to the client.

With @Eschricht 's module it works perfectly.