ServiceNow - Create Custom Themes I

[@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

[@blueshortsSN]

This was great help thank you! I first followed Ashley Snyders instructions however was struggling to get it working! but after this, everything is how I want it to be! again thank you!

[@secretaryofsimplification]

Glad it helped!

[@anissemahtat8596]

thanks for this video, i love the way you describe your work

[@am.1755]

your videos are very helpful thanks

[@baatyr_patta1068]

Hi Jason, thanks for the excellent explanation. My question is can we use for theme creation 'Theme Builder' ? what is the difference btw. TB and the way you did it?

[@OneAndOnlyMe]

This was super useful! Thanks.

[@secretaryofsimplification]

Glad it was helpful!

[@nashidkhan4243]

@secretaryofsimplification Thank you so much it really incapsulate the theme building in a crisp and easy to understand manner. i just wanted your one help for the error which i came across while implementing it while trying to change the background colour in the NEXT UI experience, the flags are getting invisible in the dark theme.so i am not able to distinguish between whether anything is active or deactivated, whether anything is selected or not selected and i believe its something very crucial and can be devastating.

[@OneAndOnlyMe]

Important safety 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.

[@OneAndOnlyMe]

@@secretaryofsimplification Phew! Good to know. Thanks.

[@MsJeansky6]

Hello, thank you for the tutorial, it really helps me. I'm new to ServiceNow, and still experimenting the instance. Just a quick question how I can revert the modified theme to its original theme? Thanks in advance.

[@sarindavid3436]

Hi, if you delete Value (sys_id) in 'glide.ui.polaris.theme.custom' under system properties and then click on 'update'- you can revert back to service-now's original theme. thank you.

[@user-to6hx7rx7z]

thank you :)

[@secretaryofsimplification]

You're welcome!

[@savanthemurlidhar6635]

Changing a theme for San Diego and Vancouver is same?

[@MirroNieva]

Thank you :)

[@secretaryofsimplification]

INFO: For those who may get a white screen after changing the theme: This is a known error that occasionally occurs and a workaround has been published at ServiceNow Support: support.servicenow.com/kb?id=kb_article_view&sysparm_article=KB1080252 (requires login). You will need to navigate to /sys_ux_theme_list.do and remove the Core style that you added and also revert back to your default Polaris theme by navigating to /sys_properties.do?sys_id=f1f5b45b2ff3c1109ee53996f699b6f2. The sys_id of the default ServiceNow Polaris theme is 31bf91ae07203010e03948f78ad30095.

[@OneAndOnlyMe]

I've added a user to my PDI that I've kept on the default theme as my back door :)

[@GaneshM-lk1tm]

Thank you for this Video. Which is really helpul. Noticed one issue with the Theme combination: I tried with the same color combination which you have tried and everything works great except Check Box. Even though the check box is true, it's not displaying properly with this theme combination. Please let us know if you have a solution for this check box color issue.

[@secretaryofsimplification]

Hmm, interesting. Thanks for pointing this out, Ganesh. Will check it out. Meanwhile, stay tuned for an update to composing themes in the Utah release! :-)

[@corsair831]

I've tried this in my personal developer instance exactly as you've said and now when I load the PDI I just get a blank white screen, I don't suppose you'd know what'd be causing that please? Thanks!

[@corsair831]

Okay I've found the problem, in the video for { "properties" ... you said semicolon verbally and then entered a colon, after entering a colon instead it worked fine, thanks for the video!

[@secretaryofsimplification]

Thank you @corsair831! That it just me being dumb, I meant to say "colon" as in "properties": :-)

[@savanthemurlidhar6635]

I have tired it in my personal dev instance. I have struck in the last step .i couldn't able to find polaris.theme.custom in my system properties.. Please help? I couldn't able to update the sys id

[@secretaryofsimplification]

Hi Savanthe, if the glide.ui.polaris.theme.custom system property is not present, you can simply create it and specify the sys_id of your custom theme.

[@manfredpracticioner]

Thanks but I have to say - it used to be way easier to change themes dear ServiceNow. Waaaaay easier

[@secretaryofsimplification]

I did a quick review of Theme Builder when it was first released: kzbin.info/www/bejne/f3OQkHuvpJ6aepI There are improvements in Vancouver coming (have not looked at them yet, although Vancouver PDIs are already available), so I expect it should get even easier and better.

[@rdrunna7075]

Polaris custom glide doesn't exist in my system properties. Did I miss something?

[@secretaryofsimplification]

Hi @rdrunna707, you can add the property yourself if it is not there. See docs.servicenow.com/csh?topicname=configure-next-experience-theme.html&version=latest

[@RickyMohar]

Would you know how to add a banner in the next UI

[@secretaryofsimplification]

Hi Ricky, changing the image is the same as before. Go to System Properties > My Company and change the UI16 Banner Image.