--- title: "Wie man die Farbe der Callouts im Dunkelmodus ändert" slug: "how-to-change-the-callouts-color-in-dark-mode" description: "In Document360, You can change the callouts color in dark mode." tags: ["Customization"] updated: 2026-06-22T08:43:25Z published: 2026-06-22T08:43:25Z canonical: "docs.document360.com/how-to-change-the-callouts-color-in-dark-mode" --- > ## Documentation Index > Fetch the complete documentation index at: https://docs.document360.com/llms.txt > Use this file to discover all available pages before exploring further. # 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. ![Custom CSS and JavaScript settings panel in the Document360 Knowledge base portal](https://cdn.document360.io/860f9f88-412e-4570-8222-d5bf2f4b7dd1/Images/Documentation/Custom%20css%20&%20js.png) 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)*/ } ``` 1. Aktualisieren Sie die Farbwerte für jeden Callout-Typ. Der Ausschnitt enthält drei Eigenschaften pro Aufruf: | CSS-Eigenschaft | Was er kontrolliert | | --- | --- | | `background-color` / `background` | Die Füllfarbe der Callout-Box | | `color` | Die Textfarbe im Aufruf | | `border-left` | Die linke Akzentrandfarbe des Aufrufs | > [!NOTE] > 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. 1. Klicken **Sie auf Speichern**. ![CSS tab showing the Dark mode callout color snippet saved in the Custom CSS and JavaScript panel](https://cdn.document360.io/860f9f88-412e-4570-8222-d5bf2f4b7dd1/Images/Documentation/image-1767002340663.png) --- ## 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](https://webaim.org/resources/contrastchecker/) 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.