Un thème sombre qui ne clignote pas
Le thème doit être appliqué avant la première peinture, ce qu'un module différé ne peut pas faire.
IntermédiaireArticle4 étapes12 min
Le clignotement de thème a une seule cause : le thème est appliqué après que le navigateur a déjà peint la page. Tout le reste en découle.
1. Poser les tokens sur la racine
Le thème est porté par un attribut sur <html>, et chaque couleur passe par une variable
CSS. Changer l’attribut re-thème alors toute la page d’un coup, sans qu’aucun composant ne
connaisse le thème courant.
2. Résoudre le thème dans le <head>
Le script doit être en ligne et bloquant. Un module type="module" est différé par
définition : il s’exécutera après la peinture, et le visiteur verra la page changer sous
ses yeux.
3. Faire primer un choix explicite
Sans choix mémorisé, on suit prefers-color-scheme. Avec, le choix gagne — y compris si
la préférence système change ensuite.
4. Vérifier au bon endroit
Un test qui lit l’attribut après chargement passera même si le script est différé. Il faut le lire à la première frame, ce qui est le plus proche de ce que l’œil a vu.