Wie man die Farbe der Callouts im Dunkelmodus ändert

Wenn deine Wissensdatenbank im Dunkelmodus angezeigt wird, rufe Meldeboxen an. Informationen, Fehler und Warnung können schwer lesbar werden. Ihre standardmäßig hellen Hintergründe und Texte wurden für den Hellmodus entwickelt, und im Dunkelmodus können sie ausgewaschen, kontrastarm oder visuell inkonsistent mit dem Rest der Seite wirken. Du kannst die Farben der Dunkelmodus-Callouts mit einem CSS-Snippet übersteuern, um sicherzustellen, dass die Callouts in beiden Themen klar und zugänglich bleiben.

Wann sollte man das verwenden

Nutzen Sie diese Anpassung, wenn Sie möchten:

• Beibehalten Sie die Lesbarkeit der Callout-Boxen, wenn der Dunkelmodus standardmäßig aktiviert oder für Leser verfügbar ist.
• Wende benutzerdefinierte Markenfarben speziell im Dunkelmodus auf Info-, Fehler- und Warnhinweise an, ohne das Aussehen des Lichtmodus zu beeinflussen.
• Sorgen Sie für ausreichende Kontraste zwischen Callout-Hintergründen, Text und Rändern in dunkler Dokumentation.

Bevor du anfängst

• Du brauchst Zugriff auf die Einstellungen (
  ) > Wissensdatenbank-Seite > Site-Anpassung > benutzerdefiniertes CSS und JavaScript im Knowledge Base-Portal.
• Dieses CSS zielt speziell auf den Dunkelmodus mit dem html[data-bs-theme=dark] Selektor ab. Im Lichtmodus hat es keinen Einfluss auf das Erscheinungsbild von Callouts.
• Entscheiden Sie sich vor Beginn der gewünschten Farben für jede Art von Callout. Der Ausschnitt behandelt drei Callout-Typen: Info (.infoBox), Error (.errorBox) und Warning (.warningBox). Jede hat drei anpassbare Eigenschaften: Hintergrundfarbe, Textfarbe und Randfarbe.

Wie man die Farben der Rufe im Dunkelmodus ändert

1. Navigiere zu den Einstellungen (

   ) > Wissensdatenbank-Seite > Site-Anpassung > benutzerdefiniertes CSS und JavaScript im Knowledge Base-Portal.

   

2. Wählen Sie im linken Navigationsfeld den CSS-Tab aus und fügen Sie folgenden CSS-Snippet ein:

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. Aktualisieren Sie die Farbwerte für jeden Callout-Typ. Der Ausschnitt enthält drei Eigenschaften pro Aufruf:

HINWEIS

color kontrolliert die Textfarbe.
background-color kontrolliert die Füllfarbe der Callout-Box.
Die Deklaration !important ist bei allen Werten verpflichtend, ohne sie gilt die Darkmode-Überschreibung nicht.

4. Klicken Sie auf Speichern.

   

Best Practices

• Behalten Sie !important jeden Wert. Der Dunkelmodus-Selektor hat eine geringere Spezifizität als die eingebauten Themenstile von Document360. Das Entfernen !important aus einer beliebigen Eigenschaft führt dazu, dass diese Eigenschaft zur Standardfarbe des Dunkelmodus zurückkehrt.
• Halten Sie das Kontrastverhältnis bei. Wählen Sie Hintergrund- und Textfarbepaare, die den WCAG AA-Kontraststandards entsprechen (mindestens 4,5:1 für den Haupttext). Tools wie der WebAIM Contrast Checker können Ihnen helfen, Ihre Farbkombinationen vor dem Speichern zu überprüfen.
• Behalte die Semantik des Callout-Typs intakt. Info-, Fehler- und Warnhinweise signalisieren für die Leser unterschiedliche Dringlichkeitsstufen. Beim Anpassen sollten Sie die visuelle Unterscheidung zwischen ihnen bewahren – vermeiden Sie es, für alle drei ähnliche Farben zu verwenden.
• Testen Sie im Dunkelmodus vor der Veröffentlichung. Nach dem Speichern schalte deine Wissensdatenbank in den Dunkelmodus um und öffne einen Artikel mit allen drei Callout-Typen, um zu bestätigen, dass jeder korrekt rendert.
• Du kannst Callout-Typen weglassen, die du nicht anpassen musst. Wenn du nur das Infofeld ändern möchtest, entferne die .errorBox und-Blöcke .warningBox aus dem Snippet. Die anderen verwenden weiterhin ihre Standardfarben im Dunkelmodus.