---
title: "How to change the color of the table of contents"
slug: "how-to-change-the-color-of-the-table-of-contents"
description: "You would want to change the color of the table of contents to showcase it better. "
tags: ["Customization"]
updated: 2026-06-20T09:28:49Z
published: 2026-06-20T09:28:49Z
canonical: "docs.document360.com/how-to-change-the-color-of-the-table-of-contents"
---

> ## 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 color of the table of contents

The table of contents (TOC) on the Knowledge base site uses grey links by default, with the currently active heading highlighted in blue. You can change both of these colors using Custom CSS to improve visibility or align the TOC with your brand. The change applies globally across all articles on the site.

---

## When to use a custom TOC color

- **Brand alignment**: match the TOC link color to your product's primary color so the sidebar feels part of the same visual design.
- **Improve visibility**: increase contrast between the TOC links and the sidebar background to make navigation easier to read.
- **Distinguish active state**: use a distinct color for the currently active heading to help readers track their position in a long article.

 NOTE

These CSS changes apply globally to the table of contents across all articles on your Knowledge Base site.

---

## Quick reference

Use the snippets for your Knowledge base site version. Replace the color values with your desired hex codes or CSS color names.

**All TOC links and toggle icons:**

```
d360-table-of-content .toc-item .toc-toggle-icon,
d360-table-of-content .toc-item a {
    color: red !important;
}
```

**Currently selected (active) heading only:**

```
d360-table-of-content .toc-item.selected a {
    color: blue !important;
}
```

---

## How to change the table of contents colour

1. In the Knowledge Base portal, go to **Settings** > **Knowledge base site** > **Custom CSS & JavaScript**.

![Knowledge base site settings page showing the Custom CSS and JavaScript option in the left navigation.](https://cdn.document360.io/860f9f88-412e-4570-8222-d5bf2f4b7dd1/Images/Documentation/Custom%20css%20&%20js.png)

1. Select the **CSS** tab and paste the appropriate snippet. Paste both snippets to control the default link color and the active heading color independently. If you only want to change one, paste only the relevant snippet.
2. Replace the color values with your desired colors — use a hex code (for example, `#1a73e8`) or a CSS color name (for example, `steelblue`).
3. Click **Save**.

![Custom CSS editor showing the table of contents color snippets pasted in the CSS tab with the Save button visible.](https://cdn.document360.io/860f9f88-412e-4570-8222-d5bf2f4b7dd1/Images/Documentation/Change%20color%20of%20toc.png)

---

## Outcome

### Before

By default, TOC links appear in grey, and the currently active heading is highlighted in blue.

![Knowledge Base site showing the default table of contents with grey links and the active heading highlighted in blue.](https://cdn.document360.io/860f9f88-412e-4570-8222-d5bf2f4b7dd1/Images/Documentation/2_Screenshot_Before_color_of_table_of_Content.png)

### After

After saving the CSS, the inactive TOC links change to the specified color (red in this example). The active heading color is controlled separately and remains blue unless you also update the selected heading snippet.

![Knowledge Base site showing the table of contents with links changed to red and the active heading remaining highlighted in blue.](https://cdn.document360.io/860f9f88-412e-4570-8222-d5bf2f4b7dd1/Images/Documentation/3_Screenshot_After_color_of_table_of_Content.png)