Theme Builder: Changing Search Highlight Text Color in Next Experience Navigation Menu

[YuChiehK]

Hi,

I'm using a custom Theme Builder theme in ServiceNow Next Experience and noticed that the highlighted search match text in the navigation menu has poor contrast against the background.

I've reviewed the Theme Builder settings but haven't been able to identify which theme token or CSS variable controls the search match highlight text color.

[timo42heren]

In ServiceNow Next Experience, the Theme Builder abstracts core colors into high-level tokens and color palettes. However, micro-elements—such as search match highlight text inside the Unified Navigation or search components—frequently lack a dedicated, exposed token in the Theme Builder UI. When custom brand colors are applied, these matches can inherit default or poorly contrasting text/background pairs.

[Shahjay]

Hello @YuChiehK ,

You're right that Theme Builder doesn't expose this one. The match highlight in the menu filter isn't a dedicated token. It picks up one of the base colours, and on a lot of custom themes that ends up as light text on a light background.

The one that has fixed it for other people is --now-color--neutral-4. It's used for the matched text when you filter the All menu. You set it in the theme's UX Style JSON rather than in Theme Builder:

1. Go to sys_ux_theme, open your theme and find the style record(s) attached to it (sys_ux_style).
2. Add the property under properties, using an RGB triplet (no hex, no rgb()):
   
   

"properties": {
  "--now-color--neutral-4": "0,0,0"
}​

3.Save, then do a hard refresh (or log out and back in), because themes are cached quite aggressively.

If the highlight still doesn't change, inspect the highlighted text in dev tools and see which --now-... variable it's actually reading. Tokens have moved around between releases. The unified nav ones all start with --now-unified-nav_ (for example --now-unified-nav_menu-filter--color--opened), so that's where I'd look next. Don't bother trying to fix it with regular CSS. The nav is built from web components with shadow DOM, so only these CSS variables get through.

A couple of things to watch:

neutral-4 isn't only used by the nav, so check a few other screens after you change it. If something else looks off, fall back to the more specific --now-unified-nav_ variable.

Also, if you edit the style record that Theme Builder generated, reopening the theme in Builder and saving can overwrite your change. It's safer to put the override in its own style record and attach it to the theme, so Builder never touches it.