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:

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