---
title: "Como mudar a cor do índice"
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-22T08:58:57Z
published: 2026-06-22T08:58:57Z
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.

# Como mudar a cor do índice

O sumário (TOC) no site da base de conhecimento usa links cinza por padrão, com o título ativo atualmente destacado em azul. Você pode mudar essas duas cores usando o CSS personalizado para melhorar a visibilidade ou alinhar o TOC com sua marca. A mudança se aplica globalmente a todos os artigos do site.

---

## Quando usar uma cor personalizada de TOC

- **Alinhamento da marca**: combine a cor do link do TOC com a cor principal do seu produto para que a barra lateral pareça parte do mesmo design visual.
- **Melhorar a visibilidade**: aumentar o contraste entre os links TOC e o fundo da barra lateral para facilitar a leitura da navegação.
- **Distinga estado ativo**: use uma cor distinta para o título ativo para ajudar os leitores a acompanhar sua posição em um artigo longo.

 NOTA

Essas mudanças no CSS se aplicam globalmente ao sumário de todos os artigos do seu site da Base de Conhecimento.

---

## Referência rápida

Use os trechos para a versão do seu site da base de conhecimento. Substitua os valores de cor pelos códigos hexadecimais ou nomes de cor CSS desejados.

**Todos os links do TOC e ícones de alternância:**

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

**Apenas cabeçalhos selecionados atualmente (ativos):**

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

---

## Como mudar a cor do índice

1. No portal da Base de Conhecimento, acesse **Configurações** > **site da Base de Conhecimento** > **CSS & JavaScript Personalizados**.

![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. Selecione a aba **CSS** e cole o trecho apropriado. Cole ambos os trechos para controlar a cor padrão do link e a cor ativa do título de forma independente. Se quiser mudar apenas um, cole apenas o trecho relevante.
2. Substitua os valores de cor pelas cores desejadas — use um código hexadecimal (por exemplo, `#1a73e8`) ou um nome de cor CSS (por exemplo, `steelblue`).
3. Clique **em Salvar**.

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

---

## Desfecho

### Antes

Por padrão, os links TOC aparecem em cinza, e o título ativo atualmente é destacado em azul.

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

### Depois

Após salvar o CSS, os links TOC inativos mudam para a cor especificada (vermelho neste exemplo). A cor ativa do cabeçalho é controlada separadamente e permanece azul, a menos que você também atualize o trecho de cabeçalho selecionado.

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