Thèmes et apparence

Les 6 thèmes Éclair changent l’allure de ton site en un clic : couleur, polices, en-tête et présentation des listes. 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.

Quels sont les 6 thèmes Éclair ?

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

Tous les thèmes affichent les mêmes blocs, le blog et la boutique légère : 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.

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

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

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

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

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 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 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.

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 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 :

.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. 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 dans les réglages : seulement des polices système, déjà présentes sur l’appareil du visiteur.
• 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 ?

Le mode d’emploi d’origine est aussi dans le guide officiel d’Éclair, et le détail des versions 1.3.0 à 1.5.0 dans le journal des versions.