ServiceNow - Create Custom Themes II

This is Part II of creating custom themes for your ServiceNow instance. This video demonstrates how to create a theme collection containing variants, or separate themes that end-users can select from in their preferences.
Part I: • ServiceNow - Create Cu...
Create your first Next Experience UI Theme: community.serv...
Theme your Production and Sub-Production instances using Next Experience UI: community.serv...
Color generator: theme.deoproto...

[@secretaryofsimplification]

ANNOUNCEMENT (20221221): There is a new ServiceNow app scheduled for Jan 2023 that will supersede the Color Generator, which for the moment has been made unavailable for public use. See this discussion on the ServiceNow Ideas portal (login required): support.servicenow.com/ideas?id=view_idea&sysparm_idea_id=e23ca8611b3b5550c17111751a4bcbb9&sysparm_idea_table=x_snc_com_ideation_idea&sysparm_module_id=enhancement_requests

[@OneAndOnlyMe]

For anyone wondering, for the top banner, add these in the "base" section of the UX style: "base": { "--now-unified-nav_header--color": "255,245,245", "--now-unified-nav_header--background-color": "160,64,64", "--now-toolbar-nav--background-color-start": "255,0,0", "--now-toolbar-nav--background-color-end": "64,0,0", }, The second two are optional, and to be honest I can't see where they take effect anyway.

[@OneAndOnlyMe]

I have another tip. Add comments to your US style JSON. Now, you can't just use // or /*..*/ ECMAscript comments, but what I like to do is this: "__COMMENT__": "Polaris navigator background", "--now-color_chrome--brand": "72,72,72", "__COMMENT__": "Polaris navigator divider and scrollbar", "--now-color_chrome--divider": "32,32,32" I add extra properties to the JSON, "__COMMENT__" : "my comment....". It doesn't matter that the "__COMMENT__" property is repeated, the JSON parser will deal with it. The __COMMENT__ is my personal preference as it stands out against the actual style parameter names.

[@mayankdas1595]

Great session! Thanks for sharing both the videos! I was wondering if you can share the color codes for the Ocean and Dunescapes themes. I have tried multiple times to create one good theme but every time, no matter what, it turns out to be all gibberish!

[@davidbarclay1738]

Great video, thanks! Question - how do you restrict the ability to select themes (in user preferences) to certain users?

[@OneAndOnlyMe]

Important tip: If you accidentally miss out a quote in the UX style JSON then the platform UI will not render. You'll need to recover from backup. This seems crazy! The JSON should be validated before saving to the database. Luckily for me, I had SN Utils extension and had just taken a sync of the JSON and was therefore able to push it back from VS Code.

[@secretaryofsimplification]

Hi MeTube, this seems to be fixed in the Tokyo release. 1) The CSS color values permit spaces (hooray!) 2) A missed quotation mark will result in the text box displaying lots of errors in the sidebar from that point. If you do save the record, the instance seems to default to a basic, but still very usable, theme.

[@alexcripps5578]

Great Videos thank you I am just wondering if they will any more videos like 'Edit the Login Background color' and 'make the logo bigger' thanks

[@secretaryofsimplification]

Not at the moment. However, I should take a fresh look at themes; I know there have been changes and improvements since I made this video.

[@OneAndOnlyMe]

Another very useful tutorial, thanks! One question, could you show us how to change the color for the values that are hyperlinks in the lists, please. The blue links are hard to see on a dark background.

[@secretaryofsimplification]

Hi MeTube, the style in your sys_ux_style contains these four hyperlink styles (with their uses that I just discovered by testing; I couldn't find any documentation on them): "--now-color--link-1": ?? "--now-color--link-2": lists (inactive) "--now-color--link-3": lists (active), UI action links in forms (inactive) "--now-color--link-4": UI action links in forms (active)

[@OneAndOnlyMe]

@@secretaryofsimplification That's interesting as I literally copied and pasted the JSON from the generator. That said, I've since figured out how to update the colors for the reference type fields. I now have a almost complete theme! I've noticed that the "isDark" attribute does other things to make things dark, but I'm going to try and create a "dark" theme without the "isDark" set to true, mainly because I want dark, but more very dark grey.

[@shembop]

I am challenged to figure out how to modify the different colors. I am trying to bring in a custom UI16 theme we have for a lower instance. I choose our Yellow for the Primary color, and then two kind of gray colors for secondary and neutral. The problem is it makes the header a darker yellow than I expected, and worse, the navigator is such a light color I can hardly read the text. Is there a 'decoder' to what each of the items in the color generator will affect? (and how to modify) I also noticed I choose HEX in the generator, but it looks like it converts it to RGB values in the json. One other thing I noticed. You add "properties": but in the Polaris Dark UX style it has "base": what do each of these do? I have not found a doc to explain.

[@nicholasperault920]

This tutorial is wonderful! The one issue I run into coming from a OG version of ServiceNow and upgrading over the years is my dark modes do not make the forms dark. They stay white unlike the cool theme in your tutorial. Any ideas?

[@secretaryofsimplification]

Hi Nicholas, in San Diego, dark themes could only be applied to Workspaces. As of Tokyo, you can also apply them to regular lists and forms. To do this, create a new system property: glide.ui.polaris.core_ui_exclude_dark_mode | string | false. (Note that the Type must be string.). If it doesn't work, try flushing the cache with cache.do. See also: www.servicenow.com/community/now-platform-articles/next-experience-ui-dark-theme-now-also-on-core-ui-experiences/tac-p/2323195

[@waldorfCrane]

The color generator page doesn't load. Is there a new location for that?

[@secretaryofsimplification]

Hi @waldorfCrane, there is a new ServiceNow app scheduled for Jan 2023 that will supersede the Color Generator, which for the moment has been made unavailable for public use. See this discussion on our Ideas portal (login required): support.servicenow.com/ideas?id=view_idea&sysparm_idea_id=e23ca8611b3b5550c17111751a4bcbb9&sysparm_idea_table=x_snc_com_ideation_idea&sysparm_module_id=enhancement_requests

[@wanna_know_something7888]

Hi all, I have somehow changed the menu items ( All , Favourites....)text color. I am not sure which element is controlling that. Please let me know if you could help

[@brandonwheeler6124]

Looks like there's an issue with the link for the color generator. Did it change?

[@secretaryofsimplification]

Hi @brandonwheeler6124, there is a new ServiceNow app scheduled for Jan 2023 that will supersede the Color Generator, which for the moment has been made unavailable for public use. See this discussion on our Ideas portal (login required): support.servicenow.com/ideas?id=view_idea&sysparm_idea_id=e23ca8611b3b5550c17111751a4bcbb9&sysparm_idea_table=x_snc_com_ideation_idea&sysparm_module_id=enhancement_requests

[@wanna_know_something7888]

Hi all, I have somehow changed the menu items ( All , Favourites....)text color. I am not sure which element is controlling that. Please let me know if you could help