At last no more FART Chrome 93+

For those who like to implement both light and dark themes and want to do that in the most optimized way I have good news for you Google Recently implemented in Chrome > 93 the ability to get the user preference using server-side technologies.

Why is that important? Because just in case you didn't hear the term FART by now it stands for "Flash of inAccurate coloR Theme", the main issue is that if you don't know the user preference before sending a response to a request, you can optimally set the user preferred theme.

Why not optimally? Because you either use javaScript and block the main thread to not display an inaccurate color or you determine the theme in an async way and the inaccurate color might show if the user preference is different from the default theme.

Now both of these solutions are not optimal, one because you don't want a flicker on your app, and two because blocking the main thread to determine the theme will affect the performance, and probably will generate an issue in lighthouse.

The drama of adding a client hint has dragged on for years, I won't search the links on GitHub, but the W3C guys and the Apple guys cried so much that this is a potential privacy issue(coming from the guys that literally wanted to scan all your photos some weeks ago), so Google unilaterally enabled this feature now, and I hope all other major browsers will follow suit.

So the way HTTP client hints work is by opting in with an HTTP header, you can do that by setting the header with any server-side technology or even by using a meta tag. Also, don't forget that client hints don't work if javascript is not enabled in the browser (privacy feature).

Here's a quick example in PHP but the headers are practically the same:

<?php
header('Accept-CH: Sec-CH-Prefers-Color-Scheme');
header('Vary: Sec-CH-Prefers-Color-Scheme');
header('Critical-CH: Sec-CH-Prefers-Color-Scheme');

$userPrefersDark = $_SERVER['HTTP_SEC_CH_PREFERS_COLOR_SCHEME'] === 'dark';
echo $userPrefersDark;

So now you know what CSS to load before anything is sent to the client, I will implement this everywhere even if only chrome supports it, because if the pattern holds most of what chrome implements becomes permanent. I often used experimental features since so many browsers nowadays are based on chrome. Chrome makes sure that using a lot of experimental features only on chrome will not break the app in other browsers, so in other browsers, you will simply fall back on older technology.

Also, the newer Chrome added many PWA features that seem very interesting, and again they went alone, also Apple and Mozilla seem a bit against PWAs having more features(again they cite privacy), at this point is very annoying that browsers can't quickly come to a consensus on some features.

So if you're as excited as my about this feature tehn start implement it everywhere.