Hoe verander je de kleur van de callouts in de donkere modus

Wanneer je kennisbank in Donkere modus wordt bekeken, roep dan de vakken. Info, Error en Warning kunnen moeilijk te lezen zijn. Hun standaard lichtgekleurde achtergronden en tekst waren ontworpen voor de lichte modus, en in de donkere modus kunnen ze verbleekt, laag contrast of visueel inconsistent zijn met de rest van de pagina. Je kunt de Dark mode calloutkleuren overschrijven met een CSS-snippet om ervoor te zorgen dat callouts duidelijk en toegankelijk blijven in beide thema's.

Wanneer dit te gebruiken

Gebruik deze aanpassing wanneer je wilt:

• Behoud de leesbaarheid van callout-boxen wanneer de donkere modus standaard is ingeschakeld of beschikbaar voor lezers.
• Pas aangepaste merkkleuren toe op Info-, Fout- en Waarschuwingsmeldingen, specifiek in Donkere modus zonder dat hun uiterlijk in de Lichtmodus wordt beïnvloed.
• Zorg voor voldoende contrast tussen callout-achtergronden, tekst en randen in documentatie met een donker thema.

Voordat je begint

• Je hebt toegang nodig tot Instellingen (
  ) > Kennisbanksite > Site-aanpassing > Custom CSS & JavaScript in het kennisbankportaal.
• Deze CSS richt zich specifiek op de donkere modus met behulp van de html[data-bs-theme=dark] selector. Het heeft geen effect op het uiterlijk van meldingen in Lichtmodus.
• Bepaal de kleuren die je wilt voor elk type callout voordat je begint. Het fragment behandelt drie typen callout: Info (.infoBox), Error (.errorBox) en Warning (.warningBox). Elk heeft drie aanpasbare eigenschappen: achtergrondkleur, tekstkleur en randkleur.

Hoe je de kleuren van callouts in de donkere modus verandert

1. Navigeer naar Instellingen (

   ) > Kennisbanksite > Site-aanpassing > Custom CSS & JavaScript in het kennisbankportaal.

   

2. Selecteer in het linker navigatiepaneel het CSS-tabblad en plak het volgende CSS-fragment:

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. Werk de kleurwaarden bij voor elk type callout. Het fragment bevat drie eigenschappen per callout:

OPMERKING

color beheerst de tekstkleur.
background-color beheert de vulkleur van het callout-vakje.
De !important verklaring is verplicht voor alle waarden, zonder deze is de Dark mode-override-override-functie niet van toepassing.

4. Klik op Opslaan.

   

Best practices

• Houd elke waarde vast !important . De Dark-modus selector heeft een lagere specificiteit dan de ingebouwde themastijlen van Document360. Het verwijderen !important van een eigendom zorgt ervoor dat die eigenschap terugkeert naar de standaard donkere moduskleur.
• Houd contrastverhoudingen aan het werk. Kies achtergrond- en tekstkleurparen die voldoen aan de WCAG AA contrastnormen (minimaal 4,5:1 voor hoofdtekst). Tools zoals de WebAIM Contrast Checker kunnen je helpen je kleurcombinaties te controleren voordat je opslaat.
• Houd de semantiek van het callout-type intact. Info-, fout- en waarschuwingsmeldingen geven verschillende niveaus van urgentie aan voor lezers. Houd bij het aanpassen het visuele onderscheid tussen hen — vermijd het gebruik van vergelijkbare kleuren voor alle drie.
• Test in de donkere modus voordat je publiceert. Na het opslaan schakel je je kennisbank over naar Donkere modus en open je een artikel met alle drie de callouttypes om te bevestigen dat elk correct rendert.
• Je kunt callout-types weglaten die je niet hoeft aan te passen. Als je alleen het Info-vakje wilt wijzigen, verwijder dan de .errorBox en-blokken .warningBox uit het fragment. De anderen blijven hun standaard donkere modus kleuren gebruiken.