Configuration de thèmes dans les applications SSR React-js tutoriel-php.cn

Configuration de thèmes dans les applications SSR React

Patricia Arquette

Libérer： 2025-01-06 00:56:38

original

604 Les gens l'ont consulté

Setting Up Themes in SSR React Applications

Imaginez visiter un site Web qui s'adapte parfaitement à vos préférences, en basculant sans effort entre les thèmes clairs, sombres et basés sur le système.

Cet article continue ma série sur la RSS avec React. Dans l'article de base, nous avons exploré des configurations prêtes pour la production, tandis que dans les techniques avancées, nous avons relevé des défis tels que les erreurs d'hydratation. Nous allons désormais aller plus loin en mettant en œuvre une prise en charge de thèmes robuste qui s'intègre parfaitement à SSR.

Table des matières

Thèmes et RSS
Mise en œuvre
- Installer les dépendances
- Ajouter un cookie à la version du serveur
- Appliquer des thèmes sur le serveur
- Gérer les thèmes sur le client
Conclusion

Thèmes et RSS

Le problème principal est le Flash initial de thème incorrect (FOIT).

Essentiellement, les thèmes consistent simplement à modifier les variables CSS. Dans la plupart des cas, vous travaillerez avec trois thèmes :

Light : L'ensemble par défaut de variables CSS.
Foncé : appliqué lorsque l'option le tag a la classe sombre.
Système : bascule automatiquement en fonction des préférences système de l'utilisateur, en utilisant le (prefers-color-scheme : dark) requête multimédia pour déterminer si le thème doit être sombre ou clair.

Par défaut, le serveur rendra le HTML avec le thème clair et l'enverra au navigateur. Si un utilisateur préfère le thème sombre, il verra un changement de thème visible lors du premier chargement de la page, ce qui perturbera l'expérience utilisateur.

Il existe deux manières principales de résoudre ce problème :