Styles et thème

L’apparence de votre site se règle à deux niveaux. D’abord un thème global, qui fixe l’identité visuelle de l’ensemble du site et garantit la cohérence d’une page à l’autre. Ensuite, une personnalisation fine au niveau de chaque composant, pour les cas où vous souhaitez sortir du cadre par défaut. Le bon réflexe est de poser d’abord le thème global, puis de n’affiner que ponctuellement.

Le thème global

Le thème s’applique à tout le site. Il regroupe les choix d’identité visuelle suivants :

• Couleurs : couleur primaire, secondaire, claire, sombre et de fond. Ces couleurs alimentent automatiquement l’ensemble de vos composants.
• Style global des boutons : leur couleur et leur rayon (coins plus ou moins arrondis).
• Style global des liens : leur couleur au repos et leur couleur au survol.
• Polices : les polices de caractères utilisées sur le site.
• Langue : la langue du site, le français étant proposé par défaut.
• PWA : la possibilité de transformer le site en application web installable, que vos invités peuvent ajouter à l’écran d’accueil de leur téléphone.
• Favicon : la petite icône affichée dans l’onglet du navigateur.

Astuce

Renseignez le thème global en premier. Comme les composants héritent de ces réglages, vous obtiendrez instantanément un site cohérent, et vous limiterez les retouches manuelles.

Personnalisation par composant

Lorsqu’un composant a besoin d’un traitement particulier, vous pouvez surcharger le thème localement. Les réglages disponibles couvrent l’essentiel de la mise en forme :

• Couleurs : la ou les couleurs propres au composant.
• Typographie : police, taille, graisse et interligne du texte.
• Espacement : padding (marge intérieure) et marges (espace extérieur).
• Bordures : largeur, couleur, style et rayon des coins.
• Images : largeur, hauteur, rayon des coins et mode d’ajustement (cover, qui remplit le cadre en rognant si besoin, ou contain, qui affiche l’image entière dans le cadre).
• Boutons : taille petite, moyenne ou grande.

Attention

Utilisez la personnalisation par composant avec parcimonie. Trop de réglages locaux rendent le site difficile à maintenir et peuvent nuire à sa cohérence visuelle. Privilégiez le thème global dès que possible.

En pratique

Commencez par définir vos couleurs, vos polices et le style de vos boutons et liens dans le thème global. Vérifiez le rendu sur quelques pages. Ne descendez au niveau du composant que lorsqu’un élément précis le justifie.