Flash de thème de couleur inexacte (pet)

Il y a beaucoup à penser lors de la mise en œuvre d'un thème en mode sombre sur un site Web. Nous avons un énorme guide à ce sujet. Il y a des victoires rapides très intelligentes, mais il y a aussi des choses assez difficiles à réaliser. L'une de ces choses délicates est la façon dont ce n'est pas un mode sombre «basculer» entre l'obscurité et la lumière, mais vraiment trois modes que vous devez soutenir: sombre , léger et utiliser la préférence du système . C'est similaire à la façon dont les préférences audio fonctionnent dans de nombreuses applications, qui vous permettent de choisir très spécifiquement l'entrée ou la sortie audio que vous souhaitez, ou par défaut de la préférence système.

CSS et JavaScript peuvent gérer l'angle de préférence du système, via l'API Préfers-Color-Scheme, mais si la préférence de l'utilisateur a changé et que la préférence est désormais différente de la préférence de l'utilisateur, vous êtes sur le territoire du «flash de thème de couleur inexacte» ou de pant. Ok ok, c'est un acronyme de touche en joues, mais c'est potentiellement un problème visuellement odieux, donc je le garde. C'est dans la même veine que FOT (Flash of Unstyled Text) est pour le chargement des polices.

Le stockage d'une préférence d'utilisateur signifie quelque chose comme un cookie, localstorage ou une sorte de base de données. Si l'accès à ces données signifie exécuter JavaScript, par exemple localStorage.getItem ('Color-Mode-Preference');, alors vous êtes en territoire de pet, car votre javascript est très probablement en cours d'exécution après le premier rendu d'une page, de peur que vous ne retardiez autrement inutilement le rendu de page.

Vous pouvez accéder à un cookie avec un langage côté serveur avant le rendu de page, ce qui signifie que vous pouvez l'utiliser pour sortir quelque chose comme et style en conséquence, ce qui évite habilement le pet, mais cela signifie un site qui a même accès à un langage côté serveur (les sites Jamstack ne le font pas, par exemple).

Allllll que pour dire que j'ai apprécié l'article de Rob Morieson sur le mode Dark car cela n'a pas bamidé sur cette question importante. Il s'agit très spécifiquement de le faire dans Next.js et utilise LocalStorage, mais parce que Next.js est rendu JavaScript, vous pouvez le forcer à vérifier la préférence écrite par l'utilisateur comme la toute première chose qu'il fait. Cela signifie qu'il rendra correctement la première fois (pas de flash). Vous devez désactiver le rendu côté serveur pour que cela fonctionne, ce qui est un compromis noueux.

Je ne suis pas convaincu qu'il existe un bon moyen d'éviter le pet sans langue côté serveur ni rendements de page en retard de force.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!