Cómo cambiar el color de las señales en modo oscuro

Cuando tu base de conocimiento esté en modo Oscuro, haz casillas de llamada. Información, error y advertencia pueden resultar difíciles de leer. Sus fondos y textos predeterminados de color claro fueron diseñados para el modo Claro, y en modo Oscuro pueden parecer deslavados, de bajo contraste o visualmente inconsistentes con el resto de la página. Puedes anular los colores de las llamadas en el modo Oscuro usando un fragmento CSS para asegurar que las llamadas permanezcan claras y accesibles en ambos temas.

Cuándo usar esto

Utiliza esta personalización cuando quieras:

• Mantener la legibilidad de las cajas de señal cuando el modo Oscuro esté activado por defecto o esté disponible para los lectores.
• Aplica colores personalizados de marca a las señales de Información, Error y Advertencia específicamente en modo Oscuro sin afectar su apariencia en modo Claro.
• Asegúrate de un contraste suficiente entre los fondos de llamada, el texto y los bordes en la documentación de temática oscura.

Antes de que empieces

• Necesitas acceso a Configuración (
  ) > Sitio de la base de conocimiento > Personalización del sitio > CSS y JavaScript personalizados en el portal de la base de conocimiento.
• Este CSS está dirigido específicamente al modo oscuro usando el html[data-bs-theme=dark] selector. No afecta a la apariencia de callout en modo Luz.
• Decide los colores que quieres para cada tipo de señal antes de empezar. El fragmento cubre tres tipos de señalamiento: Info (.infoBox), Error (.errorBox) y Warning (.warningBox). Cada uno tiene tres propiedades personalizables: color de fondo, color de texto y color de borde.

Cómo cambiar los colores de la llamada en el modo Oscuro

1. Navega a Configuración (

   ) > Sitio de la base de conocimiento > Personalización del sitio > CSS y JavaScript personalizados en el portal de la base de conocimiento.

   

2. Desde el panel de navegación izquierdo, selecciona la pestaña CSS y pega el siguiente fragmento CSS:

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. Actualiza los valores de color para cada tipo de llamada. El fragmento contiene tres propiedades por llamada:

NOTA

color Controla el color del texto.
background-color Controla el color de relleno del cuadro de llamado.
La !important declaración es obligatoria en todos los valores; sin ella, la anulación del modo Oscuro no se aplicará.

4. Haz clic en Guardar.

   

Mejores prácticas

• Mantén !important cada valor. El selector de modo oscuro tiene menor especificidad que los estilos de temas integrados en Document360. Eliminar !important de cualquier propiedad hará que esa propiedad vuelva al color predeterminado del modo oscuro.
• Mantén las proporciones de contraste. Elige pares de fondo y color de texto que cumplan con los estándares de contraste WCAG AA (mínimo 4,5:1 para el texto principal). Herramientas como el WebAIM Contrast Checker pueden ayudarte a verificar tus combinaciones de colores antes de guardar.
• Mantén intacta la semántica de callout. Las señales de Información, Error y Advertencia señalan diferentes niveles de urgencia para los lectores. Al personalizar, mantén la distinción visual entre ellos — evita usar colores similares para los tres.
• Prueba en modo oscuro antes de publicar. Después de guardar, cambia tu base de conocimiento a modo Oscuro y abre un artículo que contenga los tres tipos de llamadas para confirmar que cada uno se renderiza correctamente.
• Puedes omitir los tipos de llamadas que no necesitas personalizar. Si solo quieres cambiar la caja de Información, elimina los .errorBox bloques y .warningBox del fragmento. Los demás seguirán usando sus colores predeterminados del modo oscuro.