Theme.json : configurer les couleurs globales de la charte graphique

On va maintenant commencer à intégrer la charte graphique dans notre site WordPress. Et pour cela, on va définir nos couleurs à l’aide du fameux fichier theme.json dans la section settings > color.

Voici un aperçu des propriétés disponibles :

Préparatifs : normalement, votre designer a préparé une belle couleur dans sa charte ou son design system. Pour ma part, j’aime bien utiliser Coolors pour faire la liste des couleurs principales et des tons alternatifs que je vais déclarer sur mon site :

Pour faire une bonne palette, il faut :

• Une couleur principale, la couleur de la marque ;
• Une couleur opposée, qui servira notamment aux appels à l’action ;
• Sa déclinaison pour l’état au survol ;
• Des couleurs foncées pour les titres et textes,
• Des couleurs claires pour les fonds ;

Une fois que l’on a ça, on peut retourner dans WordPress pour définir cette palette dans le theme.json.

La palette de couleurs

On va commencer par définir la palette de couleurs, qui est la plus importante au final pour notre charte graphique.

Il existe 3 types de couleurs que l’on va pouvoir définir :

• Les couleurs classiques, les plus importantes ;
• Les dégradés, si besoin ;
• Et les duotones, qui permettent d’appliquer un filtre bicolore sur les images.

Voici ce que ça donne dans le JSON :

On va se concentrer pour l’instant uniquement sur les couleurs. Voici comment déclarer chaque couleur de notre palette :

Vous devez indiquer 3 informations pour chaque couleur:

• name : le nom qui sera affiché dans l’interface ;
• slug : le slug unique qui représente la couleur ;
• color : la valeur de la couleur, généralement en hexadécimal.

Vous pouvez d’ailleurs déclarer une couche d’opacité hexadécimale en ajoutant la valeur d’opacité à la fin de votre couleur : #2f1847 deviendrait par exemple #2f1847cc.

Voici à quoi va ressembler votre palette de couleurs. On peut observer nos couleurs dans la rubrique « Thème » :

Dans la suite du cours, on va voir comment retirer les couleurs par défaut de WordPress, ainsi que la possibilité de choisir une couleur personnalisée.

À vous de définir votre charte de nommage. L’essentiel est de vous y tenir.

• Le thème 2024 de WordPress utilise : base / base-2 / contrast / accent ;
• Le thème Ollie utilise : primary / primary-accent / secondary / tertiary.

Ainsi, vous vous assurez que vos compositions adopteront automatiquement les couleurs de la charte sur chacun de vos sites.

On va le revoir plus tard, mais cela va permettre à WordPress de créer des variables CSS que l’on pourra utiliser un peu partout. Voici un exemple en CSS :

Et en JSON :

Les dégradés

Tout comme pour les couleurs, on va pouvoir déclarer des dégradés dans notre thème. Ils pourront avoir 2 couleurs ou plus.

On va cette fois jouer avec la propriété gradients, toujours dans la rubrique settings :

Il faudra là aussi définir un nom qui sera affiché dans l’éditeur, et un slug qui sera l’identifiant unique de votre dégradé.

Dans la propriété gradient, indiquez le CSS du dégradé que vous souhaitez appliquer.

Vous pouvez utiliser un générateur de dégradés CSS pour vous simplifier la tâche car la syntaxe n’est pas toujours évidente.

Vous devriez voir vos dégradés apparaître dans la rubrique « Thème » :

Vous pouvez appliquer tout type de dégradé compatible CSS ici : les linéaires, circulaires ou coniques.

Si besoin, consultez les documentations CSS de MDN pour en savoir plus sur la syntaxe des dégradés linéaires ou circulaires.

Les filtres d’images duotone

Le duotone est un filtre appliqué sur une image en CSS qui permet de lui donner un rendu en deux tons :

Ce n’est pas la fonctionnalité la plus utile du siècle, mais ça pourrait par exemple servir pour passer des images en noir et blanc sans les convertir en amont.

Après tout iOS, le système d’exploitation des smartphones Apple, dispose d’une fonctionnalité équivalente pour les fonds d’écran :

Pour déclarer vos propres duotones bicolores, utilisez cette fois la propriété duotone :

Indiquez un nom, un slug et 2 couleurs dans un tableau sous la propriété colors.

Pour l’instant, vos duotones seront mélangés avec ceux par défaut, mais on va justement voir d’ici la fin de ce cours comment les retirer.

Activer ou désactiver les couleurs globales

Comme on a pu le voir dans le cours sur les fonctionnalités de Gutenberg, l’éditeur de thème nous permet de configurer les couleurs globales de divers éléments primitifs du site dans Apparence > Éditeur > Styles.

Les couleurs des textes, des liens, des légendes, des boutons, du fond du site et des titres peuvent être configurées globalement, en amont même des blocs.

Pour reprendre l’approche de l’atomic design : si nos blocs sont des molécules, ces éléments primitifs sont des atomes.

