Dynamic App Themes in Xamarin.Forms - Light, Dark, & Custom Modes

today i'm going to show you how to dynamically theme your application whether you want light mode dark mode or a fully custom theme we're going to use sweet dynamic resources and app theme binding all built into xamarin forms it's super easy to do so tune in [Music] hey everyone i'm back with another xamarin forms 101 video we've been building an app from scratch all the way to the app store it's a really cool coffee application that we've been doing all sorts of fun stuff with we have list views collection views making web requests login pages we recently just took a look at how to use app resources and styles to sort of cut back on the code in your application that you're copying and pasting so you can have these nice styles for all of your controls in your application this is actually really important when it comes to app themes nowadays ios and android and windows they all have a light theme and dark theme that the users can automatically choose between additionally many devices also switch based on the time of day so you want your app to be responsive to it additionally you may want to enable custom themes in your application maybe a blue theme a green theme a red theme or you want to just have one single theme and that's it when the user you know wants to pick it so today we're going to take a look at how to do that using dynamic resources inside of your xamarin forms application so let's take a look now our application so far has a bunch of cool stuff in it right now we have a list of coffees over here that are all grouped together some custom fonts in there some font icons that are going on and we can see that so far we've hard coded in a static resource so instead of hard coding a value we actually go ahead and use this static resource that's defined in my app xaml so here is that color for that window background color now that's great but since it's a static resource it's static it doesn't change it doesn't update whatsoever so for example if i go ahead and toggle this thing over to dark theme we're gonna see that nothing changes because everything in this application actually is using a static resource in fact if we go down here into some of like our labels for example here's label medium or down into our where is our item template at here it is we have a card which is coffee card if we look at those as we scroll down this page of awesome resources we have a static resource text color which is this black color and then down here in our coffee card we actually don't set a color at all it's the default and this white color is the default so you probably want to update that a little bit too now if you're over on android you want to make sure you're using the latest r or q emulators and also if you don't see this dark theme you can hit this edit button and you can drag and drop it around and maybe down below with all the additional settings down there so you can toggle that back and forth and get those updating there now let's say that you you know want to get started and you want to just you know have something that's dynamic so i want to explain the difference between static and dynamic so the static resources they don't subscribe to any change notifications at all okay but if let's say you wanted to have a blue theme or a red theme or a purple theme what you would do is define a single color and then update sort of your style sheet you would basically say here's window color red window color blue window color whatever as a static resource and then update this single variable let me show you what that looks like for example the first thing we're going to do is change this to dynamic resource and when we do that xamarin forms is now listening for changes to this resource in our code behind or wherever we're going to update it so if we take a look over here at our code behind i've actually added a little tap gesture recognizer on this copies of the world label and what this does is it goes off it creates three random just variables to create a random color over here there's random from rgb and what it does is it taps into our app.current.resources that is our resource dictionary that we have and what this is is a resource dictionary that you can come in and use an index a string index whatever the key is and what this returns back to us is just an object and in this case we know it's a color because if we go over here we can see it's a color which means we can replace it with a color so what i do is i go off and i just simply set it to a new color i just back out these changes here and what we're going to do now that this is dynamic is tap on that right here okay notice if i change this back over to static resource okay and i tap on it it doesn't nothing happens because it's not subscribed to those notifications back to dynamic hit save again hot reload pops in and immediately it's now listening to our changes in our application so that's really really nice these dynamic resources okay now you're probably saying okay james that's pretty nice um however what if i want this to react to the theme or the mode the dark mode of the application well you're probably not going to use a dynamic resource in that case what you're going to use is a app theme binding okay it's kind of like a dynamic resource but instead of listening to changes to the resource dictionary it's looking for changes to the system setting of light or dark mode now by default all right everything will be sort of a light mode uh on older devices and then of course users can pick between a light and dark on newer devices so instead of this we're going to say app theme binding that's the keyword and note that we have dark default or light so you get to decide what you want it to be and pretty much light is the default so you really only need to set dark and light but you can have a backup there too now we have dark default and light so over here if i go into my app theme notice that i have specified now a window background color and window background color dark and here is a light and here is a dark color there so you can come in now and i could say dark and what i could do here is i could say when it's in dark set it to black and when it's in light set it to white for example here when i save that what we should see when i go ahead and now toggle this it's it's white and if i toggle to dark theme we're going to see that it now is black right so you're going to set a color in here automatically and that will react to the changes that is quite nice too but we don't want to do that because we don't want to set black and light and colors all over the place what we want to do is simplify this up so what i'm going to do here is replace black with a static resource of window background dark and for my light we're going to use static resource window background color hit save there now this went back to the purple because remember that is literally what we set it to which is correct okay so that means the light is in in effect here okay now i use a static resource here because again we're not actually changing this at all if i wanted this to be dynamic okay i could make it dynamic and then i could go ahead and click on it so it's up to you if you're ever going to change this you know in that mode you can still have it dynamic but for most cases you're going to keep it static because when you save this right you don't want to actually have it update non-stop over there so let's go ahead and now come over here change it to dark mode and what we should see if this updates for me is that i may have put it in a funky mode oh let's go ahead and reset it here is that in dark mode we're going to hit color dark and in the background color light we'll get light so sometimes i may have clicked around one too many times that's how we do this live it's fun all right so we can see we're clearly in dark mode with our launch page here and now what we'll see is that we have our dark mode following our dark theme and over here if i put this back into light theme now we're into our light theme there so that is a very easy way of specifying your colors using app theme binding all right now you're saying james well light theme looks pretty good but what about dark theme well that's no good right because all of our labels are hard coded in here so we're going to need to update those luckily like i've shown you earlier we're using nice things such as a coffee card and a label over here now we can actually leave these as static resources because we're not changing the style we're changing a value inside of the style and that can still be dynamic and it will register for changes so what we can do is go into our app here and notice that i have text color text color dark window background color window background color dark card background card background dark and those you know kind of there's a theme here right so i have like a normal and then a dark and same thing actually when i copied these resources over from apple i have all the colors here and then the dark colors as well so let's go into here and the first thing we're going to do is update this label now this is a base label so actually all of the different label types micro small medium large all inherit from this one style so all we need to do is update this one so again we're going to use app theme binding we're going to say in dark mode use a static resource of let's go and minimize this down of text color dark when it's in light mode let's use a static resource of text color all right and this is kind of like a theme that we have going on here so let's copy that then down over here in our coffee card we actually don't have a background at all so let's go ahead and do setter over here setter of property background color again we're going to set the color here and here instead of it being the text color we're going to set the dark mode to the card background dark and card background we can also see over here we have the same issues going on in our in our button outline so the text color here is set to just a resource and our border color is also set to a resource there we go now we go ahead and save that and let's go back over here now one thing i've noticed is when i update styles with these app themes you can see they're squiggly i think it's because they need to be recompiled in so let's go ahead and just refresh the application just hit the restart button there and this should go ahead and trigger those changes into our application so again we are in dark theme we can see the splash screen come up here as it loads up into debug mode and now let's go ahead and bring this over we can see that all of our colors are updated look at that that looks pretty good and in fact even our little button down here with the load more is all good to go if i change this up here change it back into light mode now we're in light mode we literally just implemented an app theme dynamically based on the user change there which is super duper cool look at that look at that that is super nifty go back to dark theme boom and see it wasn't that much code once we have those styles in there we're able to really fine tune the light and dark theme of our application which is really really nice now we're not done yet okay because you might be saying james i have a lot of applications that i've seen out there that enable me to pick a theme all right so pick the light or the dark theme or have it as the user default preference and luckily xamarin forms also has you covered here i actually covered this in a blog post earlier talking about how to do this so actually if i go over here i'll put this in the show notes back in march or so i did this great looking setting screen for xamarin forms i talked all about my cadence application how i used to use a table view and then i came over here and implemented this really beautiful settings screen and i did the settings picker over here for different colors and then it looked a little bit like this so let's go ahead and take a look at it here as it goes through here can use the system default can change dynamically i can pick light i can pick dark and i can override those colors all right so that's something that is very very nice that you can totally do in your application so it's kind of something nice there so how would we do this in our app well i've come over and i've created a settings page in fact it's it's the code from that that sample so i actually have some theme radio buttons here i have a grid i have a radio button and i'll just kind of show you what this looks like so if i just go over here and i go into settings we actually have a page that looks pretty good in fact it is using our coffee card so we can see there is if i go ahead and toggle this back over to light we have a light theme here which is pretty nice i am using some other colors here i have a light radio button color a dark radio button color and these are also dynamically changed by the theme that i have picked so here's dark mode here it goes back to dark mode let's first fix up the background color of this page so let's go ahead here and just copy and paste this into our settings page or else that will annoy me there we go and of course we can then do title and we'll say settings here we go there and again sometimes with these app themes it may want to have you reload the application too so let's go back over here and take a look oh i think probably i'm into a different mode there we go so light theme there alright cool so now we have our backgrounds updated we're kind of good to go now what we want to do is give our user the ability to use the system default or use a light or a dark mode manually in the application so here's what we're going to do the first thing we're going to do is create a settings class now i haven't really covered preferences and saving different values inside of an application but we're using xamarin essentials here i have an entire xamarin essentials api of the week series that you can watch over on the xamarin developers youtube or channel nine i'll put a link to that in the show notes as well but what i'm doing here is i'm creating a public static class of settings and here i have a simple integer called theme and this theme comes in and it enables me to set a theme so 0 would be default 1 would be light and then 2 would be dark and the default here is just to use the default setting now if i go into my actual settings code behind over here here's what we're going to do what i do is i say settings page settings.theme when i open this up i set the correct radio button so if it's default set it to default if it is light set it to light checked and dark to dark checked and then down over here this is what i do is whenever one of those radio buttons is checked and changed i look at the text on the actual radio button itself and then what i do is i say well if it's system set it to zero if it's a theme set it to one and if it and if it's light set it to one if it's dark set it to two so kind of the inverse right here i'm saying set the radio button correctly when you start up and over here then i'm saying settings theme so for example if i come into my coffee let's do that again and let's go into the settings i go into settings and i set it to light and then i go ahead and close it out and open it up one more time this is going to save that settings for me when this boots up again so here over here now it's set to light okay so that's how this little theme is done if i set it back to system we're on system now one thing we need to implement here is this thing called the theme all right and set theme so this is something that um that you have to do or what i like to do at least which is telling xamarin forms what theme to use inside of code so this set theme actually is blank right now let's go to definition and what we're going to do is we're going to simply say switch settings dot theme okay and if it's zero we are going to go ahead and set default so this will be default here we can go ahead and then do you know one and two and this will be light and then this will be dark now in this case what i'm allowing is basically use the system default use light always or use dark always now what you can do at this point if you want to have a green theme a red theme or whatever theme is you can sort of implement your own theme and not use app theme binding and then go ahead and use dynamic resources everywhere instead of the app theme binding so it's up to you i like to keep it simple light theme dark theme user preferences that's it but this should give you a good reference of how you can implement custom custom themes okay so what we're going to do now is we're going to say app.current.user app theme all right and this user app theme is an os app theme and we're going to bring in xamarin forms and this is either dark light or unspecified so this is actually pretty pretty fantastic because what we're saying is set the user theme of the app to a specific value so here if we say unspecified what that means is use the system whatever the system is all right over here we're going to say if it's 1 which this is the default is unspecified use light okay else over here use dark so we're telling xamarin forms hey xamarin forms you need to go off and apply my theme that i want so this is my os theme so whenever the user comes in to the settings page we're going to update the theme additionally what we're going to do is we're going to come into our app dot xaml okay and in our app.xaml what we're gonna do is we're gonna go ahead and do a few things here the first thing we're gonna do is we're gonna say the theme i like to call the theme dot set theme there we go and when the application loads we're going to override whatever is inside of whatever the default is we're going to set it based on our preferences additionally what we're going to do here is i'm going to go ahead and register something on the on resume so on the on resume so if the user like changes stuff over here i'm going to say the theme dot set theme over here and i'm going to say requested theme theme changed plus equals and this is actually a change event when the user changes the theme so whenever i'm on resume that's going to do that and here for onstart i'm going to call onresume so it just calls it so start the application call on resume if i resume the application call and resume same thing over here i'm going to kind of copy and paste my on sleep and i'm going to go ahead and de-register that event so when it goes to sleep unregister that event when it comes to resume again register it again then what i'm going to do inside of this app theme request change is i'm going to go ahead and say begin invoke on main thread and then adjust the theme now really you probably don't need to do this too much unless you are having fully dynamic themes in your application you want to set a few things in the code behind but i want to show you that you have full control of app theme change events inside of your application and to be honest with you that should be just about it let's go ahead and run this application again with all of our changes and remember that the default that we set was back to default so it should go ahead and take our changes from our application over here and let's add a breakpoint over on set theme once we get into that settings page so let's go here into our settings page there we go and what i'm going to do now is i'm going to say use the dark theme okay notice that the theme setting is set to two if i actually look at the user theme it is currently unspecified but we are going to go ahead and set it to dark mode all right and just like that we've updated to dark mode light dark light dark system preference come to system preference change it to dark now it's dark light dark light system look at that go that's really cool so now what we've done is we've utilized the user app theme and app theme bindings to automatically not only create dynamic themes for our application listen to the system theme but also allow our users to override it whatever they want so you could set this up on different timers different triggers whatever you want and you can change this based on the time of day maybe if like stock values are going up or down you can use this to automatically use these built-in themes and honestly it is not that difficult to start theming your application with xamarin forms today using app theme bindings and dynamic resources in your application i'll put a link to everything that i've shown you today inside of the my coffee application you can find links for that the blog post other video series that will really help guide you to success in theming your application hope you really enjoyed this video i had fun making it i really enjoy these app themes and everything that xamarin forms has to offer and of course all this goodness will be baked into don and maui when it comes out later this year in 2021 anyways i hope you enjoyed this video if you did give it a thumbs up that super duper helps goes into the google algorithm of youtube goodness to recommend it to other people and of course don't forget to subscribe and hit that notification bell if you want to stay up to date on everything we're doing here and of course you can check me out on twitch at twitch.tv james montemagno i do stream occasionally on fridays where we build app clones and check out new previews of don and maui and all that good stuff anyways i hope you enjoyed this xamarin forms 101 video and all the xamarin forms 101 videos that i've been putting out on my channel so until next time thanks for watching [Music] you

Channel: James Montemagno

Views: 19,838

Keywords: themes, light mode, dark mode, theming, custom themes, xamarin, xamarin forms, xamarin.forms, ios, android, colors, light dark

Id: 4w8TQ8njd3w

Length: 25min 13sec (1513 seconds)

Published: Thu May 20 2021