first slide itself says that we are going to discuss about a theme Builder let's have a look into the agenda for today's session what is theme Builder highlights from the vancor release what are the new features added in the vancor and which plugin do we require to start with a theme Builder and a quick and short demo on the theme Builder theme Builder enables us to organize the visual experience for users not only that it helps to update look and feel of more like your Brands this can be called as low code or no code tool for creating themes to reflect your company's brand and it saves time and reduce complexity of coding by automating color generation and styles in a easy and efficient way let's move on to the highlights of the onecore release we already discussed about this autogenerating themes and style records as your own choice and you can Define your own colors logos corner shapes typographies Etc without using Json code why we are mentioning here without using Json is like in Tokyo and San Diego we don't have theme Builder application or Plugin so that we we used to write Json coding to style our own theme or to edit our own Styles coming to another feature we can use preview and change the theme before applying it to your instances you can also view duplicate delete UPL themes for all your experiences in a single location moving to the new features in vanor we have two interesting features one is alternate color palette and other one is about component Styles let uh let's start discussing about alternate color palette after creating a theme for each and every theme you can add alternate color palets as many as you want and these alternate color palets can be uh applied by going through the user preferences we cannot apply it directly from the theme Builder and coming to the component style this is a good and cool feature so each and every can each and everyone can have a look at the graphical list of component Styles where we are going to use like buttons radio labels and each and everything we can have a look in component Styles let's move to the plugin this is the main plugin and this is the single plugin before starting theme Builder we need to have our instances after opening your instance in filter navigation you can type as plugins I already installed the theme Builder plugin just once we can check whether it's installed or not I'm sure it can be installed theme Builder type theme Builder and presenter and it can be shown in installed because it is already installed by me if it is not installed it can be shown in available for you so by opening this theme Builder plugin you can get the summary of what is theme Builder and what are the versions and what are the key features of the theme Builder what are the release notes and system requirements do you have any dependencies on this theme Builder or not I'm sure there are no dependencies for this particular place again let me jump into the team Builder please open the theme Builder it will open up a homepage see this is the homepage here we can see theme Builder pages in Pages we have three different types of pages one is home other one is manager and other one is editor so here we can start creating a theme and you can see how we can manage other Pages like manage page how we can see it in a manager uh manager tab let's start creating a theme click on create a theme here it is saying that we need to have logos and colors already Define before creating it so let's continue click on continue I'm giving them as Glide I'm giving description as for my own choices so I'm clicking on next after clicking on next it will ask to select primary color secondary color and neutral color here we can see what is primary color and what it defines like where uh where we can use it or we can see it we can see it on interfaces such as app navigation menus and other common components let's have some good color I'm keeping it as green see here you can see it is applying as a green here here here so click on next and we can go to the secondary color and the secondary color we can select it as some this color and if we apply it we can see it here this is a second secondary color and this is our primary color let's go to the next it will show to select a neutral color this neutral colors can be shown in relationship between objects or a divider lines and surface containers so let's select some different color so that we can find it easily so I'm applying it after clicking on next you can choose to add additional colors if not required you you can skip it and you can move to next and you can upload a logo here I'm going with the service now logo so you can upload a logo if you have some constraints and these are the file types and this is the uh file size and file types before uploading a logo you need to consider you need to consider after that click on next so here you can see fonts this can be called as typography so I'm you can select any one of the font based on your choice I'm going with source and pro and I'm clicking on next so you can select the corner shape based on your preference and here first one is square so here you you can see Square buttons if you click on most rounded the buttons will be like most rounded each and every card will be most rounded so click on next here it is a final r view what we have done till now and this is our theme name and theme description and primary color secondary color and neutral color which we have used earlier and this is uh service now log it's it is populated automatically it's taken automatically and this is the typography of font which we have selected and this is the shape and I'm going to click on create team here you can see we have UI style preview and experience preview this is the primary color which we have added and this is our secondary color which we are seeing it here and after that coming to the experience preview you can have a preview already these pre uh uh we have discussed this in highlights of vancor release we have a preview section in vancor release and the the here we go we can have experience preview and in coming to the global Styles we can have our view again we can have theme name description if you want to edit it we can edit it directly here and primary color secondary color neutral color these if you want to edit it you can directly edit from here before applying your theme to your instance so all this and here also we can see each and every individual like colors these are the primary colors and if you want to change background colors you can modify right here or if you want to change border colors you can do it divider colors whatever colors you want to change you can you can do it here coming to the component Styles we already discussed in the new features in vanod these are the actionable components and graphical representation of a component Styles primary secondary and tertiary these buttons can be seen on the workspaces or UI when you are using it can be a primary button it can be a secondary button it can be a tertiary button and button bear means labels present inside the button or names present inside the button and this is a chart icon and we have many icons like drop down split Downs split buttons text links headings uh radio buttons checkboxes inputs input passwords these all comes under component Styles not only that we can this entire thing called as canvas color canvas we can change the canvas color by clicking it here if you click on this this is a pure white color and you can click on apply so that you can see canvas color is changed to white color so if you want to filter out you can filter out the actionable items from here display type formal controls these are the types of component Styles or actionable items we have in theme Builder let's go on to the page starting when we are creating a theme we are on homepage after creating a theme we will redirect to the editor page so where we can edit each and every component or Styles here once again before applying it to a instance and this is theme we have currently three themes one is slide theme which we have created recently and Polaris is a default theme us web design is also a default theme given by the system and you can deploy the theme in based on your application scope you're interested in so let's apply the theme applying the theme can be done in three ways one is web and mobile and web only and mobile only so I'm applying it to web and mobile let's click on web and mobile click on APPL so it should apply to our instance let's reload this page so it should change to our own team which we applied recently theme applied you are now using glide on all webon mobile experiences let's go there see this is our primary color let's check out secondary color on workspace mostly secondary colors can be tested on workspace and these all uses primary color I'm opening workspace see here also we can see see this is also highlighting with primary color light green primary color let's see here we can see the secondary color which we used for our te this is the secondary color and this all comes here here we can see each and every color we're going to use this is how we can see primary and secondary colors and coming to the buttons let's have a quick look here we can see this is a button and uh in component Styles we already mentioned this can be a primary button go to component and see this is a primary button on list we can say it is a primary button after opening record whatever buttons we are seeing on the records it can be a secondary button and this can be secondary buttons see this this is the label they are using there see secondary is the background of the color and label is also secondary label they are using it after that see here we can see all are in primary colors let's move on to the alternate color palette let's move on to the manager page here we can see all the them screen till now and this is our own theme and these are the out of the box themes provided by the system these can be viewed in two different views one is grid view another one is list view so um let me go to the grid View and we can edit from here directly or we can start clicking on more options here we can see duplicate or delete or add alternate color pet options so I'm going to click on ADD alternate color pet option it is populated automatically theme group name let me give pallet name I'm giving it as Glide palet and I'm clicking on next and here we need to select again primary secondary and neutral colors as per our interest I'm going with red next secondary color I can go with pink or something else don't get weird about these colors just we can short demo and I'm going with the same neutral color I'm clicking on next and if you want to add any additional colors you can add it and Logo will be the same and topography and shapes can be picked from the main theme which is a Glide theme so in color palettes we need to Define only colors so quickly click on create alternate color palette so that it will create a palette and here here we can see and here we can go with our preview and this is our primary color and this is our secondary color in the Petes and same here same we will be having global Styles component Styles and everything these colors will be changed according to our primary colors and secondary colors what we are using in themes and Alternate com uh alternate Style alternate color palettes let me show show you here in themes you can check here Glide group so under Glide group we are having Glide theme and glide palletes and here itself says that available in user preferences we already discussed that color palets cannot be applied directly from the theme Builder they can be applied from the user preference okay let's create one more color palette quickly so that we can check as many palettes we can create so I'm creating one more palette and I will name it as Glide palette two and I'm going with the same colors which they have provided I'm creating a palette so this is my secondary palette and you can see component Style colors will be changed automatically with the primary and secondary and neutral colors and these can be captured in the update sets while we are while you are working and those can be moved to different instances let's check on our main page and this is a main theme our um we applied earlier let's check the user preferences now as a system admin I'm clicking on preferences if you are using only a single theme and you don't have any color palettes to that particular theme this theme card will not be shown to any user if you are adding alternate color paletes to a theme then only it will be visible on the preferences section of user profile so click on this theme you can see it here this is a default and main theme and these are the pallets which we are added to this particular theme so let's see here and this is the main theme let me add here Glide palet for this particular profile okay this is the Glide P um Glide pallette and let me impersonate user with able tutor so able tutor can see the main theme because whenever we are applying a main theme it will be applied to each and user each and every user present in an instance so um alternate color palet palet is a user preferences they can change by their own choices if the ab tutor doesn't like this theme they can change they can change the preferences with alternate color palette that those alternate color palettes only visible to that particular person but main theme will be present for each and every user this is how we can use alternate color [Music] palette