---
title: "Cómo cambiar el color de las señales en modo oscuro"
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:48:10Z
published: 2026-06-22T08:48:10Z
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.

# 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.

![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. 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)*/
}
```

1. Actualiza los valores de color para cada tipo de llamada. El fragmento contiene tres propiedades por llamada:

| Propiedad CSS | Lo que controla |
| --- | --- |
| `background-color` / `background` | El color de relleno del cuadro de señal |
| `color` | El color del texto dentro de la señal |
| `border-left` | El color del borde de acento izquierdo de la llamada |

> [!NOTE]
> 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á.

1. Haz clic **en Guardar**.

![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)

---

## 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](https://webaim.org/resources/contrastchecker/) 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.