Theme Detector : adaptation automatique au thème
Détecte le CSS du thème, variables Bootstrap, couleurs et icônes afin que les modules s'alignent automatiquement sur le thème actif.
Des modules assortis à votre thème
Les thèmes PrestaShop utilisent différents frameworks CSS, jeux d'icônes, palettes de couleurs et systèmes d'espacement. Un module stylisé pour Classic paraît incorrect dans Hummingbird. Un module conçu pour Hummingbird casse dans Warehouse.
Le Theme Detector résout ce problème en analysant le CSS du thème actif au moment de l'exécution, en extrayant ses jetons de conception et en générant des propriétés CSS personnalisées que les modules utilisent pour leur style.
Ce qu'il détecte
- Framework CSS : Bootstrap 4, Bootstrap 5 ou personnalisé
- Palette de couleurs : couleurs primaire, secondaire, d'accentuation, de succès, de danger et d'avertissement extraites du CSS du thème
- Typographie : familles de polices, tailles, graisses, hauteurs de ligne
- Espacement des composants : valeurs de padding et de gap relevées sur les composants que le thème stylise
- Styles de bordure : valeurs de rayon, couleurs de bordure, motifs d'ombre
- Bordures et ombres : valeurs de rayon, d’épaisseur et de couleur utilisées par les contrôles du thème
Comment ça fonctionne
Le détecteur analyse le CSS compilé du thème, résout les variables et les propriétés personnalisées, et conserve ce qu'il trouve. Les résultats sont mis en cache par requête et rafraîchis selon la fréquence que vous configurez. Les modules référencent ensuite ces valeurs via des propriétés CSS personnalisées, de sorte qu'un bouton de notre module peut reprendre les mêmes border-radius, font-size et couleur que ceux du thème.
Utilisé par 32 modules
Les modules participants produisant un affichage front-end référencent les variables partagées : leur interface se règle sur le thème actif plutôt que sur des valeurs codées en dur.
Les chiffres
- 7 615 lignes de code d'analyse et de détection CSS à l'exécution
- 32 modules qui utilisent les tokens détectés
- Mis en cache et conservé : la détection ne se répète pas à chaque requête
- Thèmes documentés : Classic et Hummingbird
← Retour à Notre pile technologique