Response header missing on initial page load in incognito mode

[kwiat1990]

I have implemented a theme switcher for my site and initially I check the user's preferences to set the correct color scheme. In order to rea user's preference I set in root.tsx following header:

export const headers: HeadersFunction = () => ({
   "Accept-CH": "sec-ch-prefers-color-scheme",
});

It is perfectly working in Chrome (Version 102.0.5005.115 (Official Build) (x86_64)) but as soon as I switch to incognito mode the header won't be set on initial load. If then the page gets reloaded it will be set. I tried to move the logic to entry.server.tsx but it didn't change that behavior.

Is it normal that in incognito headers won't be set on initial load?

[sergiodxa]

The way client hints like is that the browser will not send any until you first send an Accept-CH header asking for what client hints you want to use.

This means the first time it will not send it, after that any request will go with the client hint header added, outside incognito you already accessed so your web already asked for the hint, in incognito this doesn’t happen so the browser don’t send it until the second request.

Why do you want to use a client hint for this? The value of the client hint for dark mode would be the same you can detect with the color scheme media query, if your CSS use that it will detect light or dark mode automatically and you will not have a flash of incorrect color scheme.

[kwiat1990]

I use Mantine UI, which ships with a useColorScheme hook. Somehow it gets called twice and on the first run it returns always "light". On the other hand, I've also checked how matchMedia will work and considering the fact it can be run first when component mounts, it produces the flash of incorrect color scheme.

I have thought that when a user hit one of my site's URL, the server can send the header sec-ch-prefers-color-scheme back inside the response.

[sergiodxa]

Don’t check the media query with JS, do it with CSS, that’s the only way to avoid the flash of incorrect theme.

[kwiat1990]

That won’t work for me because I use Mantine with its CSS-in-JS approach. I can imagine that with Tailwind it should then work out-of-the-box. I can think of a workaround in which a correct base background color is set directly in CSS and then after everything gets loaded a correct color theme will be also set.