Si vous souhaitez désactiver la possibilité de modifier certains de ces éléments, vous pouvez les désactiver à partir du theme.json :

En tant que développeur, on va bientôt voir comment configurer ces valeurs globales directement à partir du theme.json. Donc peu importe si on laisse ou non ces réglages dans l’éditeur.

Désactiver les couleurs d’un bloc en particulier

Il est possible de désactiver le choix des couleurs pour des blocs en particulier. Ça peut être très pratique si vous voulez retirer la possibilité de mettre une couleur de fond à un paragraphe par exemple.

Du coup, au lieu de configurer le réglage globalement, on va le configurer au niveau du bloc directement. Pour cela, on va aller dans la rubrique settings > blocks de notre theme.json :

Dans cet exemple, j’ai indiqué que je ne souhaitais pas activer le choix d’une couleur de fond pour les paragraphes.

C’est vraiment dans ce genre de situations que ces réglages de couleurs sont réellement utiles au final ! Cela nous permettra d’avoir plus de granularité dans nos configurations.

Personnaliser les options de la palette de couleurs

On va maintenant voir quelques réglages supplémentaires pour personnaliser les options de la palette, et donc affiner l’expérience utilisateur.

Grâce aux propriétés booléennes présentes dans le theme.json, on va pouvoir désactiver rapidement ce que l’on ne souhaite pas afficher, comme les couleurs par défaut de WordPress par exemple.

Voici le rôle de chaque propriété :

• custom : Désactiver le choix d’une couleur personnalisée ;
• customDuotone : Désactiver le choix d’un duotone personnalisé ;
• customGradient : Désactiver le choix d’un dégradé personnalisé ;
• defaultDuotone : Désactiver les duotones par défaut ;
• defaultGradients : Désactiver les dégradés par défaut ;
• defaultPalette : Désactiver les couleurs par défaut ;

Du côté de la palette de couleurs, on a ceci par défaut :

Si on passe custom et defaultPalette à false, on aura une version bien plus minimaliste de la palette :

C’est mieux non ? Désormais, votre utilisateur pourra appliquer uniquement les couleurs de la charte graphique.

Ce sera la même chose côté dégradés :

Passez customGradient et defaultGradients à false pour ne conserver que les dégradés définis dans votre charte graphique.

Enfin, du côté des images et des duotones, même combat :

Désactivez defaultDuotone et customDuotone si vous souhaitez conserver uniquement ceux définis par votre charte.

Désactiver les dégradés et les duotones

Enfin, il n’existe pas de propriété directe pour complètement désactiver les dégradés et les duotones de votre site.

Pour cela, vous allez devoir appliquer ces réglages :

Il faudra :

• Retirer la personnalisation des duotones / dégradés ;
• Retirer les dégradés / duotones par défaut ;
• Ne pas déclarer de dégradé / duotone ou ne pas mettre la ligne correspondante.

Votre palette va s’en retrouver bien épurée :

Avec ça, vous vous assurez de proposer uniquement les couleurs pleines, issues de votre palette.

Modifier les couleurs dans l’éditeur de styles

Vous allez pouvoir retrouver toutes les couleurs, dégradés et duotones définis précédemment dans l’éditeur de styles du FSE.

Pour cela rendez-vous dans Apparence > Éditeur > Styles. Vous pourrez voir les couleurs de votre palette à droite :

En cliquant sur l’icône en forme d’oeil en haut à droite, vous afficherez le guide de style qui vous permettra d’observer le rendu de chacun des blocs de l’éditeur.

Si vous cliquez sur la palette, vous verrez toutes vos couleurs précédemment déclarées :

Le souci c’est que vous aurez la possibilité d’ajouter de nouvelles couleurs à partir de cette interface. Bien entendu, ce n’est pas une bonne idée, car elles ne seront pas ajoutées au theme.json, mais dans la base de données de WordPress.

Il faudra donc bien se poser la question à terme : est-ce qu’on doit laisser l’accès à notre client au Full Site Editing, ou doit-on leur laisser l’accès uniquement aux contenus (pages, articles).

Pour limiter les droits de votre client, sélectionnez le rôle « éditeur » plutôt que « administrateur ».

Vous pouvez également créer un nouveau rôle sur mesure, et passer la capacité edit_theme_options à false.

Gérer le dark mode

Il existe plusieurs manières de gérer le dark mode en CSS, mais je vais vous montrer une méthode unique qui fonctionne à tous les coups, même avec WordPress et le fichier theme.json. Et le tout, sans utiliser de media query !

---

Et voilà, la section couleurs du theme.json n’a désormais plus de secrets pour vous.

Ces réglages vous permettront d’offrir la meilleur expérience utilisateur possible à vos clients.

À vous de définir le bon dosage entre possibilités et contraintes, en fonction du design sur lequel vous vous basez.

Dans le prochain cours, on va se concentrer sur les réglages d’espacements.