Next Experience UI Theming Overview

@Ashley Snyder your guide shows us how to create a variant and you've also shared links to the SN Docs on how to create and extend a theme, but how do we make a new theme (not a variant) default for all users?

Great guide 👏, thank you

@James Foot instead of making a style a variant you would choose Core and give it a higher Order value than the default style you wish to override. With Next Experience UI enabled you would associate new style records to the default 'Polaris' theme instead of creating a new theme. With Next Experience UI disabled you can continue to create a theme per your experience (workspace, etc.).

If you want to apply the theme variant to all the users by default then create a system preference record like below.

Hi, Thanks for the guide! it's awesome.

The only difference in my case, is the logo configuration. If I set a number higher than 0 as order, the logo is the Servicenow logo, on the other hand if I set 0 as order the logo are displayed correctly.

I found that "--now-color_chrome--brand" changes the background color of the All/Favorites/History/Workspace menus and the header, which I needed.  Is there a guide/list that will show you what styles do what for the Platform interface?

Also I noticed that if you do not get the formatting right when putting in the Style the interface loads with a blank screen.  So someone may want to look at that since if you get it wrong and reload you will not be able to fix it because the interface will not load.  Tested in San Diego Patch 2 HF 1a.

**** Example **** Missing double quotes around the 91,207,69
{
"base": {
"--now-color_brand--primary": 91,207,69
},
"properties":{
}
}

**** Example **** notice the spaces in the "18, 92, 26"
{
"base": {
"--now-color_chrome--brand": "18, 92, 26"
},
"properties":{
}
}

You can also set a system user preference to do the same thing.

This is awesome, Ashley!

However, if the only thing we want to modify is the header color, which property would be?

Some folks rely on colors to distinguish between DEV, TEST, UAT and PRD... 

Thanks, 

See my post above, it is "--now-color_chrome--brand".  But it uses a version of that color for other things.

For me I found that this change the color of the header only - "--now-color_chrome--brand-10"

Hope this helps!

@Drew West there isn't a graphic at the moment which calls out the specific variables, though I did list some of the basics in the Walk-Through. The Style Hooks links posted in the article will show all of the CSS Variables we use.

In the Walk-Through section I do mention adding the JSON blocks to prevent this known defect and how to remediate if it occurs. 

Support recently released this article, but be advised the CSS Variable only targets the header, not the dropdown menus. https://support.servicenow.com/kb?id=kb_article_view&sysparm_article=KB1118116 This is why I mentioned the Color Generator method in the walkthrough if admins want a more full theme with the header to target the menus as well.

{
    "properties": {
        "--now-unified-nav_header--background-color": "YOUR RGB VALUE"
    }
}

Nice, now I'm wondering what 0 to 9 do...

I hope they are going to document/release a more graphical version that point so where each CSS var is used.  The existing one appears to leave a lot of them out.

Awesome!

Thanks, Ashley! That should be enough for us!

Is there a way to order the themes under user preferences? Ideally I'd like alphabetical past the default one but it doesn't seem to have any order to it.

Thanks!

Hi @Ruben Fuertes / @Ashley Snyder ,

I have created a custom theme, custom style and added my logo in ux style assets in the related list. But logo didnt reflected in banner. Am i missing anything? Kinly help me on the same.

Regards,

Sirraj

Hi Sirraj,

Have you tried setting 0 as the order like me?

I have one query.

As per the docs, I have attached logo in UX Style Asset related list. But the screenshot which you have shared is a different table.

Let me tell you what i did, my requirement is change the banner colour and logo.

1) I have created a theme "Custom Theme" in (sys_ux_theme) table.

2) I have added ux theme style "Custom Style" in (sys_ux_style) table where i have mentioned the css style to change the background color with an order 0. Along with this custom style record, i have also OOB Dark, Typography, UI16 Dashboard styles as well with an order 1.

With the help of step 1&2, am able to change the banner color successfully.

3) For changing the logo, I have opened the "Custom Style" record which i created in step 2 and there is one related list called UX Style Assets. I have attached a logo there.

Is my step 3 is correct..??

Regards,

Sirraj

Somewhat late to this thread, but according to Elliot West's post on Linked in, I should be able to track these new theme variants in an update set. This does not appear to be the case, at least for me.

In addition to this, I now have a bunch of themes that I no longer want in our Dev environment that I can't delete because they are in a scope I can't modify.

So, my questions are:

- How can I get these updates in an update set (exporting/importing XML does not seem to work)?

- How can I remove theme variants I no longer want?

Jim

Does anyone find that the "secondary" color... goes away for all but the initial loading of the home page?  I like the feel that gives but once you leave this page... it's gone. The one pointed to below

@Jim Melton 

This article has been updated to direct users on to how to create a theme and override the default theme. Previous guidance informed users to add styles to the default theme, which cannot be captured and is in a private scope.

What you can do is follow this article to create a theme and move the existing styles you want into that theme, and move it with update sets. This will allow you to not only move the theme, but not have to interact with the private scope. 

To remove theme variants from the private scope, you should be able to do this via an m2m table called: UX Theme Styles (m2m_theme_style) records you have created here should not be in the private scope and can be removed from the default theme. 

Thanks for the link to the updated article. I'm pretty sure I attempted to delete from that table but was unable to.

I'll give it another look and we'll see what happens.

