52 apparences pour une même bibliothèque
J’ai développé une collection de 52 thèmes pour tarteaucitron.io Pro. Elle comprend 51 créations originales et le thème Default, qui reprend l’apparence native de tarteaucitron.js. L’objectif n’est pas de changer la façon dont le consentement fonctionne, mais de faciliter l’adaptation de son interface à des sites très différents.
Jusqu’ici, personnaliser un bandeau pouvait nécessiter de reprendre des règles CSS, de vérifier le panneau de gestion et d’ajuster plusieurs éléments séparément. Avec cette collection, j’ai travaillé des ensembles graphiques complets, destinés à être sélectionnés depuis le dashboard Pro.
La galerie interactive permet de comparer les 52 apparences. Le changement s’applique directement au bandeau et au panneau, ce qui donne une idée plus précise du résultat qu’une série de simples vignettes.
Une personnalisation qui concerne toute l’interface
Chaque thème intervient sur le bandeau principal, les boutons, le panneau de gestion, les détails des services, les informations sur les cookies et l’icône permanente. Il ne suffit pas de changer la couleur du bandeau si le panneau ouvert conserve une présentation totalement différente.
J’ai donc cherché à maintenir une cohérence visuelle entre les composants. Cela implique de vérifier les états de survol et de focus, la présentation des choix individuels et les textes qui peuvent varier selon la langue.
Les choix d’acceptation et de refus doivent rester comparables. Un thème ne doit pas rendre le refus moins visible ou utiliser son esthétique pour pousser artificiellement vers une décision. La personnalisation est une question de présentation, pas de modification des règles de consentement.
Trois thèmes pour travailler la lisibilité
A11y Comfort, A11y Compact et A11y Contrast abordent trois contraintes différentes : laisser respirer les textes, limiter l’encombrement et renforcer certaines séparations visuelles. Ils constituent des points de départ graphiques, pas des certifications d’accessibilité.
Dans un article dédié, je détaille leurs différences et les vérifications qui restent nécessaires sur un site réel. Les contrastes, la navigation au clavier, les intitulés accessibles et le comportement au zoom doivent être contrôlés dans l’intégration finale.
Lire l’article sur les trois thèmes axés sur la lisibilité.
Sept thèmes inspirés du sport
Football, Rugby, Basketball, Tennis, Golf, Équitation et Nautique utilisent des références à leurs disciplines respectives. Les couleurs du terrain, du matériel ou de l’environnement donnent une personnalité au bandeau, sans changer les services configurés.
Cette famille peut être utile aux clubs et aux associations, mais elle n’impose aucun choix : un site sportif peut parfaitement préférer une interface minimaliste. Les thèmes sont des propositions visuelles, pas des catégories obligatoires.
Découvrir les sept thèmes sportifs.
Onze thèmes pour les métiers
Hotel, Restaurant, Pastry, Medical, Juridique, Immobilier, Mode, Optic, Spa, Campus et Chantier proposent des directions adaptées à des univers professionnels différents. Certains sont sobres, d’autres utilisent des couleurs plus affirmées.
Pour une agence qui gère plusieurs sites clients, ces thèmes peuvent constituer une base sans recréer toute la feuille CSS à chaque projet. Une charte graphique très spécifique peut évidemment nécessiter un travail complémentaire.
Découvrir les onze thèmes métiers.
Douze thèmes plus expérimentaux
Glitch, Cyberpunk, Arcade, Cosmic, Cosmos Light, Spatial, Vegas, Comic, Miami, Candy, Citron et Origami explorent des références plus libres. Ils empruntent aux jeux vidéo, à la science-fiction, aux enseignes lumineuses ou à la géométrie.
Glitch est mon préféré. Ses décalages et ses accents cyan et magenta montrent jusqu’où une interface peut aller visuellement, à condition de conserver des commandes compréhensibles. Les effets doivent aussi respecter les préférences de réduction des animations.
Découvrir les douze thèmes créatifs.
Et les dix-neuf autres apparences ?
Les autres créations couvrent quatre familles : nature et paysages, thèmes sobres et élégants, références rétro et techniques, et thèmes événementiels ou identitaires. On y retrouve notamment Forest, Ocean, Minimal, Glass, Terminal, Win95, Halloween et France.
Je n’ai pas voulu limiter la collection aux secteurs d’activité. Certains sites cherchent une ambiance particulière, d’autres une interface très discrète, et d’autres encore un thème temporaire pour une période de l’année.
Toutes les apparences, y compris Default, sont accessibles depuis la galerie. Celle-ci permet de les parcourir par famille et de comparer les rendus sans devoir les installer sur un site de production.
Une fonctionnalité Pro, une bibliothèque open source inchangée
La collection est réservée à tarteaucitron.io Pro. La sélection depuis le dashboard vise à rendre le changement de style plus simple et à éviter la maintenance de CSS personnalisés pour chaque thème.
La version open source de tarteaucitron.js conserve sa personnalisation CSS habituelle. Les 51 créations originales ne sont pas intégrées à sa distribution : il s’agit d’une fonctionnalité supplémentaire du service Pro.
Le thème Default reste disponible pour retrouver l’apparence native. C’est aussi un point de comparaison utile pour comprendre ce qui relève de la personnalisation et ce qui appartient au fonctionnement de la bibliothèque.
Tester avant de choisir
Une capture d’écran montre une intention graphique, mais pas le comportement de l’interface. Il faut également ouvrir le panneau, parcourir les services, vérifier les boutons et observer l’affichage sur mobile.
La démonstration interactive des 52 thèmes a précisément été conçue pour cela. Elle permet de passer d’un style à l’autre sur une même interface, puis de revenir à Default.
Les thèmes seront sélectionnables depuis le dashboard Pro. Leur déploiement ne change ni le modèle de consentement de tarteaucitron.js ni les possibilités de personnalisation de la version open source.
