hi everyone this video is part two in a two-part series about how to create a custom theme for your servicenow instance so if you haven't already checked out part one please do so in that video we look at how to create a custom theme using custom colors that you select and replace the default theme in your servicenow instance in this video we're going to take a look at how you can create variants for your themes in other words to give your users the opportunity to select the theme that they want to use in their instance so let's get started okay so in the previous video we learned how to create your own custom theme to go from the standard polaris theme that is shipped with the san diego release of servicenow to our own custom theme and this is the one that we created in the previous video we have a look at the list of themes here the one that we created was this one here called rock on the name was adopted from actually the name of the color scheme that i got from the adobe color wheel someone had actually created this color scheme already kind of for us so this is what we've got here and we saw that it was actually a theme that used a or referenced a style also called rock on which actually contains the colors that we're going to be using for this theme we also saw here that the type of this theme was a core thing which basically means it's the the default theme that we're going to be using so in this video we're going to look at how to create variants to give users the option to select what they want so if you followed along the first video okay this step here is real easy to do the first thing that we need to do is actually to create a new theme so let me come back here and go ahead and create a new theme i'm just going to give this a very generic name theme collection 2 only because i've already got a theme collection one and a description contains some themes okay and we'll save that our themes both our core themes and our variants so the variants will be the themes that users will be able to select from when they go to their user preferences so at the moment if i come to my user preferences here we'll see there's no opportunity to select a theme okay but we'll enable that but before we do enable that we're going to create our own theme collection of themes that users can then select from so before i get started here i'm going to go back to my style so the easiest way to do that there is no i don't believe there's a module to link to the table so i'm just going to open up my themes and my rock on theme once more and then go to my rock on style and we saw in the last video we could generate this color palette from an external website called color generator this is actually a service now managed website it's been specifically built to create themes for your servicenow instances and this is the the theme or the color palette that i use for my theme so i just went to copy jason here and then i pasted that into the style here so at the moment though this style is classified as a call style so what we need to do is basically duplicate this and classify it as a variant instead and then we can include it in our theme collection so i'm just going to actually change this to variant and then do an insert okay so now i've got actually two rock on styles one core and one variant so the core is attached to this theme here but the variant i want to include in my new theme collection too so let's go back now to my theme collection too and now we can start adding rows here so the first one i'm going to add are the two ones that you should always add i believe uh which are the ui 16 dashboard visualization compatibility theme i'll just select that sometimes it can be a little bit fiddly to select so that's going to be part of our call and i will add another entry here for our fonts so we select the typography style there that's already built in so that actually won't be changing all we're concerned about is the colors in our theme that will also be a core and then what i'm going to do here is select the standard polaris style that servicenow provides so that's actually going to be our default theme in our theme collection here so i'll select polaris and that will be the call now everything else that i add here will be classified as a variant so i've actually got the theme that we added before which was the [Music] rock on uh now we've got uh two styles here one is a variant and one is a core which one is which i don't know let's see that's like the second one assuming that that was the one we wanted okay and i've actually got a few other themes as well or a few other styles that i can use that i created earlier so i'll just maybe put in another couple here um one was called ocean yes ocean hello select it yep that would be another variant and i'll add one more uh which was called junescapes that's right so let me add dunescapes in there okay yes and that will also be another variant there before we go any further i will just save this right now i'll show you how how you can actually create your own dark theme and add it here as well so if we go back to our color generator this is the one that i used before to create my rock on theme now you see here there's a switch here to go to dark so if you just click there it will adjust the entire color color palette there to match a dark theme so instead of showing a white background on your forms unless it will be black and all the colors will be adjusted accordingly so that's all you have to do and then go to copy json again and then add that to a new style in your instance so let me go ahead quickly and do that i will just go to my table sorry sis ux style.list and so we've got all our stars there so i'm just going to create a new one and call this rock on dark and this will also be a variant theme and again we have to put in the curly braces here and type in properties in quotation marks followed by a colon and then i will just put in my ending brace there and then just paste in what i've just copied right there for my dark theme and then save that and then go back to my theme collection and then add that as my last variant i've actually got quite a few here so this is going to give our users lots of choices so uh rock on dark that's the one yep select it that's what i want yep thank you and we'll select that as a variant as well and i will save that okay so now we're nearly good to go all we need to do now is to change a couple of system properties the first thing i'll do though is go ahead here and copy the sys id for this theme because we'll need to reference that to replace the or to specify the default theme for our instance so i'll come over here to my system properties again we will search for the polaris system properties here so a couple of things we need to do the first one is to overwrite the current theme the current default theme which was my rock on theme so i'm going to replace it with the theme collection that i just created and update that and waiting and there we go and then the second and final thing we need to do is this first property that we see at the top uh polaris dark themes enabled this is currently set to false we need to set that to true that will basically give users the opportunity to change things so let me do that so by default there is a dark theme available for polaris and so if you enable this property as well you will be able to use that polaris dark theme um i don't think it's case sensitive but we'll be safe here let's make it all lowercase okay so now we are good to go so i don't think i need to log out if i just refresh this page we see now that it has reverted back to the default polaris theme because we selected that as the core theme in our theme collection and again it just takes a little while for everything to kind of kick in once you've changed the thing but now it's there it's all looking as it normally does in another box new instance of san diego and let's go now to our system preferences our user preferences rather here and now we can see we've got this theme tile so let's select that and now we can see we've got our variants here we've got the default polaris theme we've got our rock on theme we've got dunescapes ocean and also the rock on dark theme so i can select each one you can see a little bit in the background it's a little bit faded uh that the themes are actually changing in the background there so i'm actually really curious to see what the dark theme looks like and close that did that update i'm not sure let me just refresh okay that looks a little bit better i'm not sure it's the most attractive uh theme i've seen before but it does work so i think with dark themes in particular you have to be careful that they actually do look half decent so your users won't be annoyed so if you look at the dark theme for polaris that's quite neutral i would say and yeah but this one here is looking too dark for me so i might just come back here to my preferences and maybe switch to dunescapes which is another theme i've created previously let me close that and just refresh the page again that's just a more neutral blue blue and white theme nothing too radical here but that's it ladies and gentlemen that's how you go ahead and create your own theme collection uh the important thing is is that the default theme is specified as the core theme and then all your other themes are specified as variants but remember they will be two separate records in your styles table that we looked at earlier one associated to a core theme and the other one associated to a variant theme okay so that's it thanks for watching see you next time