---
title: "How to change the highlighted search result color in articles"
slug: "how-to-change-the-highlighted-search-result-color-in-articles"
description: "When you have enabled the highlight matching search keyword in the articles option, the search keywords present in the article will be highlighted."
tags: ["Customization"]
updated: 2026-06-20T09:50:33Z
published: 2026-06-20T09:50:33Z
canonical: "docs.document360.com/how-to-change-the-highlighted-search-result-color-in-articles"
---
> ## 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 highlighted search result color in articles
When the **Highlight Matching Search Keywords in Articles** setting is enabled, Document360 automatically highlights the search term wherever it appears in an article. The default highlight color is yellow. You can override this with a custom color, for example, to match your brand palette or improve contrast, for both Light and Dark modes.
---
## When to use this
Use this customization when you want to:
- Replace the default yellow highlight with a color that fits your brand or site theme.
- Improve the visibility of search term highlights against your knowledge base background color.
- Apply consistent highlight styling in both Light and Dark modes.
---
## Before you begin
- The **Highlight Matching Search Keywords in Articles** setting must be enabled for search highlights to appear at all. Enable it under **Settings** () > **Knowledge base site** > **Site customization** before applying this CSS.
- You need access to **Settings** () > **Knowledge base site** > **Site customization** > **Custom CSS & JavaScript** in the Knowledge base portal.
---
## How to change the search keyword highlight color
1. Navigate to **Settings** () > **Knowledge base site** > **Site customization** > **Custom CSS & JavaScript** in the Knowledge base portal.
2. From the left navigation pane, select the **CSS** tab and paste the following snippet:
```css
.fp-search-content em, .search-content em {
background-color: #4E1E66;
color: white;
}
```
> In the sample snippets above, green and purple are used as example highlight colors with white text. Replace these with your desired color values.
3. Update the `background-color` and `color` values to your desired colors.
4. Click **Save**.
---
## Outcome
**Before**
Search keywords are highlighted with the default yellow color provided by Document360.
**After**
Search keywords are highlighted with the custom background color `#4E1E66` and white text after applying the CSS.
---
## Best practices
- **Choose a highlight color that contrasts with both your page background and your text.** A highlight color that blends into the background is invisible; one that clashes with the text color reduces readability. Test your chosen combination in both Light and Dark modes.
- **Keep text color (`color`) in sync with your highlight background.** The snippet sets both the highlight background (`background-color`) and the text color (`color`) inside the highlight. If you change the background to a dark color, use `white` for the text. If you use a light background, use a dark text color.
- **Use HEX or RGB values rather than color names.** CSS color names like `green` are imprecise. Replace them with your specific HEX code for accurate and brand-consistent results.
- **Verify the Highlight Matching Search Keywords setting is enabled.** If highlights do not appear after applying the CSS, check that the feature is enabled. The CSS change only affects the color — it cannot activate the feature itself.