Comment changer la couleur des appels en mode sombre

Lorsque votre base de connaissances est vue en mode Sombre, affichez des encadres d’appel. Les informations, erreurs et avertissements peuvent devenir difficiles à lire. Leurs arrière-plans et textes clairs par défaut ont été conçus pour le mode Clair, et en mode Sombre ils peuvent apparaître délavés, à faible contraste ou visuellement incohérents avec le reste de la page. Vous pouvez remplacer les couleurs d’appel en mode Sombre à l’aide d’un extrait CSS pour garantir que les appels restent clairs et accessibles dans les deux thèmes.

Quand utiliser cela

Utilisez cette personnalisation lorsque vous souhaitez :

• Maintenir la lisibilité des boîtes d’appel lorsque le mode Sombre est activé par défaut ou disponible pour les lecteurs.
• Appliquez des couleurs personnalisées de marque aux signalements d’Information, d’Erreur et d’Avertissement spécifiquement en mode Sombre sans affecter leur apparence en mode Clair.
• Assurez-vous d’un contraste suffisant entre les arrière-plans d’appel, le texte et les bordures dans la documentation à thème sombre.

Avant que tu commences

• Vous avez besoin d’accéder aux paramètres (
  ) > site de la base de connaissances > personnalisation du site > CSS & JavaScript personnalisés dans le portail de la base de connaissances.
• Ce CSS vise spécifiquement le mode sombre en utilisant le html[data-bs-theme=dark] sélecteur. Cela n’a aucun effet sur l’apparence des appels en mode Lumière.
• Décidez des couleurs que vous souhaitez pour chaque type de mention avant de commencer. Le extrait couvre trois types d’appels : Info (.infoBox), Erreur (.errorBox) et Avertissement (.warningBox). Chacune possède trois propriétés personnalisables : couleur de fond, couleur de texte et couleur de bordure.

Comment changer les couleurs d’appel en mode Sombre

1. Naviguer dans les paramètres (

   ) > site de la base de connaissances > personnalisation du site > CSS & JavaScript personnalisés dans le portail de la base de connaissances.

   

2. Depuis le panneau de navigation de gauche, sélectionnez l’onglet CSS et collez le extrait CSS suivant :

html[data-bs-theme=dark] .infoBox {
  background-color: #ddf7ff !important;   /* Here you can change info box background color (!important is mandatory)*/
  color: #006a8a !important; /* Here you can change info box font color (!important is mandatory)*/
  border-left: 4px solid #006a8a !important; /* Here you can change info box border color (!important is mandatory)*/
}
html[data-bs-theme=dark] .errorBox {
  background: #f9e2e4 !important; /* Here you can change error box background color (!important is mandatory)*/
  color: #7e1115 !important; /* Here you can change error box font color (!important is mandatory)*/
  border-left: 4px solid #7e1115 !important; /* Here you can change info box border color (!important is mandatory)*/
}
html[data-bs-theme=dark] .warningBox {
  background: #fdf2ce !important; /* Here you can change warning box background color (!important is mandatory)*/
  color: #7f6416 !important; /* Here you can change warning box font color (!important is mandatory)*/
  border-left: 4px solid #7f6416 !important; /* Here you can change info box border color (!important is mandatory)*/
}

3. Mettez à jour les valeurs de couleur pour chaque type d’appel. Le fragment contient trois propriétés par appel :

NOTE

color Contrôle la couleur du texte.
background-color Contrôle la couleur de remplissage de la boîte d’appel.
La !important déclaration est obligatoire sur toutes les valeurs, sans elle, la dérogation du mode Sombre ne s’appliquera pas.

4. Cliquez sur Enregistrer.

   

Meilleures pratiques

• Garde !important chaque valeur. Le sélecteur de mode sombre a une spécificité inférieure à celle des styles de thème intégrés à Document360. Retirer !important d’une propriété fera revenir cette propriété à la couleur par défaut du mode foncé.
• Maintenez des rapports de contraste. Choisissez des paires de couleurs d’arrière-plan et de texte qui respectent les standards de contraste WCAG AA (minimum 4,5:1 pour le texte principal). Des outils comme le WebAIM Contrast Checker peuvent vous aider à vérifier vos combinaisons de couleurs avant d’enregistrer.
• Gardez intactes les sémantiques des types d’appel. Les signalements d’information, d’erreur et d’avertissement signalent différents niveaux d’urgence aux lecteurs. Lors de la personnalisation, prévoyez la distinction visuelle entre eux — évitez d’utiliser des couleurs similaires pour les trois.
• Testez en mode Sombre avant de publier. Après avoir sauvegardé, passez votre base de connaissances en mode Sombre et ouvrez un article contenant les trois types d’appels pour confirmer que chacun est bien affiché.
• Vous pouvez omettre les types d’appels que vous n’avez pas besoin de personnaliser. Si vous ne voulez changer que la boîte d’information, supprimez les .errorBox blocs et .warningBox du extrait. Les autres continueront d’utiliser leurs couleurs par défaut en mode sombre.