Thèmes et apparence

Choisir un thème dans Éclair prend quelques minutes et ne casse rien : contenus, référencement et vitesse restent identiques, seule l'apparence change. Cette leçon passe en revue les 6 thèmes livrés, l'aperçu en direct et chaque réglage de Réglages › Apparence : couleur, polices, logo, en-tête, mode sombre. Fil rouge : Atelier Nova, atelier de céramique à Lyon.

Thème classique ou direction artistique ?

En haut de Réglages › Apparence, la rubrique Style du site propose deux voies. Direction artistique applique un univers complet : palette, police de titre téléchargée, compositions ; c'est l'objet de la leçon sur les directions. Thème classique reste « sobre et polyvalent, polices du système : rien à télécharger ». Cette leçon couvre le thème classique. Si tu essaies une direction, les réglages de ton thème classique restent enregistrés : tu les retrouves intacts en revenant.

Les 6 thèmes livrés

Choisir un thème applique sa couleur, ses polices et sa disposition conseillées : tu peux tout changer ensuite. Pour Atelier Nova, le thème Atelier s'impose presque : tons crème, coins arrondis, ombres douces, idéal pour des photos de pièces en terre. Studio serait l'alternative si les photos sont très soignées : il les met en avant dans un cadre noir et blanc.

Comment choisir un thème avec l'aperçu en direct ?

1. Ouvre Réglages › Apparence et, dans Style du site, choisis Thème classique.
2. Clique sur une carte de thème : l'Aperçu en direct se met à jour sous les cartes.
3. Avec la liste déroulante au-dessus de l'aperçu, passe de l'accueil au blog, à un article, à la boutique ou à un produit. Tu peux aussi cliquer dans l'aperçu : ses liens restent dans l'aperçu.
4. Alterne Ordinateur et Mobile pour juger les deux formats.
5. Compare deux ou trois thèmes sur la même page, puis clique sur Enregistrer.

Rien n'est publié tant que tu n'as pas enregistré : tes visiteurs ne voient aucun de tes essais.

Couleur principale, un contraste garanti

La Couleur principale colore les boutons, les liens, les puces des listes, le surlignage et le contour qui signale l'élément sélectionné au clavier. Choisis-la avec le sélecteur ou l'une des 8 pastilles proposées.

Éclair veille à la lisibilité : le texte des boutons passe en blanc ou en quasi-noir selon ta couleur, et la couleur des liens est foncée, ou éclaircie en mode sombre, juste assez pour atteindre un contraste de 4,5:1, le seuil des normes WCAG pour le texte courant. Tu peux donc choisir un jaune soleil ou un rose poudré sans rendre tes liens illisibles. Pour Atelier Nova, le terre cuite du thème Atelier (#c2410c) rappelle la couleur de l'argile.

Polices système, zéro téléchargement

Police des titres et Police du texte proposent chacune 8 styles. Ce sont des polices déjà installées sur l'appareil du visiteur : le navigateur prend la première disponible dans une liste, donc rien n'est téléchargé et le texte s'affiche instantanément. Le rendu varie légèrement entre un Mac, un PC et un téléphone Android, mais le caractère reste le même.

Une règle simple : une seule famille pour tout le site, ou des titres à empattements avec un texte sans empattement. Atelier Nova garde Humaniste partout, comme le propose le thème Atelier.

En-tête, listes, logo et pied de page

• En-tête : « Logo à gauche, menu à droite » ou « Centré : logo au-dessus du menu ».
• Listes d'articles et de produits : « Grille de cartes » ou « Liste : image à gauche », plus sobre pour un blog.
• Logo : PNG ou WebP sur fond transparent, environ 400 px de large. Il s'affiche sur environ 38 px de haut : préfère une version horizontale.
• Icône du site (favicon) : image carrée d'au moins 512 px. Sans icône, Éclair génère un éclair à ta couleur.
• Texte du pied de page : une ou deux lignes utiles, par exemple l'adresse et les horaires de l'atelier.
• Afficher « Propulsé par ⚡ Éclair » : désactive-le si tu préfères, la licence MIT ne l'impose pas.

Mode sombre, automatique ou toujours clair

Le réglage Mode sombre propose deux choix. Automatique (selon l'appareil du visiteur) est le réglage par défaut : chaque thème a sa palette sombre, appliquée quand le téléphone ou l'ordinateur du visiteur est en mode sombre, avec des liens recalculés pour rester lisibles. Toujours clair affiche le site en clair pour tout le monde.

Choisis « Toujours clair » si ton identité repose sur un fond clair, ou si ton logo est foncé sur fond transparent : sur un fond sombre, il deviendrait presque invisible. Pour vérifier, passe ton propre appareil en mode sombre et recharge ton site.

Pourquoi un thème ne pèse-t-il que 1,5 à 3 Ko ?

Un thème Éclair n'est qu'une feuille de style de 1,5 à 3 Ko, ajoutée à la feuille de base. Le HTML ne change pas d'un thème à l'autre : vitesse, accessibilité, données structurées et référencement restent identiques. Seul le thème actif est inséré dans la page avec le CSS de base, soit 17 à 23 Ko au total, 5 à 6 Ko une fois compressés.

Comme les polices viennent du système, aucune requête ne bloque l'affichage et la mise en page ne saute pas au chargement. Pour aller au-delà d'un thème sans perdre cette légèreté, tu as deux outils : une direction artistique ou quelques lignes de CSS personnalisé.

À retenir

• Le thème ne touche que l'apparence : contenus, adresses et scores restent les mêmes.
• Avant de choisir un thème, essaie-le dans l'aperçu en direct, sur une vraie page et en version mobile.
• Toute couleur principale convient : Éclair ajuste boutons et liens pour garder un contraste de 4,5:1.
• Vérifie ton logo en mode sombre, ou choisis « Toujours clair ».
• Pour aller plus loin que les 6 thèmes : direction artistique ou CSS personnalisé.

Pour aller plus loin

• Directions artistiques et Score Design : 12 univers complets, avec polices de caractère et compositions.
• Le CSS personnalisé : retoucher un détail du thème sans toucher à ses fichiers.
• Personnaliser les gabarits du thème : pour les développeurs qui veulent modifier la structure HTML.
• Source officielle : comprendre le contraste minimum, sur le site du W3C (WCAG 2.2).

Toutes les leçons du parcours