Thanks again!

Jim

This is great information Ashley. 

In the article, it was mentioned that if we want to change just the color of the header, we should use this property: "--now-unified-nav_header--background-color": (although I didn't find that in the listing of style hooks)

If we wanted to just change the background color of the All, Favorites, and History menus, is there a similar property we could set?

This is very helpful. I did change the Theme as per the above guide, however, I noticed that the Checkbox field appears to be white when checked. Not sure why this is happening. Can someone provide assistance in changing the color of the tick in the Checkbox field?

@Ashley Snyder This is very helpful. I did create a new Theme as per the above guide, however, I noticed that the Checkbox field appears to be white when checked. Not sure why this is happening. Can you assist in fixing this issue?

Thank you,

Akshya

@Akshya Vasant - Hi, I am facing the same issue. Were you able to figure this checkbox field out ?

@Akshya Vasant  I am also facing the same issue. Please let me know which property is related to the color of check box.

@priyankag
@Akshya Vasant 
Please add this one in  as background color of check box. Any color is fine.

"--now-checkbox--background-color--checked":"76,81,85"

@Akshya Vasant which version are you on?

I don't believe there is right now but I will let the product team know of this.

@priyankag  @Akshya Vasant 

Please add this one in the color style. Any color is fine.

"--now-checkbox--background-color--checked":"76,81,85"

Please add this one in the color style. Any color is fine.

"--now-checkbox--background-color--checked":"76,81,85"

Hi Sirraj,

Were you able to figure this out? I'm having the same problem following the documentation.

Step 5-8 in the docs here:

Step 3, 9 in the docs here (and association with the style in step 1-2):

Icon not displaying:

Same logo file used in our UI16 here:

Appreciate any tips!

-Matt

Solved my own problem here. It seems in my Development environment, I had a corrupted image in System Properties > Basic Configuration leftover from the good ol' days. Thus, my logo would load for a split second, then it was overwritten by the corrupted logo.

My ticket on hi.servicenow.com believes the root cause was "due to a corrupt .iix file in sys_attachment" and said you can check glide.product.image.light. However, I had re-uploaded this multiple times under System Properties > Basic Configuration UI16 (where this property gets updated), so I am left unsatisfied with this root cause.

My icon only started displaying when I updated the icon from the System Properties > Basic Configuration menu. I think the property for this one is glide.product.image.

Looks like I can replicate this in my test environment what this looked like for me.

Corrupted image:

Working image in UI16 menu:

Hopefully this is helpful to someone! Please let me know if someone finds more information on this if they have any. 

-Matt

If you're seeing an issue with custom themes and checkboxes, make sure you add the out-of-the-box Colors UX Style to your theme. You can leave the order and Type of Core the same, this will resolve the issue.

The color generator site is unavailable.  Anyone know of its status or if there is an alternative source?

The color generator site is unavailable.  Anyone know of its status or if there is an alternative source?

I used it a few times and today, like a kid outside a closed candy store, OPEN OPEN OPEN

https://theme.deoprototypes.com/color-generator-p/

Sad day when that disappeared

@Valawman & @Victor Peinado it's behind the SN firewall. There might be some chatting about it during the Next Experience Theming Academy on 01/18.

https://www.servicenow.com/community/next-experience-events/next-experience-academy-session-6-introd...

@Robert Fauver  Woot Woot cant wait for that. i was lucky enough to use it once for the main theme but folks have an appetite for more 🙂

Has anyone figured out how to change the global search default color?  It appears to be a variant of "--now-color--primary-1", but I would like to keep that as is.

@ChrisUSC84

It looks like these are using (in Tokyo) the following properties:

For the shading: --now-color_chrome--brand-4

For the border: --now-color_chrome-divider-1

There's also a hover color but I am having trouble finding it...

Once you click into the box, it looks like it uses: --now-color_brand-neutral & sets the property background: transparent.

Hope this helps!

@Valawman @Victor Peinado @Robert Fauver 

Hello! Just wanted to let you know that the theming website is back: https://theme.deoprototypes.com/color-generator-algo-v1

Enjoy!

@MGOPW This is AWESOME! Thanks for letting me know!

@Srikanth Menava 

We had the same issue when we upgraded to Tokyo. See this thread on a solution I had stumbled upon.

-Matt

Hi Matt,

I figured out my self the same, I thought I am fast enough to delete my comment, But I'm not.

Thanks for the quick response tho.. 

This article has been updated to reflect the changes for the Utah release. It serves to provide an overview of Next Experience UI theming, the differences in whether Next Experience is enabled or not, and the tools available for theming per the family version you are on. If you have technical questions on how to theme I suggest creating a question in the forum, as this post will not be moderated for deep dives or technical issues. If you think you have a defect with theming based upon our solutions, we recommend creating a support case.

Does anyone know how to change the order of the themes presented to us in preferences?

The question was asked further up, but no one replied. I'm struggling to find the answer anywhere else online. 

@James Bustard I had opened a support ticket for this. The response that I got was "it is not possible at this time" and to open an idea on the idea portal. If there is a workaround, I'm not aware of it at the moment.

Dom

@James Bustard I am nnot tryig to contradict @NFGDom 's answer. But from personal experience, changing the order changes the visibility.

Theme Managemennt>> themes >> polaris

and the result is