Juste un petit mot pour vous dire qu'aujourd'hui nous avons ajouté un mode sombre personnalisé avec un sélecteur de thème à droite du menu supérieur.
L'implémentation automatique(prefers-color-scheme) a été remplacée par une gestion basée sur le sélecteur [data-theme="dark"] qui permettait d'afficher le thème sombre lorsque l'utilisateur le sélectionnait dans son navigateur. Certains, comme Opera, ont une option"forcer le mode sombre" qui peint une version sombre assez décente, mais avec quelques bugs comme l'inversion des images les affichant en négatif et ne permettant pas de configurer quoi que ce soit.
J'ai choisi d'utiliser HTML et JS insérés avec des éléments GeneratePress et CSS dans un long snippet avec toutes les annotations pour avoir une liste complète de ce qui a été ajusté au cas où je voudrais l'améliorer ou le changer un jour, ainsi que pour avoir un contrôle total sur le chargement des styles et une cohérence visuelle absolue dans tout le site web.
Voici les principales améliorations par rapport à la version automatique :
- Optimisation du rendu : élimination du scintillement et des conflits grâce à une hiérarchie de style CSS unifiée qui garantit le chargement immédiat du thème sombre.
- Cohérence visuelle : ajustement précis des couleurs et des filtres sur les éléments dynamiques (GenerateBlocks, Query Loops, onglets et accordéons) pour éviter les problèmes de lisibilité (couleurs grises sur fond blanc).
- Contrôle des éléments dynamiques : correction des filtres de fusion
(mode mixage)et des opacités dans les images et les menus, afin que des éléments tels que l'icône Polylang ou les cartes de la page documentaire conservent un contraste correct dans toutes les conditions. - Nettoyage technique : débogage des sélecteurs redondants et unification des règles CSS pour faciliter la maintenance future sans impact sur les performances et le CLS.
Ceci, qui peut également être fait avec un plugin, avec les limitations logiques, j'ai décidé de le faire avec du code, non seulement pour m'épargner un plugin, mais aussi pour avoir un contrôle granulaire et un réglage fin pour chaque petit détail et pour pouvoir agir sur l'impact possible qu'il peut avoir sur la vitesse de chargement.
Si quelqu'un est intéressé par le code, ce qui n'est pas grave non plus, il suffit de le siffler et je le posterai ici. Si vous êtes de ceux qui aiment surfer sur le dark web et que vous trouvez quelque chose qui pourrait être amélioré, n'hésitez pas à laisser un commentaire ou à cliquer fort sur le bouton jaune "Report bug" en bas de chaque article.
Je profite également de l'occasion pour vous rappeler que je réalise des travaux d'optimisation de WordPress et, occasionnellement, des migrations et des adaptations de templates GeneratePress avec des blocs GenerateBlocks.
