Thèmes
Les thèmes définissent les couleurs de votre zone d’administration et de votre site public Curling IO. Choisissez un thème inclus pour obtenir rapidement une apparence uniforme, ou créez un thème personnalisé pour rapprocher l’interface de l’identité visuelle de votre organisation.
Chaque thème prend en charge les modes clair et sombre. Vous pouvez prévisualiser les deux avant d’appliquer le thème pour vérifier les boutons, les formulaires, les tableaux, les alertes et le contraste du texte sans changer ce que les visiteurs voient.
Vidéo de présentation
Cette vidéo montre comment prévisualiser les thèmes inclus, créer ou importer une palette personnalisée, modifier ses couleurs claires et foncées, l’appliquer au site, puis copier ou gérer les thèmes enregistrés.
Ouvrir les thèmes
Allez dans Site web > Thèmes.
Vos thèmes personnalisés apparaissent en premier, suivis des thèmes de plateforme inclus. Le tableau présente la palette de chaque thème, sa popularité relative dans Curling IO et le thème actuellement sélectionné.
Sélectionnez le nom d’un thème pour le prévisualiser. Sélectionner le bouton radio sous Activé applique immédiatement ce thème à votre zone d’administration et à votre site public.
Prévisualiser un thème
L’aperçu montre le thème en modes clair et sombre sans l’appliquer. Il comprend des paires de couleurs courantes et des exemples des composants d’interface qui les utilisent.
Chaque carte de contraste indique les couleurs de premier plan et d’arrière-plan testées, leur rapport de contraste et le résultat :
- AA convient au texte de taille normale.
- Grand texte convient seulement au texte de plus grande taille.
- Échec indique un contraste insuffisant.
Vérifiez attentivement les paires Primaire, Secondaire, Accent, Atténué et Barre latérale. Une couleur peut être belle seule, mais rendre le texte difficile à lire lorsqu’elle est combinée à une autre.
Sélectionnez Utiliser ce thème lorsque l’aperçu vous convient. Sélectionnez Retour pour revenir sans changer le thème actuel.
Créer un thème personnalisé
Sélectionnez Nouveau thème pour utiliser les couleurs de votre organisation. L’éditeur commence avec les couleurs du thème actuel. Vous avez donc une palette complète et lisible à personnaliser.
- Entrez un Nom du thème.
- Sélectionnez Clair ou Foncé pour choisir le mode de couleur à modifier.
- Ouvrez un groupe de couleurs.
- Choisissez une couleur avec le sélecteur ou entrez une valeur hexadécimale à six chiffres, comme
#006699. - Vérifiez l’aperçu pendant vos modifications. Sur les grands écrans, il apparaît à côté des champs de couleur.
- Faites les modifications nécessaires dans l’autre mode de couleur.
- Sélectionnez Enregistrer.
Les groupes Primaire et Secondaire sont ouverts par défaut, car ils définissent les couleurs les plus reconnaissables de votre marque. Les autres restent repliés jusqu’à ce que vous en ayez besoin. Chaque groupe de couleurs appariées comprend un Arrière-plan et un Premier plan. Le premier plan sert au texte et aux icônes affichés sur cet arrière-plan.
L’enregistrement crée le thème personnalisé sans l’appliquer. Retournez à la liste des thèmes et sélectionnez-le sous Activé, ou ouvrez son aperçu et sélectionnez Utiliser ce thème.
Importer des couleurs de tweakcn ou d’un LLM
Utilisez Importer un thème de couleurs si vous avez déjà une palette exprimée en variables CSS. L’importation remplit les champs habituels des modes clair et sombre. Vous pouvez ensuite les vérifier et les modifier avant d’enregistrer.
Pour importer depuis tweakcn :
- Créez ou sélectionnez un thème dans tweakcn.
- Copiez son exportation de variables CSS.
- Ouvrez Importer un thème de couleurs dans Curling IO.
- Collez le CSS dans CSS du thème.
- Sélectionnez Importer les couleurs.
Vous pouvez aussi développer Générer un thème avec un LLM et sélectionner Copier les instructions pour le LLM. Collez ces instructions dans un grand modèle de langage (LLM). Lorsqu’il vous le demande, décrivez les couleurs de votre organisation et le style souhaité, puis collez le CSS obtenu dans CSS du thème.
L’importation prend en charge les couleurs hexadécimales, RGB, HSL et OKLCH. Elle lit les variables de couleur reconnues dans :root pour le mode clair et dans .dark pour le mode sombre. Les polices, l’espacement, les ombres, les importations et les variables inconnues sont ignorés. Les couleurs manquantes conservent leur valeur actuelle.
L’importation n’enregistre pas le thème et ne l’applique pas. Vérifiez les champs remplis et l’aperçu, puis sélectionnez Enregistrer lorsque le résultat vous convient.
Comprendre les groupes de couleurs
Vous n’avez généralement besoin de modifier que les groupes importants pour votre marque. Gardez les valeurs héritées des autres groupes, sauf si l’aperçu montre une raison de les changer.
| Groupe | Utilisations courantes |
|---|---|
| Primaire | Boutons principaux, liens, indicateurs de focus et éléments de navigation sélectionnés |
| Secondaire | Boutons secondaires et couleurs complémentaires des graphiques |
| Accent | États d’interface mis en évidence, badges et états au survol |
| Base | Arrière-plan principal et texte de la page |
| Carte | Cartes, panneaux et leur texte |
| Fenêtre contextuelle | Menus, listes déroulantes et leur texte |
| Atténué | Surfaces discrètes et texte complémentaire |
| Destructif | Actions de suppression, erreurs et avertissements |
| Bordure et champ | Bordures, commandes de formulaire et indicateurs de focus |
| Graphique | Couleurs de visualisation des données |
| Barre latérale | Couleurs de la navigation d’administration |
Les modes clair et sombre utilisent des valeurs distinctes. Une couleur lisible en mode clair peut mal fonctionner sur un fond sombre. Vérifiez donc les deux modes avant d’enregistrer. Sélectionner Clair ou Foncé change les champs et l’aperçu. L’aperçu se met à jour immédiatement et montre des boutons, alertes, éléments de navigation, tableaux et commandes de formulaire courants.
Copier, modifier ou supprimer des thèmes
Chaque thème propose une action de copie. Sélectionnez-la pour ouvrir un thème personnalisé non enregistré dont les couleurs claires et foncées sont déjà remplies à partir du thème source. Nommez la copie, faites les modifications nécessaires, puis sélectionnez Enregistrer. La copie ne change pas le thème source.
Les thèmes personnalisés ont aussi des actions de modification et de suppression dans la liste des thèmes. Sélectionnez l’action de modification pour changer le nom ou les couleurs d’un thème personnalisé. Si ce thème est actuellement sélectionné, l’enregistrement met immédiatement à jour le thème actif. Les thèmes de plateforme inclus ne peuvent être ni modifiés ni supprimés.
Vous pouvez créer jusqu’à cinq thèmes personnalisés. Supprimez un thème dont vous n’avez plus besoin avant d’en créer un autre. La suppression du thème personnalisé actif fait passer votre organisation au thème Tile inclus.