hello everyone in this video we are going to learn how to create our own custom theme for our servicenow instance and override the default one in part two of this series we are going to learn how to create variants so that we can give our users a choice of what theme that they want to use for their instance so in this video we are going to go from our standard default polaris theme that servicenow provides to creating our own custom theme that looks maybe a little bit like this have you missed the rose colored theme like everyone else and you want it back well i'm going to show you how to so let's go okay so it used to be the case once upon a time if you wanted to change the theme at least some basic colors in the theme if you were a system administrator you could just come to basic configuration ui 16 and you could scroll down and just tinker with the colors here to show something else but now you can't do that in the next experience which is the name that servicenow gives to the new user experience the new user interface for servicenow so how do we go ahead and actually create or change the theme in our servicenow instance again if you're a system administrator we're not talking about regular users in the platform we'll talk about that in part two of this video so the first step is let's go and explore a little bit shall we and come to our themes so if you have a look at this list here you'll find that there is one here called polaris which is the one that servicenow uses by default and if we open it up we can see here that a theme is actually a container for different ui theme styles which we see in this list here including colors fonts and some other properties as well which we contain here in our theme so when we go ahead and create our own thing we need to reference and we're just talking here about changing the colors of a theme so we're not going to discuss how to change fonts uh and other properties because there's a lot that you can change in tinker in a theme we're just going to concentrate on colors so this entry here is really the one that we're going to be looking at if you actually open up this colors here you can see this style record it's actually pretty long it's a json file here that contains all kinds of different colors for all kinds of different objects to be used right throughout your instance so you may be thinking well do i have to change every single line here i mean there are thousands and thousands of lines no you don't have to do that there is an easy way and i'm going to show you how to do this right now so we start off by going to a table that contains these styles which is cis ux style i don't believe there is a module for it so i just put in the table name and you can see here the list of styles that are available so let's go ahead and create a new one i'm just going to give this a name but actually before i create the name of the theme i want to make it a descriptive name to describe something about the colors in the theme so i'm just going to leave that record here at the moment and i'm going to show you an easy way in which you can create the style content the color content here for your new theme so what i'm doing in this video is actually recapping or recalling information from an excellent community article that was posted by my colleague ashley snyder on our servicenow community website there is a link to this page in the description below have a look at it it will tell you in very simple language and simple steps how to create a theme and to apply that theme so this is basically what i'm using as the basis for this demonstration here right now so in this article you'll actually find that there is a link here to a color generator website now this is actually a servicenow website so let me open it up here i've already got it open in a separate tab right here so there's nothing to indicate here that it's a servicenow website but it actually is if you do a whois on this website uh it will come up as belonging to servicenow so we've created this page here as a way for you to easily create your own custom theme just by specifying a few basic colors so we could come here and actually change some colors here so what we're looking at here is the default polaris branding the polaris colors here but there is actually an easy way and that easier way is to come to this button here called auto generate if you click on that you'll be asked to specify three colors a neutral color a primary color and a secondary color so that's all you need so how do you get these colors well there are different ways you can get them from your own marketing department uh if you are looking to brand your instance according to your own company branding but i'm just going to show you another way to do it if you just want to brand your own personal developer instance or some other instance that you're using for training and development purposes and you just need to have a different color for your instance so what i do i mean there are different ways you can do it i go to the color wheel on the adobe website which is color.adobe.com i'll put a link to this in the description below and we can see here there are literally thousands of themes that you can select from you can actually go ahead and create your own color scheme here but what i usually do here is just pick a color combination here that i like and just take three colors from it so you will find in all of these different themes or color themes here they're actually five colors but we only need three so let's actually scroll down and find one that we can use now there are lots of different ones here some of them we're gonna can look a little bit funky once you apply them to your servicenow instance so we want to keep it kind of neutral here so maybe i will take um maybe something a little bit darker not so bright so it's easy on the eye let's take maybe uh this one here so let me open up this and as i said we only need three colors actually we'll take the first three colors here okay uh you kind of have to mix and match and just experiment a little bit to see what the end result will be in your servicenow instance and i'm definitely not a color guru so i'm just going to go ahead here and copy this first one here if you just click on it it will copy the code that you need to put into your um polaris colors here so my neutral color will be the one that i just copied which is that one which is more or less a black color the second color will be a teal color so i'll just copy that paste that in and then my final color this is kind of a an army green a light army green and just pop that in there and there you have it okay so i'm just going to click on generate now okay and if you scroll down okay you can see that variations of those three main colors have been generated so what we need to do now is actually apply those colors to our new style in our servicenow instance so the way you do that is you just come up here to copy json now if i just paste that in a text editor here let me just bring this over here and paste that here this is what it looks like it's 219 lines of all the colors of the rainbow basically right here so what we need to do let me just move that away is actually apply this now to our new style so i'm going to come back here and i'm going to give it a name now and i'm not sure what the theme color palette here was called if it had a name it probably does but i can't oh there we go rock on okay so [Laughter] let's call this rock on okay i am going to uh change my scope here in just a moment yep that's okay uh i'll just call this rock on it's going to be a core theme in part two of this series we'll talk about variants variants will give your users the choice to change between different themes but we'll just stick with one core theme at the moment so before i can actually paste this json text in here i actually need to wrap it so i'm just going to put a little curly bracket there and then on a new line enter properties or not with a asterisk but with a quotation mark and another quotation mark and then a semicolon and then on the next line the ending curly brace there now what we need to do it's a little bit tricky but basically you just need that little line here and that little wrapper for your json uh color scheme so at this point right here all i need to do now is just paste what i copied over from that color generator uh that theme generator rather so that's what i've got here right now and i can then go ahead and save that so this is a style now that i'm going to apply to my new theme and we'll call this theme rock on as well so i'm going to come over now to my themes so under now experience framework themes theme management themes and go ahead and create a new one we will give it the name of rock on and we'll put in the description this theme rocks and um i will save it first of all and now in this section here this compositional app theme section this is where we need to specify that style that we've just created so the way to do that just double click there to add a new row we don't need to add anything to this applicability field we can just tab over to order that can remain as the default value of zero and now in our style field we can specify our rock on style so i'll just select that and then the type of theme is going to be core again we'll look at variants in the next video okay so i could just go ahead and save that and apply it but remember themes are not just a collection of colors there they also contain fonts and other objects as well so i think the two main other objects that you should include here and again i'm referencing the article here that ashley wrote in the community page here the two other ones that we need here are the ui 16 dashboard visualization compatibility okay so that must be for some kind of legacy styling for our dashboard so i'll just put that in okay and we'll also make that part of the call and then the final one here is our fonts so we've got like a standard typography style there that we can use and i'll save that hello it's a little bit fiddly click thank you and we will make this the core as well and go ahead and save it and we are just about done okay so um the only thing left to do is actually to apply this theme and to override the default theme in servicenow so the way to do that is to come to your system properties and then you can search for the right one so all the ones all the system properties are for the new next experience themes have polaris in the name polaris was the code name given internally to this new user interface before we released it in the san diego release of servicenow we can see here that the polaris experience system property is set to true okay so that is set by default to true for new instances um for san diego but if you're upgrading from an older instance that will be set to false and then the decision is up to you then if and when you want to upgrade to the new user interface and you just change that property so the the reference here down the bottom is the reference to our custom theme and you can see here kids this is a reference to this id so we need to come back to our rock on theme and copy this this id come back and i will open the property because i think i'm in a different application scope here so i will click here and then this is the default value for the of the sys id rather for the polaris theme so all we need to do is just replace that with our new one and save it and that's it so let's check out what it looks like let's test it before we decide to keep it or not so i will just refresh the page i think it's saved we just cancel okay instance was just a little bit slow there we go now we can save so now we can refresh rather so let's do that and there we have it kind of it's still learning a little bit slowly i found that when you apply new themes that it just takes a little while for everything to kind of kick in and all the fonts and the menus to appear here there we go working slowly but surely so our theme our color palette what did it look like it was that so it's actually taking this teal as kind of the main theme here so if i go back to my color generator here and go to auto generate yeah that primary color there was teal okay the neutral one was black and the secondary was that kind of army light green so if we come back to our page here it's taken that teal so it doesn't look too bad i would say okay but the thing you should do i should must do you should actually test this in a few different pages dashboards forms lists your workspaces as well just to see that you've got all your bases covered that you don't come across any nasty surprises with your new theme so actually what i will do is go to my service operations workspace just see what that looks like again it will take a little while just to load i think the first time i'll unpin my application menu and yeah that doesn't look too bad actually so you can see actually it doesn't really matter what theme you create and apply it's still going to keep you know white as one of the main colors for displaying forms and lists and dashboards and reports and things of this nature there we go finally it's loading not sure if it's my wifi or if it's the my computer that's running at a probably 99.99 cpu at the moment because i'm recording this um but that doesn't look too bad okay so there you go that's how you create your own custom theme and apply it to your servicenow instance and just remember the links to the relevant websites that you need to get your colors and for other instructions i will put in the description below to this videos so thanks for watching and remember in part two of this series we're going to learn how to create more than one theme have one core theme and several variants so that we give our users who are logged in the choice to switch between themes because at the moment if i come to my preferences right here we will see that there's no possibility to change our theme so stay tuned for that video and thanks for watching