---
title: "Thèmes et apparence"
description: "Les thèmes Éclair et les 12 directions artistiques changent l’allure de ton site, avec un aperçu en direct, sans toucher au HTML ni au référencement."
url: "https://eclaircms.org/documentation/themes"
lang: "fr"
author: "Thierry Gustin"
published: "2026-10-30"
updated: "2026-11-01"
---

# Thèmes et apparence

> **L’essentiel** — Éclair propose 12 directions artistiques, qui changent tout l’univers du site (palette, police de titre, bannière, atouts, icônes), et 6 thèmes classiques. Tu les essaies dans Réglages › Apparence grâce à un aperçu en direct de ton vrai site, et rien n’est publié avant d’enregistrer. L’IA peut imaginer trois directions à partir de ton activité. Les contrastes sont garantis, la police est servie par ton site et le HTML ne change pas : vitesse et référencement restent intacts.

Les thèmes Éclair changent l’allure de ton site en un clic : couleur, polices, en-tête et présentation des listes. Depuis la 1.8, les 12 directions artistiques vont plus loin et changent tout son univers. Tu les essaies sur ton vrai site grâce à l’aperçu en direct, sur ordinateur ou sur mobile, et rien n’est publié avant d’enregistrer. Tes contenus, ta vitesse et ton référencement, eux, ne bougent pas.

