foreign awesome it is 11 o'clock um I want to thank everyone for joining today we have a pretty packed house here today for 2023 so exciting um so welcome and thank you for joining our next experience Academy um this is just our monthly Academy session where we discuss all things related to next experience and as you can see we have a lot more folks on this call um for 2023 so I'm going to keep um introductions brief because we have a jam-packed um session today with some really exciting things um I did want to go ahead and just do some quick introductions here before we get started we do have a special new addition to our team I will let um Gabby introduce herself today Hello nice to meet everybody my name is Maria Gabriella Ochoa press Vector a lot of you might know me as MGO PW on the community and this is my very first Academy it's an outbound product manager for servicenow nice to meet everybody again and then um joining us today as our presenters um so we have Scott Messick um and Jackie Lewis from our inbound now design system team I'll let them go ahead and introduce themselves uh hi everyone I'm Scott Mesick I'm a product manager on the design system team good to meet everybody and I'm Jackie I'm a product manager on the design system team with Scott awesome thank you um so I'm just going to do a few housekeeping things real quick and then I'm going to hand it off to Scott and Jackie today um so our today's session um is on uh theme Builder um and our theming engine um I do want to go ahead and just mention that these topics are informational um they're not a technical Deep dive we will be recording this session and it'll be posted on YouTube and if you have any questions please ask in the Q a window so our team is going to be Fielding questions in the background as Scott and Jackie are presenting and we will pause during the session too if we think that the question is relevant to the content so please put your questions there instead of the chat um that way we can get to them um and then before we go any further we just go ahead and throw out the Safe Harbor notice before I forget um so uh we may have some forward looking statements on the academy today um just some products that are still maybe uh in Discovery or so being developed so please don't make any purchasing decisions based upon the content that we cover today and with that I will go ahead and hand off the sharing um to Scott perfect so uh good morning everybody um I'm going to be speaking about uh theming capabilities and generally um specifically our theming engine which is a way that essentially styling is delivered throughout the next experience um when we think about theming and and all of that I think it's critical to ground ourselves in uh sort of how we how we approach this and how many companies approach this this uh this area and that's with Design Systems Design Systems um are essentially you're going to boil down to patterns and practices that can be applied um typically to product development and in servicenow we have a design system that's the now experience design system and that's exactly what our design system does it's been um a few years uh in the making It's relatively mature um it does you know exactly as I mentioned support all of the patterns and practices that we apply throughout you know our our product development at a very very low level it contains uh things listed visual design language and assets our principles style guides Etc and an important and emerging part of our design system are theyaming capabilities specifically the theme engine which I'm going to speak to and then theme Builder which Jackie will speak to so uh what is theming um it's really about being able to systematically customize uh our design system to reflect a product or brand um we know it's increasingly important for our customers to be able to realize their branding goals um and it's a little more than I think just styling um it's a little bit broader and and maybe deeper than that and uh you know through theming we're we're looking at a holistic approach to uh um make it make that styling as simple as possible as powerful as possible theming typically involves changing you know colors that's an obvious but it can also include you know fonts and spacing and the shapes of elements the forms of elements things like that at the end of the day it allows customizations to achieve branding goals and an important part of this for us is providing upgradability and improved experience we want to make sure that any future upgrades are seamless and that the work done to implement theming is you know something that's transferable you know pretty simply as we move forward in our in our product development here so just a a very broad statement here but to summarize all of this this theming engine is a infrastructure that allows customers to control the visual style of their next experience applications in support of their branding needs and that's that's the bottom line here so the challenge that that we took on here is how do we style at scale kind of as I said I think styling particular elements styling even Pages you know we all know that can be done using CSS and has been been for years as we looked at theming like we thought how can we how can we Elevate Elevate this um and how can we make it as systematic as possible and so the approach we've taken uses style variables and those style variables support styling of things as mentioned like color shape form type typography we organize them into three different levels and this is really I think the power of our design system here in a picture at the very lowest level we have generic variables these are uh style variables that um apply very broadly across all types of elements um on in a workspace so the very lowest level second level we have are categorical elements this would allow targeting style targeting at say a category level could be say buttons or text or um you know some so groups groups of elements and that's the second level the highest level of styling we have is component level styling this would allow targeting of very specific components when we apply styling at a component level it would override anything applied at a categorical or generic level if we applied styling at a categorical level it would override generic level we could actually ride with only generic level style definitions not categorical categorical or component and things would actually look pretty darn good as we want to refine our our approach and get more specific about the style where applying we'll use categorical hooks as the next step and then component hooks as probably the final steps to really fine-tune the look and feel of things so here's examples of these theming variables theming hooks we call them style variables um generic variables um as said the lowest level so they're you can tell just by their name you know they're very very basic in this case we've got three color variables neutral primary and secondary and these would drive drive color pretty much across all elements of the application an example of a second level categorical variables these are going to Target specific categories in this case I pulled out some text variables so when I apply values to these variables they're going to style different text elements in my applications but it's pretty pretty broad they're very broad strokes and will pretty much touch all of the text regardless of whether it's in a button or whether it's in a card or whatever the final level there component level here I'm targeting very specific component components in this case in the example I have is a card and here I can Target say the card header heading primary color or the card caption color and these are a couple of different different elements that are in a in our Now card component so I'm going to show you an example uh let's let's have some fun we'll do a live demo so this is um asset workspace and I'm just going to use this as a as a certain base example so um we're going to go through um an example of the theme engine and what I'm going to do is start with say the very lowest level of uh style variables and then we'll build up from there and I'll show you exactly how these get applied and what happens when they're applied so I've created a demo theme I've just jumped into ux themes I'm going to click in my theme um my theme consists at this point of one uh prop uh style property record and this is affecting colors and I'll click into that so you can see I've pre-populated this but this is those first uh generic set of hooks that I showed you and so I've just got very you know the simplest sort of information implementation I can um these three color hooks really cover my entire workspace um and uh we can actually see the example I mean I showed the workspace that's having these three hooks applied so let's what I'm going to do I'm going to grab a couple of others and actually before I do that let me go back to the workspace so what I'm going to really focus on is the um the card card container um here uh and use this kind of I'm sorry the card component here and use that as my uh that's my point of reference so let me go back to my theme what I'm going to do is add a couple of style property records and these I'm now targeting basically all of the text within the application and I'm using some pretty kind of I don't know garish but some it's a very very basic colors just to make sure that they stand out and there's no question about what's being styled or not styled uh with those with those theming variables so let me save this and I'm going to go back to my workspace actually we can already see that the styling has been been applied I've got some green text and some red text and some blue text so this is enough this is these are all examples of the theme engine applying the um styling variables refresh my asset page and so now I can see that really all of the text that um is on the page has been affected I mean generally speaking has been affected by those categorical level variables that have applied so let's go one step further I think and let's see if we can't just for sake of example update the styling of our card components so I'm going to actually go back to my theme and I'm going to add two additional hooks and I'm going to put comma here to make sure it goes through right so now what I've got these three variables are targeting my text category and these two variables that I've added now are are targeting specifically the card header and the card caption and I'm using just some very basic coloring here some Shades of Gray so let me save this and I'll go back to my asset workspace and I will refresh and so now what I've got is uh through the theming engine I've been able to um Define those variables for styling for my card I've defined the color for them and we can see now I've gone from you know really having just the the simplest case of using only generic variables in which case my workspace looks uh um you know doesn't have a lot of of unique color applied to it I then targeted the text variables and very broadly you know categorical level um styled pretty much all of the text on the page and then finally I just targeted the uh the cards here and the card header and the card captions specifically there's one other thing I want to mention and that is there's two properties here I'm sorry there's two sections of properties here in my um my style file the first one here the base section um our theming engine actually generates uh style variables um under the covers based on the colors or based on the the variable values I specified here and that's that's partly why if I have nothing else specified here and I only use these our dimming engine actually produces those those variables under the covers and populates them with color colors and just talking about color hair colors that are based on on these colors I've defined here when I add these variables I'm not actually overriding things that get generated or are derived under the covers by the thinning engine from these variables so the one thing I want to say is there's maybe you know while this is valid and this is this is awesome there's potentially a little bit of danger when I hard code color values in here and the reason for that is that um you know I may additionally want to have let's say a dark theme variant so in this case I'm working uh with with a theme that is relatively light what if I wanted to have the inverse of that or for whatever reason and have a dark theme and this is actually support supported in our Polaris theme which is out of the box when I specify these hard-coded colors here these are GB values the theming engine will always always use those so in this case my heading primary color will always be this great color my caption color always be this gray color what actually what I can actually do instead is reference a variable that is has already been defined and by doing so I'm ensuring that the derived colors will be applied and that regardless of sort of whether the theme is relatively light or relatively dark the theme engine is going to serve up an appropriate color Shades and my theme will be safe to use you know again whether it's sort of light or dark so let me just give you an example let me um uh show you real quick I could just grab one of these variables and use this here and actually um I know that a number of variables are derived from my neutral so I could make this say neutral nine that's going to be a relatively dark color and similarly I can make this neutral six right and so what I'm doing here instead of hard coding colors here I'm going to reference variables that are generated from this section and this will mean that I'm kind of safe if I do create theme variants that I know my colors will uh be generated safely and work within nothing and let me just show you just for the last step here to go back with that applied yeah it's probably not the not the right Shades but you can see the shade has just changed slightly so cool so that is the end of the demo awesome thank you Scott um we did have some questions I think are relative to this before we move on um that we're asked in the Q a um the first one is do we have a document somewhere of all the hooks available that customers can access or do we have plans for that we definitely have plans for it we have had a uh a website that was up that was referenced a lot of different times and it um list of the variables um let you kind of kind of interrogate them using some filtering capabilities very useful and for a couple of different reasons we had to take it offline but that will be replaced very very shortly with a um a similar um capability with all of the information about all of the variables I will say at the component level I think there's about 1250 unique variables um so there's you know it's a great question and yeah there's there we need to have that listing available it's definitely planned awesome and then um we did have another question um it seems like the primary and second very colors are really easy to spot when you are setting them um but what kind of things um are the neutral color variables used for yeah um they are they're sort of my the primary colors that are that are used and really their their main purpose is as a source for other colors that are produced by the theming engine and applied to the workspace um so while it may not be obvious like in in the example I had have and I am still sharing my screen it may not be super obvious to see you know this gray color and this blue color and this sort of bronzy color in the workspace but what's happening under the covers is the theming engine is deriving um really CSS variables and and CSS hooks under the covers that are used throughout the workspace so that's really their primary purpose is kind of as seeding values for um for style styling information that's delivered in the style sheet to the page okay and then um one follow-up and I don't want to go too deep um so we have enough time but we did have a question on maybe how those are are calculated is there some kind of high level answer uh because I know that could probably get pretty technical on how on the derived colors are calculated yeah this is an awesome question um we have a proprietary algorithm that we use um to do that so that that's the the nuts and bolts of it um it I I started to mention or I did mention you know that we in polar for the Polaris theme we support both a light and dark theme and we know that you know Dart support for a dark is an important thing but if we look beyond that we want customers to have the ability to create any number of what we call variant Styles they may be relatively dark they may be gray they may be holiday themed whatever you know delightful sort of theme or seasonal thing that may be um useful or or you know you may want to have um this algorithm that produces those derived hooks is capable of recognizing again whether the theme is relatively light or dark and producing colors in line with that so okay awesome well thank you Scott um I know we do have some more questions and we'll kind of hold those till the end I did want to get to the ones that were kind of relevant to why Scott was speaking to with theme engine um before I pass it off to Jackie I do just want to launch a quick poll it's one question um and I'll keep it up for just a moment and basically the poll is have you created a next experience theme and you have answers of yes or no and I'll just leave that up for just a second and I think a lot of the Q a that we have regarding a theme generator or some kind of helpful site will be answered in just a moment um awesome so I'll go ahead and close down the poll we got a lot of um great participation so it seems like um Scott and Jackie just so you guys are aware we have 35 of the participants who are on here today they've created a next experience scene um but the majority haven't yet so you know about 66 the numbers keep changing um so this is going to be like new Concepts uh and a new way of doing it so this is a great session to attend if you have not created a theme yet but if you have to you're going to get a lot from this too so Jackie with that I will hand it off to you all right well I'm excited to take you guys through the content for a theme Builder um and thank you Scott Farley and the foundation of what all of this is put on top of this is really the framework for an app like this to be created it's the Design Systems first application and we're excited to show off uh the power of theming in an easy to use tool for low to know code uh users so the problem that we set out to solve is that we've built an amazing theming infrastructure that we had just seen but we don't yet we didn't yet have the support tooling uh to enable users particularly admins to realize their brands in their experience in an easy way VIA theming we had reached out and talked to real customers and they gave us a couple quotes about their current theming experience so some of you that said that you have created a next experience uh so far you might relate to some of these so one of our participants said that they couldn't necessarily hand off theming to somebody else they really needed someone with a technical knowledge to help them um putting together the pieces of theming to create a visual consistency across the platform was a pain in the rear end for someone um another team was a little worried and apprehensive that their Dev teams were um may break those customizations or that customization is related to themes may have to be Rewritten they might break on upgrade and they're even considering that if theming is the option worth the technical debt to maintain it um and then the last participant the last quote I'll just say is that um this customer needed an easier way to enable consistent branding across their applications and as we saw with Scott's demo this is their current reality so I think a lot of these users had seen this before and tried writing their themes but they found out that theming process requires extensive servicenow knowledge you need to know how to get here and manipulate the record the way that you want you need to know how to develop and code Json and how all of this hangs together and you need extensive color theory knowledge if you want to make the colors match and put them where they're intended in your brand um this customization process also currently requires external tools it's really time consuming it's difficult and again painful to maintain and then finding these relationships and among all of our hooks that we provide is pretty difficult and there was a common phrase called hunting and pecking where users would just try out a lot of different things preview them and that also contribute contributed to increased time to create a theme so with that NDS set out and built our first tool which is theme Builder this will allow you to manage edit and Implement themes in an easy efficient and upgrade safe way so you can reflect your company's brand in your workspace so this really gives admins the power and control to make and apply these themes really quickly and see that value of your brand in your workspace to your end users so much faster so what could take potentially currently weeks or months for people to onboard and be able to get to the level that Scott and I are at right now to create really robust themes now takes a matter of minutes and this is really important because theming is essential for most customers brands in general as you guys know creates a sense of belonging and Alignment to company values supports that visual consistency and wayfinding in your experience and even increases productivity those saving customers that wanted to theme but couldn't told us how important it was for their brands to be realized there was talking about how their employees really matter and they wanted to provide that visual experience for their end users creating a modern and best experience via this beautiful UI aligns to their company values and motivates people to feel like they're using the latest and greatest technology that consistent visual experience helps people follow the application and know where they are and actually a lot of people use themes and managing multiple themes as a visual aid between different workspaces so sub and sub prod and prod for example they know they're making their changes in the right environments via theming and admins will have the ability to create their own themes but the power for end users to select from these themes and really personalize and customize their own workspaces gives them the sense of ownership and seeing their sense of self in their own workspace so it's a combination of very essential brand management but also a delightful factor of being able to customize where you're working every day so with that I'm really excited I'm going to show you a demo of theme Builder just to know as well this will be available in the store in early February so you guys can get your hands on it and play with it as well and can we confirm what version theme Builder will be compatible with it'll be starting in Utah you can um uh play with the theme builder in Utah and Beyond so I have theme Builder favorited and since it does come into the store um I have it installed as a plug-in um just for reference though it's under um next experience framework and it'll populate under their theme management so I'll go ahead and open the application and will be ported to our beautiful home page um so this is where you can get to know the app a little bit more we wanted to start building trust with you guys and get you to know what theming is and what you can do with this application um so there's a little bit of wayfinding um introduction to some of the features that we have and some useful links at the bottom as well if you want to learn about theming across the platform so to create a theme I have a little cheat sheet here of a fictitious brand and we'll get started to create a theme via this really easy to use wizard so I have my logo assets ready and my colors ready and I'm ready to go so we'll call this one website planet and it'll be a default theme for um my company oops and what this is doing in the background is auto generating a theme record that Scott had shown in the background so even if you log out or if your computer stalls that theme record will always be available to you um so it's writing it as you create it so I'll select my primary color and via the subtraction you can see where those colors might start applying and in this workspace when we get to the edit phase we can change those as well so this fictitious brand does have a secondary color this is optional so if your brand is just uh blue you have the option to skip this and if you notice we came in here and it automatically generated that primary color as your secondary tube but we'll give this one a nice little Punchy pop of um darker lilac for their theme neutral is also something that you can configure for this demo I won't mess with this too much but it is set automatically so that most brands will be compatible with this neutral color that works really well in our workspaces out of the box um next we have this concept of additional colors internally we call this our crayon box for reference in our edit workflows as well so if you have for example any additional colors or seasonal colors that you use for brands or pops of color um throughout you can apply that so as you remember I added sort of a lilac phase colors for the primary for this brand their pop of color will be a nice pink and then I'll upload my custom logo um so this one um there are image requirements that uh shouldn't have changed uh throughout time so what you were using before can also be used in theme Builder and as you saw if you don't have a logo it'll fall back to the servicenow logo here as well so that is also optional we do have some fonts available out of the box from servicenow so you are able to select from these preset ones there will be more to come there as well and you can select your corner radius so if you wanted to preview that in the abstraction a little closer we have a zoom up option so that you can see the components changing their shape and select what works for your brand and then you get a nice little receipt again um this is creating the theme record in the background so this is mostly just for your reference if you wanted to go back in this workflow and change anything on the Fly you can do that or you can create your theme and hop into the edit experience so this is where you can kind of preview your theme before you apply it which had taken a long time and a little bit of um creative thinking to preview your theme before you apply in the past so this just gives you an easier way to do just that and make sure that all of your changes are actually applied everything looks great and give you the ability to edit if you see fit um so in the experience preview these are just abstractions they don't actually quite do anything but we had added the ability to preview your themes on a dummy instance so depending on your experience you can go into your workspaces and actually see a sample theme applied which is great so for this workspace um I want to show you how you can use your additional brand colors for addition for a little bit more of a pop of color so we do have these in-depth kind of editing panels as you saw this was the overview and something that was pulled from The Wizard workflow but if you wanted to Deep dive into color we've provided you that option here as well so just to know let's try changing our surface brand color um to uh that additional color in our Color Picker we have these pre-generated we're using the algorithm here colors just based on your one selection of color so if you just had your primary and secondary we derived those for you using the algorithm so you don't have to do all that math and um it solves the need for color theory here you don't need to know too much about what these are doing so I can also Plug and Play If I don't know out of the box what surface brand does I can select any color from that Color Picker and see what it'll apply to as you saw the backgrounds change in the surface colors here so I didn't actually need to know what surface brand relates to any of the hooks but I'm able to see what it might apply to via these abstractions and let's say this customer wanted to put some more contrast in their buttons as well they can go ahead and do that in these as well so this one is a fun one to play with as well I'll just go ahead and change our primary system which relates to inputs and selectable items to our secondary color as well so this gives them an ability to get that pop of color to a select number of global styling hooks so that again with just one decision of where where you want to make these changes applies globally throughout any of your experience that you have access to so um as a customer this is looking good to me I have that punchiness of the pink with the buttons and the background surface brand I'm going to go ahead and um apply this to my workspace so right now um we have this manage page it is collecting all of the themes that you have created and it comes with your default themes that you have out of the box so this might be familiar for those that are in San Diego we have our default theme that we give to you and then here's the one that I had just created this is also a filterable via a list option as well and I can just go ahead and apply this with a click of the button so this was my website Planet theme I'm going to go ahead and apply it's letting me know it'll replace my default theme which I am okay with and at voila it is applied so if I go back to my instance and give it a quick little refresh because it's just been sitting here you'll see that my logo is here all of my primary colors are here my Surface brand is looking great um and I'm able to just go on with my day so again what takes potentially months to write that theme record to get it to this level of visual consistency I'm done within less than five minutes have fun in my demo awesome there's been lots of excitement in the chat um I think that was really great uh I know we do have some questions but as you guys can see if you've been working on this in San Diego and Tokyo you would have had to kind of use Dev tools or go and find on these things and Jackie was just able to do that for us so quickly uh so definitely worked the way in my opinion um but we do have some really great questions here um and I'll kind of fill them out you guys this way um so the first one was if we can install this to our pdis um and it should be available for your PDI um it is a platform product it is not licensed um you will have to really wait for the store release um which is in early February to see it but once you go to the store you should be able to get it for your PDI so I did want to broadcast that and let everyone know um another good question um for you Jackie is if they create let's say that they have the same builder in Utah or they have it in a PDI can they create a theme here and Export it out to Tokyo oh I see um I don't see why not it is creating a theme record that is um just as Scott had said been working since San Diego so I wouldn't see the reason why you could create a theme Here using the application and then using it in an instance before Utah awesome and I think we're gonna have some documentation on the community about that too because I know that a lot of customers will still be on Tokyo but you do have the ability to get this on your PDI so this would be a really great way to start learning the tool but if you want to start theming or need to start theming and you're on in Tokyo or San Diego instance then you can export those records out um so we'll have more documentation on the community on how to do that once theme Builder has been released I I would add there's probably some level of risk there it's possible that things have changed from Tokyo to uh to Utah even if we don't if it's not obvious to us so if you're going to do that test heavily and your subprods before you do anything like that in Prague awesome thank you Brad um the next one so are we able to add our own custom fonts into theme Builder yeah Scott do you want to help me with this one uh yes I mean in in general yes our dimming engine supports um font specification of a custom font there are some limitations and I can only kind of speak generally um you know we've we've implemented a couple of fonts uh ourselves um the design system and you know not every single font scales uh in the way that maybe we expect it to scale um in our in our case we used a couple of Open Source fonts and it took us a little bit of time actually working with the font developer to make sure that they were really up to Snuff and really um uh you know weren't any unexpected or unintended side effects so I just use sort of a caveat yes it's definitely possible um want to make sure you know kind of as Brad said do any testing on your sub prod also make sure you have license to use that font that's another thing you know you can't just use an adobe font and throw it on there you may not have license to use it in that manner so just make sure you're using an open source font or a font that you have the broad license to use anything you'd add Jackie in theme Builder I would just say we again just expose the ones that we know will work on our experience out of the box but yeah you can in the theme record as Scott was saying add and reference different fonts to just do some testing beforehand yeah I'm typically we have some product documentation out there on how to do that already awesome um so we have some more questions here or get on time um are will you be able to clone a theme as a starting point in theme Builder ah that is a great question I'd love to know a little bit more about the question if anybody could elaborate um are we able to do that actually in these sessions um let's see I think I put it in the chat to see if we can elaborate on that a little bit more we can come back around through that one okay I would say um if we aren't able to clone them in the way that you want um theme Builders very quick so if you had again those referencing colors or you know what you're shooting for you can create your own new theme using the latest and greatest technology and the newest theme record and our color algorithm in just a couple of minutes as well so if you're not able to migrate your old themes over you can create new ones in in theme Builder that'll probably extend a little bit further than the ones from Legacy it looks like Martin continued his question in another q a question um he said they said for example start from system dark mode and modify from there I see just one note before I asked uh answer that one as well um in theme Builder we don't yet have the support for um either uh theme variants or dark theme Auto generation that's a whole other algorithm that we have to make um so just to know if you are trying to extend a dark theme um there'll be some a lot of caveats with that um and we can help but it's not yet supported um in the theme Builder application it's what we can uh and if we can't we'll answer them offline um let's see so choosing themes for individual workspaces this has been a really good question and it's kind of been around since San Diego and Tokyo um you know for theming can we kind of clarify I know we have some documentation out there but I want to kind of clarify on um this Academy and maybe some forward-looking statements so right now if you do apply a theme to next experience and you are using configurable workspaces not the Legacy agent workspace they're going to inherit that theme because they are wrapped underneath the next experience kind of shell so any kind of theme that's applied to it is going to Cascade down to um the workspaces um but I do want to kind of toss that over to the NDS team to see if we have any kind of forward-looking information on being able to theme different workspaces yeah um I would say it's not directly supported however it is indirectly supported and definitely doable um the way we support it indirectly is using an applicability model or the applicability model this is not just something for theming applicability is is available um you know for other purposes across the platform with applicability you can essentially relate the theme uh property records to roles really what it boils down to and then users in those roles have access to that theme so if the let's say that you had two workspaces accent uh asset and it for example you could have users in your it role related to one of the theme property records users in your asset role related to a different theme property record and when those users um uh log in the theme will be provided based on based on that based on the applicability of their role so um it's not possible to directly relate it to a workspace but indirectly through roles it can be applied the other way it could be done if you're using um subdomains that kind of thing is there's a similar approach to relating theme property records to domains and it's a little more involved but that could also be done okay and I think that answers kind of the questions that we've been getting regarding making certain themes um or variants accessible via user criteria so those style records within a theme that's where Scott is mentioning the applicability and that is following kind of a role model right now if you've used UI Builder you may be familiar with the concept of audiences and how they're built off roles currently these style records use the same kind of concept so like Scott mentioned you can apply that style record to an itsm user using service operations workspace you can have a different style record for an asset user using the asset workspace we do this in product documentation but we do plan on diving deeper into some more kind of user-friendly scenarios in the community so keep an eye out for that shortly we'll have some more articles out um cloning so that's a that's a good question I know a lot of um admins who have been setting up instances or working for servicenow for years like you mentioned the best practice is to have each of your instances a different color so you know you're not developing in Pride versus Sub prod um does steam Builder uh preserve the themes per clone right now or is that something that admins would need to set up to make sure that when they climb from production their subplot doesn't get overwritten with Productions um theme yeah it's the latter with our first release we're really exposing the ability to theme your entire experience and your platform experience and everything that you have access to in the next experience our roadmap item is to expose and kind of manage the instances um that is a pretty tangly box though um so we are currently Gathering requirements for that and if you have more info on how you use that I am very interested in collecting your your input okay awesome and we're gonna have a slide where we're gonna gather be back in just a little bit um we do have some Community articles out there you can set up some data preservers um to do that on your own um so there is an article out there already based on the San Diego Tokyo theming that will update um when Utah comes out uh but I did want to kind of just throw that out there um you still will need to kind of preserve those themes when you're cloning or find out how to reset them um so thank you for that information Jackie okay I'm trying I'm trying to go through all these questions and make sure that we get all the ones um that we think everyone needs to know um so here's a good question and it's relating to the concept of variance like we've been talking about those different style records we've had a lot of questions about this too we have like a lot of questions about how do we get these different colors and themes to show in the user preferences panel um I did kind of once the NDS team to speak to that for version one of theme Builder yeah so version one um just to be transparent um again creates our core Styles and um a theme without variants for your entire application we don't yet support variants but again collecting feedback and requirements so if you guys manage multiple themes or need that user preference panel to have multiple please let me know how you use those and why so that we can build it the way that you want the second thing is that in uh I think the variant style record and Scott maybe this steps into your territory those are written a little bit differently and maybe even more efficiently where you can take your core style sheets reference the differences that you would want to see and then apply those to your theme as well so we can put out documentation on how to do those on the fly with the capabilities of theme Builder it's just not integrated into the tool yeah and I'm sure we'll we'll have more documentation and stuff on that too once it's released uh we got you Brad and I and Maria we're thinking about how to kind of have more videos and stuff about this and more articles too so we'll go deeper into that um just a few more questions here um this one we're kind of getting to the difference between the legacy theming and our new theming um but as far as like any kind of like custom experiences or maybe those portal experiences that folks are creating from App engine studio will theme Builder apply to that or is it just for next experience and workspaces right now the latter so it's for next experience um we are though um looking ahead into Portal theming and I think a roadmap item to share with you guys is that we want theme Builder to be the central theming hub for any themes that you create you would go to the application and manage them see how they apply across your platform so again if you have that need or if you want your portal and your workspaces to look differently or the same this includes mobile as well please tell us how you're using this awesome and I'll throw that slide up shortly um a couple more um there was one on Dark theme um in Tokyo I'll go ahead and answer this we do have some product documentation and some articles out there so there is a system property that you can set if you want Dart theme to apply to the classic environment list in borns in Tokyo um I don't believe we enabled it by default because we want admins to really evaluate that and make sure it works for their users but the property is in there um so we can put it in the Q a that's linked to the session on the community after but that's how you do that so if you're not seeing dark mode in classic environment forms and lists in Tokyo right away that's because that property is not set uh I won't take too much time on here but stay tuned for more sessions coming up on Utah as dark theme and dark mode has gotten a lot of really exciting uh enhancements um so I won't take too much time on that here and then the last one Jackie that I thought was pretty interesting and maybe a good enhancement is the ability to kind of order the different variants that show up in that user preferences panel I've seen that on the community where folks want to be able to order those maybe some greens would show up before Reds and things like that I don't know if we have that ability now but I did want to throw that out to you guys while we're on the call as a good feature request yeah that's awesome again tell me how you want it and we'll do our best to build it the way that you guys need awesome I think I think we've covered a lot of great questions if we get more uh we'll definitely post some async on the community article we are going to take all these questions too and write them out on the community article for this event so if you want to look at these questions afterwards and don't want to watch the entire recording I'll have them there for you in a big comment um I do want to thank Jackie and Scott for joining us today and do a little bit more housekeeping before I let everyone go so let me go ahead and just pull up my PowerPoint so we mentioned sending us feedback um so if you guys have feedback on this session or theming in general feel free to contact me or Brad our emails are right here and we can funnel that feedback along to Scott and Jackie's team um you know for any kind of you know enhancement or class or things like that we just want your feedback on theming as Jackie mentioned so we can make this better and kind of see how you guys are using the tool and kind of account for those who use cases so I have our emails here at the top for that if you had feedback on our next experience academies or any of our community websites please leave your feedback at the link at the bottom we're trying to make our community articles better and the structure of finding content on the community better and of course we definitely value any kind of Academy feedback so we can work on those and make them better as well so we have some QR codes and a link here in our emails and I'll share this out too this deck will be shared on the post after this event a little bit more housekeeping um you may have seen it but we do have a new community site where we've organized everything into product hubs so next experience does have its own product Hub now um and that's where you'll find everything from like getting started articles to Quick Start guides we kind of go into more advanced use cases and of course the Forum is there as well so any kind of questions or articles that you guys in the community are posting are going to be found there and we do have kind of a micro site within that now which is our Center of Excellence site where Brad and I have tried to aggregate what we think you guys need to get started with or what's like really important on your journey when you're using the next experience workspaces or UI Builder so check that out those are two really great resources to look at first we're really going to post there first before we post anywhere else and of course if you want to know more about academies it's there too um we do have our Academy page that is located on the product Hub and the Coe so you can view upcoming Academy sessions look at recordings from prior Academy sessions so that's where this one will be and of course the Q a we'll have there as well um so just you know be sure to bookmark that or know where to find it we have a short link there for you as well and uh I would be remiss if I didn't mention our our sister or related Academy session so the platform team has lots of different academies out there um you know we've had the platform Academy that's been running for a couple years now that has a lot of different topics relating to the platform we have analytics Academy our mobile Academy virtual agent Academy and AI Academy so if you know anything really serviced now uh relating to the platform you're going to be able to find out in one of our academies so I have some short links there for you but if you go to our product Hub and go to now platform we'll have a really quick link to those as well awesome um so this has been a really great session I do again want to thank the now design system team um for joining us today and giving us a really great background on theme Builder and theme engine and answering a lot of questions that I know that everyone's had for a while so I do appreciate it and uh to keep an eye out for future sessions and for this session to be on YouTube thank you everyone [Music]