How to change filter navigator background color and font color in polaris view

[Community Alums]

Hi,

Can anyone help me like how we can change the filter navigator background color and font colors in Polaris view. Thank You!

Regards,

Ganesh

[Community Alums]

@Community Alums : Please help me on this if you have idea. Thank you in advance. 

Regards,

Ganesh

[Community Alums]

@Community Alums i hope you are asking about displaying matching filter result text, i had same question when I had to create a light theme ,but unfortunately Servicenow uses neutral color as filter background so if you change this will impact on classic UI section of form.

I even had a hi case last time and they said there is nothing till Tokyo from their side in this.

So nothing we have as of now to change this because this is not link with any specific property for themeing.

Hope this will help.

[Community Alums]

"So nothing we have as of now to change this because this is not link with any specific property for themeing."

We are running a highly customised theme in Tokyo. My post from earlier shows some of the properties in themes available to us. Tokyo is indeed out and available to the public. I can appreciate not all organisations are already upgraded to it. 

There does indeed appear to be all the settings Ganesh will need to accomplish what he's wanting; filter navigator background colour, font colour manipulation etc. 

I hadn't tried this in San Diego, so I can't speak to the theming there.

Regards, 

James

[Community Alums]

Hi Ganesh

I'm in the process of creating a new theme and am working on that exact question. 

There are a few properties that manage the colours. 

- If you haven't already, create a new theme (Next Experience UI - Understanding Themes)

- If you already have your theme created and want to modify the navigator background. Navigate to the 'sys_ux_style' table and open your theme. 

The properties I've found so far that govern the colours in question are: 

"properties": {
 "--now-unified-nav_menu-filter--background-color": "195,67,153",
"--now-unified-nav_menu-filter--background-color--hover": "0,0,0",
"--now-unified-nav_menu-filter--background-color--opened": "195,67,153",
"--now-unified-nav_menu-filter--color--placeholder--focus": "255,255,255",
"--now-unified-nav_menu-filter--color--opened": "255,255,255",

}

I modified the colours for exaggeration to illustrate. I don't have my background colour pink normally 😅

In particular, the ""--now-unified-nav_menu-filter--color--opened": "255,255,255"," property sets the colour of the text in the menu filter. 

The link I shared earlier shows how to modify fonts. 

Hope this helps 👍

Regards

James