La plupart des sites Joomla ajoutent un thème sombre avec une extension et un interrupteur. Pourtant, le résultat est souvent une page grise, des légendes illisibles, et un choix que le visiteur doit refaire sur chaque page. Corpus place le mode sombre dans le template lui-même : un réglage pour la première visite, un panneau accessible partout, et un contraste mesuré dans les deux thèmes avant chaque version.
Où régler le mode sombre
Dans l'administration de Joomla, ouvrez d'abord Système, Styles des templates du site, puis votre style Corpus. Ensuite, allez dans l'onglet Theme Customizer, groupe Apparence, sous-groupe Mode sombre. Le champ s'appelle Thème de départ et propose trois valeurs : Suivre le système, Thème clair et Thème sombre. Il tranche donc une seule question, et c'est la bonne : ce que voit un visiteur qui arrive pour la première fois.
Le visiteur a le dernier mot
Votre choix n'enferme personne. Un bouton flottant se pose sur chaque page et ouvre le panneau Paramètres d'affichage, où trois boutons radio proposent le thème clair, le thème sombre ou le réglage du système. Ce bouton ne peut pas être masqué, et c'est voulu. De plus, un second bouton peut apparaître dans le pied de page, avec le libellé de votre choix. La réponse du visiteur est alors gardée par le navigateur sous corpus-theme, et elle gagne sur votre réglage à chaque visite suivante.
Un mode sombre sans clignotement
Le thème est inscrit sur la page par le serveur, dans l'attribut data-theme, avant le premier rendu. Ainsi, la page ne démarre jamais en blanc pour virer au sombre une demi-seconde plus tard. Cela veut dire aussi qu'un visiteur sans JavaScript reçoit quand même le thème que vous avez choisi. Avec Suivre le système, en revanche, le serveur ne peut pas savoir ce que préfère la machine du visiteur : la page part en clair et un court script placé dans l'en-tête corrige avant le premier affichage.
Un contraste mesuré dans les deux thèmes
Un thème sombre se dessine vite et se garde lisible difficilement. Corpus fige la saturation et la clarté : chaque couleur d'accent tombe donc sur une valeur déjà mesurée. Avant chaque version, un script vérifie ainsi chaque couple texte et fond selon les seuils du WCAG 2.1, 4,5:1 pour le texte et 3:1 pour les contrôles, sur les 360 teintes, en thème clair comme en thème sombre. Par ailleurs, le thème sombre emploie une version plus claire de votre teinte : votre identité survit au changement.
Bon à savoir
- Une zone peut ignorer le thème de la page. Dans Layout Configuration, le champ Thème de la zone rend une barre de navigation ou un pied de page sombre en permanence, au-dessus d'un contenu clair.
- Les couleurs des messages, information, succès, avertissement et erreur, gardent leur sens dans les deux thèmes. Autrement dit, elles ne sont jamais repeintes pour s'accorder au fond.
- Les images ne sont pas assombries. Une photographie reste la même en mode sombre, car un filtre changerait l'image au lieu de changer la page.
Enfin, le plus simple pour juger un thème sombre reste de le lire. Ouvrez la démo, appuyez sur le bouton flottant et changez : demo.joomanji.eu.