Chaque template CodexaStudio est conçu pour être facilement personnalisable. Les couleurs et polices sont centralisées dans des variables CSS, ce qui te permet de changer l'apparence de tout le site en modifiant quelques lignes.
Les variables CSS
Ouvre le fichier css/style.css de ton template. En haut du fichier, tu trouveras un bloc :root contenant toutes les variables :
| 1 | :root { |
| 2 | /* Couleurs principales */ |
| 3 | --accent-primary: #00DB79; /* Vert principal */ |
| 4 | --accent-secondary: #a855f7; /* Violet secondaire */ |
| 5 | --accent-amber: #f59e0b; /* Ambre/doré */ |
| 6 | |
| 7 | /* Fonds */ |
| 8 | --bg-primary: #050510; /* Fond principal */ |
| 9 | --bg-card: rgba(12, 12, 30, 0.6); |
| 10 | |
| 11 | /* Textes */ |
| 12 | --text-primary: #f1f5f9; |
| 13 | --text-secondary: #94a3b8; |
| 14 | --text-muted: #475569; |
| 15 | |
| 16 | /* Bordures */ |
| 17 | --border-subtle: rgba(255, 255, 255, 0.06); |
| 18 | } |
Changer la couleur d'accent
La couleur d'accent (--accent-primary) est utilisée pour les boutons, les liens, les badges et les éléments interactifs. Pour la changer, remplace simplement la valeur hexadécimale :
| 1 | :root { |
| 2 | --accent-primary: #3b82f6; /* Bleu */ |
| 3 | } |
Utilise un outil comme coolors.co pour générer des palettes de couleurs harmonieuses. Choisis une couleur vive qui contraste bien avec le fond sombre.
Changer les polices
Les templates utilisent deux types de polices :
- Police display (titres) : Clash Display par défaut — apporte du caractère
- Police body (textes) : DM Sans ou Inter — sobre et lisible
Pour changer la police des titres, modifie la variable --font-display et ajoute l'import Google Fonts correspondant :
| 1 | <!-- Remplace l'import de police --> |
| 2 | <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;700&display=swap" rel="stylesheet"> |
| 1 | :root { |
| 2 | --font-display: 'Space Grotesk', sans-serif; |
| 3 | } |
Modifier les dégradés de fond
Les halos lumineux en arrière-plan sont créés avec des radial-gradient. Tu peux changer leur couleur pour correspondre à ton accent :
| 1 | .bg-glow { |
| 2 | /* Change la couleur du halo : remplace le vert par ta couleur */ |
| 3 | background: radial-gradient( |
| 4 | circle at 30% 20%, |
| 5 | rgba(59, 130, 246, 0.08), /* Bleu avec 8% d'opacité */ |
| 6 | transparent 60% |
| 7 | ); |
| 8 | } |
Garde les opacités basses (0.04 à 0.10) pour les halos de fond. Des valeurs trop élevées rendront le site illisible et agressif visuellement.
Résumé
En modifiant les variables CSS :root, tu peux transformer l'apparence complète de ton template en quelques minutes. N'hésite pas à expérimenter et à prévisualiser tes changements en temps réel avec Live Server.