Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Get color-theme while server render #218

Open
Kolobok12309 opened this issue Nov 12, 2023 · 2 comments · May be fixed by #219
Open

Get color-theme while server render #218

Kolobok12309 opened this issue Nov 12, 2023 · 2 comments · May be fixed by #219
Labels
enhancement New feature or request

Comments

@Kolobok12309
Copy link

Kolobok12309 commented Nov 12, 2023

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);
},
@Kolobok12309 Kolobok12309 added the enhancement New feature or request label Nov 12, 2023
@Kolobok12309 Kolobok12309 linked a pull request Nov 12, 2023 that will close this issue
@Eschricht
Copy link

Eschricht commented Jul 2, 2024

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
Copy link

toniengelhardt commented Jul 4, 2024

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants