---
title: "How to change the callouts color in dark mode"
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: 2025-12-29T09:59:06Z
published: 2026-01-31T09:30:11Z
---

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

# How to change the callouts color in dark mode

You can change the callout color in dark mode. Follow the below workaround to change the callout color in dark mode.

#### Solution

1. Navigate to **Settings** (<nor class="fa-solid fa-gear" data-tomark-pass=""></nor>) > **Knowledge base site** > **Site customization** > **Custom CSS & JavaScript** in the Knowledge base portal.

![Site customization options for branding, theme selection, and custom CSS settings displayed.](https://cdn.document360.io/860f9f88-412e-4570-8222-d5bf2f4b7dd1/Images/Documentation/Custom%20css%20&amp;%20js.png)
2. From the left navigation pane, click on the **CSS** tab and paste the following CSS snippet:

```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. Update the desired color for the callouts.

> [!NOTE]
> ** NOTE
> 
> color > Text color background-color > Callout box color

1. Click **Save**.

![](https://cdn.document360.io/860f9f88-412e-4570-8222-d5bf2f4b7dd1/Images/Documentation/image-1767002340663.png)