Point de vue : Utilisateur VS Développeur

Introduction

Vous pensez peut-être que le darkmode (la possibilité de switcher entre thème clair et thème sombre) est quelque chose de simplement "logique" ? Que ce n'est qu'une opération binaire ? Voyons ça ensemble.

Idées reçues

Discussion fictive entre un utilisateur et un développeur.

Un bon darkmode, ce n'est pas juste un changement de thème classique et vite fait comme beaucoup le font pour gagner du temps, en choisissant des couleurs qui s'adaptent aussi bien en thème sombre qu'en thème clair. Il faut prévoir deux expériences utilisateurs différentes. Le fait que le fond d'écran passe d'un blanc à un noir n'est qu'un détail par rapport à tout ce qui change "sous le capot".

C'est ici que le boulot commence. Car il faut sélectionner des couleurs dans les deux sens qui vont s'adapter à une certaine logique visuelle. Il faut à la fois ne pas trop "choquer" l'expérience utilisateur, et il faut aussi que les couleurs matchent au niveau de l'accessibilité. C'est un réel respect des contraintes qu'il faut appréhender.

Ensuite, on stocke ces couleurs dans des variables, et il faut placer ces variables sur tous les éléments que l'on souhaite modifier lors du "switch". Oui, c'est le genre de fonctionnalité qu'il vaut mieux prévoir au démarrage d'un site ou d'une application, sinon c'est un boulot énorme. Sans parler des animations de transition pour le passage entre les deux thèmes si on ne veut pas d'un truc qui change juste de couleur de manière brute (et inesthétique).

Flicker, mismatch et hydratation

Discussion fictive entre un utilisateur et un développeur.

Le "switch" fonctionne, par contre quand vous réinitialisez votre page, lorsque vous êtes en thème sombre, vous voyez un flash lumineux quelques millièmes de seconde avant que votre thème apparaisse à l'écran. Et le propre d'un flash, c'est que ça se voit !

On appelle ça le "flicker" et quand on est soigneux et soucieux du travail bien fait, on n'aime pas ça.

Question fictive d'un utilisateur.

Cela provient du fait que de votre côté, sur votre navigateur (Chrome, Firefox, etc.) vous, vous savez quel thème vous appliquez, vous avez votre repère visuel. Mais derrière, quand vous réinitialisez votre page, ce qu'il se passe c'est que le serveur (le truc qui contient tous les fichiers qui contiennent le code du site sur lequel vous êtes) vous envoie une page Html (ce que vous voyez à l'écran) sans savoir quel thème vous souhaitez, donc il vous envoie un thème par défaut qui est souvent le thème clair, ou bien celui paramétré directement sur votre ordinateur.

Le hic, c'est que par défaut, si vous vous positionnez sur le thème sombre et que vous demandez le thème sombre quand vous avez réinitialisé la page, bah le pauvre serveur il n'en savait rien, donc vous l'anticipez.

Littéralement, le serveur vous envoie "blanc", et votre navigateur corrige rapidement en "noir", ce qui fait que votre thème est très brièvement blanc avant d'être sombre. C'est ça le "flicker".

Pour couronner le tout, votre navigateur détecte que le serveur a envoyé quelque chose et que le rendu appliqué est différent, ce qui génère une erreur de "mismatch" lors de "l'hydratation" de la page.

"Hydratation"... Vous voyez quand vous êtes à la mer l'été ? Vous vous mettez de la crème solaire ? Bah ici c’est comme si vous mettiez une crème magique sur une statue de sable pour qu’elle devienne vivante.

En gros, le navigateur reçoit la page Html (ce que vous vous apprêtez à voir à l'écran) envoyée par le serveur, elle est dite "statique", complètement immobile. Il lui applique donc la crème magique. Il l'hydrate. Cette crème c'est du code JavaScript qu'il va appliquer à toute la page pour qu'elle passe de "statique" à "interactive". Voilà ce que fait le processus d'hydratation.

Cette erreur de "mismatch" est logique puisqu'il s'agit là d'un problème de synchronisation entre ce que vous envoie le serveur et ce que le navigateur affiche (c'est comme si votre navigateur vous prenait en flagrant délit d'incohérence : message d'erreur). C'est ça le "mismatch".

La solution

Question fictive d'un utilisateur.

Effectivement, il faut prévoir les deux possibilités et pas qu'une seule. Il faut à la fois rendre le serveur "malléable" sur cet aspect et faire en sorte que le navigateur concorde avec la logique serveur et communique clairement avec lui.

Non seulement il faut faire ça, mais il faut aussi faire en sorte que votre navigateur connaisse à l'avance le thème voulu, avant que votre page ne s'affiche, sinon, vous n'aurez peut-être plus le problème du "flicker", mais vous aurez toujours l'erreur du "mismatch".

Pour pallier ce problème très répandu dans l'univers web, il existe aujourd'hui des petites "bibliothèques" (en gros c'est des boîtes à outils qui vous proposent plusieurs outils, souvent dans le but de vous faire gagner du temps), qui vous permettent de prendre en charge ces problématiques.

Vantées comme simplifiées car vous avez juste à placer deux ou trois lignes de code, en fait elles camouflent le problème, elles ne le règlent pas. Elles vous résolvent votre problème de "flicker" et ne font que camoufler le message d'erreur pour que ça fasse propre aux yeux du client.

C'est un remake de Matrix : vous voulez la simplicité ? Vous prenez la pilule bleue. vous voulez vous casser les dents mais surtout la vérité et la robustesse ? vous prenez la pilule rouge.

Chez PureKréa, nous choisissons toujours la pilule rouge. Question d'état d'esprit.

L'alternative réside donc ailleurs. Une astuce qui permet de ne plus avoir le "flicker" et de bien synchroniser le serveur avec le navigateur pour cet aspect.

Cette explication détaillée fera l'objet d'un nouvel article dans la partie privée.