Next Experience Announcement Colour

[Community Alums]

I've set up an announcement in the console but have a question about the colour choices ('Now Experience Framework > Configuration Settings > UX Banner Announcements'). 

I'm not satisfied with the washed-out colours given to use and wish to create my own. Unlike the portal announcements, which use a reference field and are easy to create, the colours for the UX Banner Announcements are simply choices found on the sys_choice table: Info, Critical, High, etc. 

I can't find where or what is using these choices and defining the RGB or HEX value. 

Has anybody created their own yet, or has any idea how? Any advice would be appreciated. 

[Community Alums]

Thanks Vince

This solution will be rolled out to the entire agency and requires stability as we transition through various upgrades. As such, DOM manipulation doesn't sound like a good fit for what we need. 

[Sumanth16]

Hi @Community Alums ,

1-To override OOB CSS- create a new sys_ux_style and link to the Theme. Refer the below article for details steps

https://www.servicenow.com/community/next-experience-articles/next-experience-ui-theming-overview/ta-p/2332045#colors

2- In the newly created "sys_ux_style" - update the below property to the desired value.

-now-unified-nav_header--background-color

Please refer to below thread:

https://support.servicenow.com/kb?id=kb_article_view&sysparm_article=KB1118116

If I could help you with your Query then, please hit the Thumb Icon and mark it as Correct !!

Thanks & Regards,

Sumanth Meda

[Community Alums]

Hi Samanth

Thanks for the suggestionI, I have created new UX Styles and customised the nav header before, but we're not talking about the navbar background colour, we're discussing the UX Banner Announcements which is a different beast.  I have looked at the default UX Style to see if it references the sys_choice values in the announcement, but it does not appear to. 

[Brad Tilton]

Sumanth is on the right track here with the theming variables. The way this works is that you set a level of the alert with the color field and that choice corresponds to a theme variable. For example, if you set the level to Info then it's going to show whatever color is referenced in the theming variable: --now-color_alert--info-0 (and each variable would be different depending on the color you choose for the alert). I found this by inspecting elements in the console here for that banner announcement:

You can go into the ux styles in the theme and change it to another color, but it is going to end up changing the color wherever theme variable is referenced so it could have some unintended consequences.

The idea around the new theme engine is that you basically define your theme once and it's consistent throughout the entire instance. This way when you have an info level message anywhere the coloring is consistent with your theme.

[Community Alums]

Hi Brad 

Thanks for your reply. I should have updated this thread a couple of days ago. I did find the corresponding alert colour in the UX Style. I'm acutely aware though, as you mentioned, changing a default value here impacts other areas of the system. 

I created a new theme to play around with, then created a new choice option for the announcement and attempted to create a new value in the UX Style to direct just the announcement banner, but I was unsuccessful. 

e.g. Created a new choice value on the ux announcement table 'test' and then created an entry in the style guide "--now-color_alert--test-0, 195,221,240". 

The entry in the style guide does not apply to the new choice field. I'm still unsure what's tying those entries to the choices.