![Le même site de céramiste affiché avec les 6 thèmes d’Éclair : Éclair, Éditorial, Atelier, Studio, Boutique et Contraste](https://eclaircms.org/media/2026/11/themes.webp)
*Un seul site, six styles : seul le thème change, le contenu et le HTML restent les mêmes.*

## Qu’est-ce qu’une direction artistique ?

Depuis Éclair 1.8, une **direction artistique** va plus loin que les thèmes Éclair classiques : elle change tout l’univers du site à partir d’une idée concrète (la ville la nuit, l’atelier de céramique, le quotidien du matin). Palette, police de titre, taille des titres, coins, espacement, composition de la bannière, mise en page des atouts, bandes de couleur et icônes changent ensemble.

![Le même site de céramique dans six directions artistiques : Nocturne, Galerie, Argile, Riviera, Récréation et Presse](https://eclaircms.org/media/2026/11/directions-artistiques.webp)
*Le même site dans six des douze directions artistiques.*

| Direction | Univers | Police de titre |
| --- | --- | --- |
| **Nocturne** | La ville la nuit : bleu profond, lumière ambrée | Big Shoulders Display, en capitales |
| **Galerie** | Murs blancs, cartels noirs, un rouge de signalétique | Familjen Grotesk |
| **Argile** | L’atelier de céramique : sable, terre cuite, formes douces | Young Serif |
| **Botanique** | L’herbier et la serre : vert profond, papier sauge | DM Serif Display |
| **Affiche** | L’affiche suisse : noir sur blanc cassé, orange vif | Archivo Black, en capitales |
| **Riviera** | Le bord de mer : bleu marine, ciel pâle, corail | Gloock |
| **Cabinet** | Le papier à en-tête : encre marine, bordeaux, filets fins | Libre Caslon Display |
| **Néon** | L’écran de création la nuit : quasi-noir, vert citron | Unbounded |
| **Douceur** | Le cabinet de soin : poudre rosée, prune, beaucoup d’air | Cormorant Garamond |
| **Chantier** | Béton, jaune de sécurité, signalétique condensée | Barlow Condensed, en capitales |
| **Récréation** | La cour d’école : bleu ciel, rouge tomate, lettres rondes | Fredoka |
| **Presse** | Le quotidien du matin : papier journal, rouge de une | Newsreader |

## Comment choisir et ajuster une direction artistique ?

1. Dans **Réglages › Apparence**, choisis **Direction artistique** au lieu de **Thème classique**.
2. Clique sur une des 12 cartes et regarde l’**aperçu en direct** : ton vrai site, sur ordinateur ou sur mobile.
3. Ouvre **Ajuster la direction**, règle ce que tu veux, puis enregistre : rien n’est publié avant.

- **5 couleurs** : fond, bandes et cartes, texte, texte secondaire, accent des boutons et des liens.
- **Police des titres** : 18 polices choisies pour leur personnalité, ou une police système. **Police du texte** : une police système, sans téléchargement.
- **Casse**, **taille des titres**, **coins** (droits, adoucis, ronds) et **espacement** (serré, normal, aéré).
- **Cartes** à filet, en aplat ou avec ombre, et **bannière d’accueil** côte à côte, en affiche, plein cadre, éditoriale ou centrée.
- **Atouts** en cartes, rangées ou colonnes, **sections** unies ou en bandes de couleur, et **icônes** dessinées à la place des émojis.

En-tête, listes d’articles, logo, icône, pied de page et CSS personnalisé se règlent comme avec les thèmes Éclair classiques. Pour revenir au thème classique, choisis **Thème classique** et enregistre : ses réglages t’attendent, intacts.

> **Toujours lisible, toujours rapide** — Quelles que soient les couleurs, Éclair ajuste le texte à un contraste de **7:1** sur le fond, et le texte secondaire, les liens et les boutons à 4,5:1, y compris sur les fonds teintés. La police de titre (12 à 27 Ko) est téléchargée une seule fois par ton serveur depuis Fontsource (licence SIL Open Font License), puis servie par ton site et préchargée : aucun service tiers pour tes visiteurs. Si ton hébergeur bloque les connexions sortantes, un message te prévient et une police de secours de la même famille la remplace.

## Comment l’IA imagine-t-elle ta direction ?

![Réglages › Apparence : choix entre direction artistique et thème classique, puis les cartes des 12 directions](https://eclaircms.org/media/2026/11/reglages-directions.webp)
*Réglages › Apparence : direction artistique ou thème classique, puis les 12 cartes.*

Quand l’[assistant IA](https://eclaircms.org/documentation/assistant-ia) est activé, **Imagine ma direction avec l’IA** apparaît sous les cartes. Décris ton activité, ton public et l’ambiance voulue (« boulangerie bio de quartier à Lyon, clientèle familiale, chaleureux mais moderne »), puis clique sur **Proposer 3 directions**.

L’IA lit aussi la présentation de ton site et ton profil éditorial. Elle part du monde concret de ton activité, donne à chaque proposition une référence précise et propose trois directions vraiment différentes, en évitant le choix par défaut de ta catégorie. Les propositions s’ajoutent en tête des cartes, marquées ✦ : essaie-les dans l’aperçu, ajuste, puis enregistre celle qui te plaît. L’IA ne choisit que parmi les réglages d’Éclair et n’écrit jamais de CSS. Coût indicatif : environ 0,03 $ avec Claude Sonnet 5.5, déduit du budget de l’assistant. La méthode est adaptée d’[Impeccable](https://github.com/pbakaus/impeccable), de Paul Bakaus.

## Quels sont les 6 thèmes Éclair classiques ?

Les thèmes Éclair sont livrés avec le CMS, depuis la version 1.3.0. Chacun a son esprit et son public :

| Thème | Esprit | Pour qui |
| --- | --- | --- |
| **Éclair** | Clair, moderne et polyvalent : le thème d’origine | Tous les sites |
| **Éditorial** | Un magazine : typographie à empattements, filets fins, lettrine, article à la une | Blogs, médias, auteurs |
| **Atelier** | Chaleureux et artisanal : tons crème et terre cuite, formes douces | Artisans, restaurants, bien-être |
| **Studio** | Portfolio minimaliste : noir et blanc, grands titres, images à vif | Photographes, designers, agences |
| **Boutique** | Pensé pour vendre : photos carrées, en-tête fixe, boutons francs | Boutiques, créateurs |
| **Contraste** | Lisibilité maximale : grand texte, contrastes forts, liens soulignés | Services publics, associations, seniors |

Tous les thèmes affichent les mêmes blocs, le blog et la [boutique légère](https://eclaircms.org/documentation/boutique) : choisis celui qui ressemble à ton métier, pas celui qui « contient » une fonction.

## Comment changer de thème ?

Cinq étapes suffisent, aperçu compris :

1. Ouvre **Réglages › Apparence**.
2. Dans **Thème**, clique sur la carte qui te plaît. Sa couleur, ses polices, son en-tête et sa présentation des listes s’appliquent aussitôt au formulaire.
3. Sous **Aperçu en direct**, choisis la page affichée (Accueil, Blog, Un article, La boutique ou Un produit), puis passe de **Ordinateur** à **Mobile**. Tu peux cliquer dans l’aperçu : les liens y restent.
4. Ajuste ce que tu veux (couleur principale, polices, en-tête, listes, mode sombre) : l’aperçu suit chaque changement.
5. Clique sur **Enregistrer**. Le cache des pages est vidé automatiquement : ton site change tout de suite.

![Réglages › Apparence d’Éclair : les six cartes de thèmes, le thème Boutique sélectionné et l’aperçu en direct de la page d’accueil sur ordinateur](https://eclaircms.org/media/2026/11/apparence-apercu.webp)
*L’aperçu en direct montre ton vrai site avec le thème choisi ; rien n’est publié avant d’enregistrer.*

> **Note tes réglages avant d’essayer** — Choisir un thème remplace la couleur, les polices, l’en-tête et les listes du formulaire par ses réglages conseillés. Si tu les avais personnalisés, note-les avant d’essayer d’autres thèmes. Tant que tu n’as pas cliqué sur Enregistrer, rien n’est modifié : quitte simplement la page pour garder tes réglages actuels.

## Que règle chaque thème quand tu le choisis ?

Voici les réglages conseillés que chaque thème applique, tous modifiables ensuite :

| Thème | Couleur principale | Polices (titres / texte) | En-tête | Listes |
| --- | --- | --- | --- | --- |
| Éclair | Violet `#5b4cf0` | Système (moderne) | Logo à gauche | Grille de cartes |
| Éditorial | Rouge `#b42318` | Serif élégante / Serif moderne | Centré | Grille de cartes |
| Atelier | Terre cuite `#c2410c` | Humaniste | Logo à gauche | Grille de cartes |
| Studio | Noir `#111111` | Néo-grotesque | Logo à gauche | Grille de cartes |
| Boutique | Bleu-vert `#0f766e` | Géométrique / Système (moderne) | Centré | Grille de cartes |
| Contraste | Bleu `#1d4ed8` | Système (moderne) | Logo à gauche | Liste : image à gauche |

## Quels autres réglages d’apparence peux-tu modifier ?

Toujours dans **Réglages › Apparence**, sous l’aperçu :

| Réglage | Ce que tu choisis |
| --- | --- |
| **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 » |
| **Logo** | Un PNG ou un WebP sur fond transparent, d’environ 400 px de large |
| **Icône du site (favicon)** | Une image carrée d’au moins 512 px ; sans icône, un éclair à ta couleur est généré |
| **Couleur principale** | N’importe quelle couleur : le contraste des textes est ajusté automatiquement |
| **Police des titres** et **Police du texte** | Des polices système : zéro téléchargement, affichage instantané |
| **Mode sombre** | « Automatique (selon l’appareil du visiteur) » ou « Toujours clair » |
| **Texte du pied de page** | Ton texte, et l’option « Afficher « Propulsé par ⚡ Éclair » » |
| **CSS personnalisé** | Tes propres règles de style, 64 Ko au maximum |

Pour la couleur principale, Éclair vise un contraste d’au moins 4,5:1 entre les liens et le fond, le seuil du [critère WCAG 1.4.3](https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html) pour le texte courant. Si ta couleur en manque, les liens utilisent une version plus foncée (plus claire en mode sombre), et le texte des boutons passe en blanc ou en noir selon ce qui se lit le mieux.

## Pourquoi un thème ne ralentit-il pas ton site ?

Parce que chaque thème n’est qu’une **feuille de style de 1,5 à 3 Ko**, ajoutée à celle de base. Le thème Éclair, lui, n’ajoute rien : c’est le style de base.

- **Le HTML ne change pas** d’un thème à l’autre : vitesse, accessibilité, données structurées et [référencement](https://eclaircms.org/documentation/seo) restent identiques.
- **Seul le thème actif** est inséré dans la page, avec le reste du CSS : aucun fichier de plus à télécharger.
- **Le mode sombre automatique** fonctionne avec chacun des 6 thèmes.
- **Les styles de la boutique** ne sont insérés que lorsqu’elle est ouverte : un site vitrine ne les charge jamais.
- **Avec une direction artistique**, seules les règles utiles à ta direction sont insérées, et sa police de titre est préchargée avec `font-display: optional` : aucun décalage de mise en page, et Lighthouse reste à 100.

## Comment ajouter ton propre CSS ?

Pour aller plus loin que le thème (la couleur d’un bouton, des espacements, le style d’un bloc), colle tes règles dans **Réglages › Apparence › CSS personnalisé**, puis enregistre.

- **Elles l’emportent sur le thème** : elles sont ajoutées après lui dans chaque page.
- **Elles survivent aux mises à jour** depuis Éclair 1.5.0 : elles sont rangées avec tes données, dans `data/`, que la [mise à jour](https://eclaircms.org/documentation/mise-a-jour) ne touche pas.
- **Les repères du mode sombre** fonctionnent : les règles placées entre `/*dark*/` et `/*/dark*/` disparaissent quand le mode sombre est réglé sur « Toujours clair ».
- **Par sécurité**, le caractère `<`, les règles `@import` et les caractères de contrôle sont retirés, et le champ accepte 64 Ko au maximum.

Par exemple, pour des boutons aux angles légèrement arrondis et un pied de page plus sombre en mode sombre :

```css
.btn { border-radius: 6px; }

/*dark*/@media (prefers-color-scheme: dark) { .site-footer { background: #0d0d12; } }/*/dark*/
```

## Que ne font pas les thèmes ?

- **Ils ne changent pas la structure des pages.** Pour déplacer un élément ou ajouter une zone, il faut modifier les gabarits PHP de `app/theme/`, comme l’explique la page [Pour les développeurs](https://eclaircms.org/documentation/developpeurs). Une mise à jour les remplace : garde une copie de tes fichiers.
- **Il n’y a ni catalogue de thèmes à télécharger, ni extensions** : les 6 thèmes sont livrés avec Éclair. L’absence d’extensions est un choix, pour la vitesse et la sécurité.
- **Pas de police web avec les thèmes classiques** : seulement des polices système, déjà présentes sur l’appareil du visiteur. Une direction artistique ajoute une seule police de titre, servie par ton site.
- **Le CSS personnalisé n’importe rien** : sans `@import`, il ne peut pas charger une autre feuille de style.

## Que faire si l’apparence ne change pas ?

| Symptôme | Solution |
| --- | --- |
| Le site n’a pas changé | L’aperçu n’enregistre rien : clique sur **Enregistrer**. Le CSS est intégré à chaque page, il n’y a pas d’ancien fichier à rafraîchir. |
| « La boutique » et « Un produit » manquent dans l’aperçu | Ils n’apparaissent qu’une fois la boutique ouverte, et « Un produit » seulement avec un produit publié. |
| Une règle de ton CSS personnalisé est ignorée | Vérifie qu’elle ne contient ni `<` ni `@import`, retirés à l’enregistrement. Si elle reste sans effet, rends-la plus précise : une règle plus spécifique du thème l’emporte. |
| « CSS personnalisé trop long : 64 Ko maximum. » | Regroupe ou allège tes règles. |
| Des règles disparaissent | Elles sont entre `/*dark*/` et `/*/dark*/`, et le mode sombre est réglé sur « Toujours clair » : c’est voulu. |
| Tes retouches de `theme.css` ont disparu | La mise à jour a remplacé `app/`. Déplace tes règles dans le CSS personnalisé. |

Le mode d’emploi d’origine est aussi dans le [guide officiel d’Éclair](https://github.com/Jacckisback/eclair-cms/blob/main/docs/GUIDE.md#thèmes), et le détail des versions 1.3.0 à 1.5.0 dans le [journal des versions](https://eclaircms.org/changelog).

## Questions sur les thèmes

### Changer de thème fait-il perdre mes contenus ou mon référencement ?

Non. Les thèmes Éclair ne touchent ni à tes contenus ni au HTML de tes pages : titres, données structurées, vitesse et accessibilité restent identiques. Seule l’apparence change.

### Puis-je revenir au thème d’origine ?

Oui, à tout moment : choisis la carte Éclair dans Réglages › Apparence, puis enregistre. Ses réglages conseillés s’appliquent de nouveau, et ton CSS personnalisé reste en place.

### Le mode sombre fonctionne-t-il avec tous les thèmes ?

Oui : il s’applique automatiquement selon l’appareil du visiteur, avec chacun des 6 thèmes. Pour l’éviter, règle le **Mode sombre** sur « Toujours clair ».

### Quel thème choisir pour vendre en ligne ?

Le thème Boutique est pensé pour vendre : photos carrées, en-tête fixe, boutons francs. Les autres thèmes affichent aussi la boutique ; le mode d’emploi est dans [La boutique légère](https://eclaircms.org/documentation/boutique).

### Mon CSS personnalisé survit-il aux mises à jour ?

Oui, depuis Éclair 1.5.0 : il est rangé dans `data/`, que la mise à jour ne touche pas. Seules les modifications faites directement dans `app/theme/` sont remplacées.

### Une direction artistique ralentit-elle mon site ?

Non. Seules les règles utiles à ta direction sont insérées dans la page, et sa police de titre, de 12 à 27 Ko, est servie par ton site et préchargée. Lighthouse reste à 100 dans les quatre catégories.

### Puis-je revenir au thème classique après avoir choisi une direction ?

Oui : choisis Thème classique dans Réglages › Apparence et enregistre. Ses réglages t’attendent, intacts, et ceux de ta direction aussi si tu y reviens.