Vous pouvez donner une identité visuelle à votre catalogue sans connaissances techniques : on agit surtout sur des couleurs et quelques variables.
Changer les couleurs principales (CSS minimal)
Ajoutez ceci en bas de index.html entre les balises « style » ... « /style » ou dans votre fichier CSS :
:root{
--bg:#ffffff; --text:#111111; --accent:#0ea5e9; /* couleur des liens et boutons */
}
@media (prefers-color-scheme: dark){
:root{ --bg:#0b0b0c; --text:#f3f4f6; --accent:#38bdf8; }
}
body{ background:var(--bg); color:var(--text); }
a,.btn{ color:var(--accent); border-color:var(--accent); }Résultat : un thème clair/sombre cohérent avec votre accent.
Basculer clair/sombre
Le projet propose déjà un bouton de thème. Cliquez pour passer de clair à sombre selon votre préférence. Pas besoin de plus.
Badges colorés personnalisés
Vous pouvez forcer la couleur d’un badge (utile pour une catégorie maison) :
{
"title": "Pack ateliers",
"url": "./zips/pack.zip",
"type": "zip",
"badges": [{ "variant":"custom", "label":"Essentiel", "emoji":"📦", "color":"#10b981" }]
}Le badge s’affichera avec cette teinte spécifique.
4 conseils de design
- Simplicité : 1 couleur d’accent suffit (évite l’arc-en-ciel).
- Contraste : texte sombre sur fond clair (ou inverse) bien lisible.
- Cohérence : mêmes couleurs pour actions identiques (liens/boutons).
- Parcimonie : 1–2 badges par carte, libellés courts.
À retenir
- Changez 2–3 variables pour un look propre.- Le thème clair/sombre est déjà opérationnel.- Les badges peuvent adopter votre couleur.