--- title: "Thèmes et apparence" description: "Choisir un thème parmi les 6 d'Éclair, l'essayer en direct sur ton site, puis régler couleur, polices, logo, en-tête et mode sombre sans rien casser." url: "https://eclair.academy/parcours/intermediaire/themes-apparence" lang: "fr" author: "Thierry Gustin" published: "2026-11-02" updated: "2026-11-02" --- # Thèmes et apparence > **L’essentiel** — Pour choisir un thème, ouvre Réglages › Apparence, sélectionne Thème classique puis l'un des 6 thèmes (Éclair, Éditorial, Atelier, Studio, Boutique, Contraste) et regarde l'aperçu en direct sur ton vrai site. Règle ensuite la couleur principale, les polices, l'en-tête, les listes, le logo et le mode sombre, puis enregistre. Rien n'est publié avant. 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. > **Avant de commencer** — Durée : 25 minutes. Prérequis : un compte administrateur ([les rôles](https://eclair.academy/parcours/debutant/administration)), ton logo et ton icône déjà envoyés dans la [médiathèque](https://eclair.academy/parcours/debutant/images-mediatheque), et quelques pages publiées pour juger le résultat. ## Ce que tu sauras faire ### 🎨 Choisir le bon thème Comparer les 6 thèmes sur ton propre site avant d'enregistrer. ### 🎯 Affirmer ton identité Couleur principale, polices, logo et icône, sans perdre en lisibilité. ### ⚡ Garder un site rapide Comprendre pourquoi un thème ne pèse que 1,5 à 3 Ko. ## 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](https://eclair.academy/parcours/intermediaire/directions-artistiques). **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 | Thème | Esprit | Pour qui | Réglages appliqués | | --- | --- | --- | --- | | **Éclair** | Clair, moderne et polyvalent : le thème d'origine | Tous les sites | Violet, police Système, en-tête à gauche | | **Éditorial** | Un magazine : empattements, filets fins, lettrine, article à la une | Blogs, médias, auteurs | Rouge, titres Serif élégante, texte Serif moderne, en-tête centré | | **Atelier** | Chaleureux et artisanal : crème et terre cuite, formes douces | Artisans, restaurants, bien-être | Terre cuite, police Humaniste | | **Studio** | Portfolio minimaliste : noir et blanc, grands titres, images à vif | Photographes, designers, agences | Noir, police Néo-grotesque | | **Boutique** | Pensé pour vendre : photos carrées, en-tête fixe, boutons francs | Boutiques, créateurs | Vert sarcelle, titres Géométrique, en-tête centré | | **Contraste** | Lisibilité maximale : grand texte, contrastes forts, liens soulignés | Services publics, associations, seniors | Bleu, police Système, articles en liste | 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. ![Le même site affiché avec les 6 thèmes : Éclair, Éditorial, Atelier, Studio, Boutique et Contraste](https://eclair.academy/media/2026/11/eclair-academy-themes-fr.webp) *Un seul site, six thèmes, le même HTML* ## 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. ![Réglages › Apparence : les cartes des thèmes et l'aperçu en direct du site sur ordinateur](https://eclair.academy/media/2026/11/eclair-academy-appearance-fr.webp) *Chaque essai s'affiche sur ton vrai site* > **Juge sur une vraie page** — Teste chaque thème sur ta page la plus riche, un article avec images, intertitres et FAQ, plutôt que sur l'accueil seul. C'est là que les différences de typographie se voient. ## 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. > **Une couleur se règle ici, pas en CSS** — Ne change pas la couleur principale avec le CSS personnalisé : le calcul de contraste des boutons et des liens ne suivrait pas. Utilise toujours le réglage **Couleur principale**. ## 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. | Style | Caractère | Polices utilisées, par ordre de préférence | | --- | --- | --- | | Système (moderne) | Sans empattement, celle de l'appareil | system-ui, Segoe UI, Roboto | | Néo-grotesque | Sans empattement neutre | Inter, Roboto, Helvetica Neue, Arial | | Humaniste | Sans empattement chaleureuse | Seravek, Gill Sans Nova, Ubuntu, Calibri | | Géométrique | Formes rondes et régulières | Avenir, Montserrat, Corbel | | Arrondie | Terminaisons adoucies | ui-rounded, Quicksand, Comfortaa | | Serif moderne | Empattements nets, très lisible | Charter, Sitka Text, Cambria | | Serif élégante | Empattements classiques | Iowan Old Style, Palatino Linotype | | Machine à écrire | Chasse fixe | Cascadia Code, Menlo, Consolas | 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. > **Et un site toujours sombre ?** — Le thème classique n'a pas de réglage « toujours sombre ». Pour un fond sombre en permanence, choisis une direction artistique sombre, comme Nocturne ou Néon. Avec une direction, ce réglage disparaît : c'est elle qui fixe le fond clair ou sombre. ## 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é](https://eclair.academy/parcours/intermediaire/css-personnalise). ## À 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](https://eclair.academy/parcours/intermediaire/directions-artistiques) : 12 univers complets, avec polices de caractère et compositions. - [Le CSS personnalisé](https://eclair.academy/parcours/intermediaire/css-personnalise) : retoucher un détail du thème sans toucher à ses fichiers. - [Personnaliser les gabarits du thème](https://eclair.academy/parcours/expert/personnaliser-theme) : pour les développeurs qui veulent modifier la structure HTML. - Source officielle : [comprendre le contraste minimum](https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html), sur le site du W3C (WCAG 2.2). ## Questions fréquentes ### Changer de thème fait-il perdre mes contenus ou mon référencement ? Non. Le HTML est le même d'un thème à l'autre : seules les couleurs, les polices et quelques mises en page changent. Tes adresses, tes données structurées et tes scores restent identiques. ### Puis-je utiliser une police Google Fonts avec un thème classique ? Non, le thème classique n'utilise que les polices du système. Pour une police de caractère, passe par une direction artistique : 18 polices de titre sont proposées, téléchargées une fois par ton serveur puis servies par ton site. ### Pourquoi mes liens n'ont-ils pas exactement ma couleur principale ? Si ta couleur est trop claire pour un texte, Éclair la fonce, ou l'éclaircit en mode sombre, juste assez pour atteindre un contraste de 4,5:1. Les boutons, eux, gardent ta couleur exacte. ### Comment avoir un site toujours sombre ? Le thème classique propose seulement « Automatique » ou « Toujours clair ». Pour un fond sombre en permanence, choisis une direction artistique sombre comme Nocturne ou Néon.