Browsers are starting to allow passing user preference request headers to the server, if the server asks for them.
For example:
Accept-CH: Sec-CH-Prefers-Color-Scheme
...will ask the browser to forward the user's preferred color scheme: light
or dark
.
This is really useful for providing the correct color scheme styles from the user, without having to do it on the client (a potentially causing a flash of the wrong color scheme).
Just get the color scheme (at the server):
const systemPreferredColorScheme = request.headers.get(
"Sec-CH-Prefers-Color-Scheme"
);
...and serve the corresponding styles.
See more here.