Runtime Themes in .Net Maui!

in today's video i'm going to show you how i added the ability for a user to select the theme of the app itself in the settings and how i programmatically updated it throughout the app let's dig in so yeah i was trying to come up with a good idea for the theme of the app you know the colors um and i'm not the best in the world with colors and so i thought well uh you know what if i pick something and a user doesn't like it well since i'm not the best in the world at colors what if i picked eight different color schemes to build instead of one and then give the user the ability to choose so i thought that would be cool to do and this is how i'm doing it this is the settings page you know uh look in here settings and i've got these light themes here and then dark themes here i'm still not decided on all of the colors that are in here yet but a user does have the ability to click one of these and then it programmatically changes the actual theme of the app itself so the way i'm doing that first off i'll say these circles here that are half the colors in them they are a custom control that i've written and i'm going to go into how i did that in the next video i thought it would be too big of a video to combine the two but i just wanted to mention that's what these circles are these are a custom control that i wrote so anyways these circles here are just the individual color schemes that i come up with and we've got some like theme options and some dark theme options some of them look a little funky in the settings there's this border here for instance but overall i think they look okay in the app itself though there's a few bugs to work out i'm still working on but hey i figured the important part is showing you how i did it so let's dig into that a little bit so when a user clicks this button what is run is if we go here to the settings view model update primary color pressed and it passes a theme name and that comes from the actual xaml itself if we go down to one of these buttons i have named all of these themes these are names that i came up with and so you know because i'm a programmer you know i'm a professional namer and i name these things and but turns out they're still bad so but anyways this first one here i've called nautical this one's called neon they all have a different name and that name is what i'm actually passing to the view model itself so it knows what color scheme to go grab and then in the color file if you you know if you've seen the template there is this styles colors.xaml file and in here you've got some key colors already listed but i just went in and added my own personal color themes each one has a primary color secondary tertiary accent and dark accent and then i created the colors themselves i actually used this website it's a pretty cool website and it's kind of nice it has a bunch of like kind of pre-made themes that people made you can also just make your own too i used that to kind of get some good color schemes going and then i adjusted stuff as i went yeah i'll put a link to that that site in the description below uh so anyways i came out here and i made these themes i made five light ones and three dark ones and uh someone's called depression i'll probably change that name it's a little weird but uh uh and importantly the important part of this is each key is the theme's name plus the color itself so primary secondary tertiary accent darkest so nautical primary nautical secondary nautical tertiary neon primary neon secondary okay so you can see that's how i named them and then that makes it easy to programmatically go out to in the settings here and do this by the name of the theme so when a user clicks this button right here for instance this first color uh the word nautical as a string is passed i set that theme in the preferences so if you're not familiar with this preferences is a class that they provide that basically keeps uh user settings you know some kind of persistent user storage it has a size limit stuff like that so you know and it talks about here on the screen if you see in ios it's in ns user defaults android shared preferences you know whatever so but i set the theme name there and then i go out and i grab let me move this down real quick i grab this merged dictionary of all the resource dictionaries that are out there if you're not familiar these dictionaries are here so in the app.xaml file you'll see and this is just from the template basically these two resource dictionaries there's colors and styles these are the ones that come default with you know file new of maui and so these two different resource dictionaries get merged into a merge dictionary so when we grab the dictionaries from the app itself you can call application.current.resources.mergeddictionaries and it grabs you merge dictionaries of type i collection of resource dictionaries okay and then so as long as those exist then we're going to loop through these dictionaries and we're going to do a basically dictionary.try get value and it's going to look for the theme name plus primary theme name plus secondary you know tertiary whatever and if it exists it's going to grab it and put it into this primary value here and then it's going we're going to go here and we're going to place into the dictionary for the primary color that color for instance when i click nautical it's going to come in here it's going to pass the word nautical then we're going to get down into here and then we're going to loop through the dictionaries and then it's going to try in this dictionary it's going to look for nautical primary if that exists it's going to put that color into primary and then assuming it did exist it's going to set that color to be the color that's just called primary and so if we go back here you'll see you know the default app comes with primary secondary tertiary i added the accent the dark accent and these are basically the keys i used throughout the app to set colors for certain things and so when a theme is selected basically what that view model does is it goes out grabs these colors and puts them in here and then every control is is styled with these colors here so that way when you change the theme you go and you update these directly replacing them with whatever theme was selected so hopefully that makes sense in terms of how i'm setting up these these colors themselves and then how they get put into here and then if you go and you look at say user list detail you'll see button color dynamic resource tertiary so you know i've got the circular buttons i've got in the app set to tertiary i've got text color set to the accent color things like that and in that way when the theme gets injected into those real colors that are used it gets updated so you click here all these get changed you click here and all these get changed i will say there's a bug i think it's a bug you'll notice if you see these check boxes here the actual color of the checkbox seems to lag by one click and i don't know why i need to dig into the maui code a little bit and see if i can tell what's going on there it may be a bug i'm not sure but so for instance if i click this um that color almost looks correct but if i go here that was actually the color that one should have been and i go here that was actually the color this one should have been if i go here same thing like there you see you can tell the order of how i click affected these differently than it did everything else which is weird because they're styled with the same so this style and this style are the same yeah if we look at useless detail and we go to right here so this check box so you see the text color of the label dynamic resource accent the color of the check box is also dynamic resource accent these should be the exact same color but for whatever reason the check box itself is getting set based on the second like the previous click so friends if i go here then here and here then here you can see now it's set to orange it it might just be this one i don't know there's definitely something going on here uh because if i click here and then i go here this one is orange but i don't know why so anyways i don't know if that's a bug with the the check box or what's going on but i'll have to figure that one out but anyways so you click one of these buttons and then now the entire rest of the app is styled with the colors picked in there so you can see there's that red we've got this i still have not styled some of the icons so this is a drawn control and i'll go over again that later in the next video this is a drawn control and i'm drawing an image on top of it but that image does not respond to the color change really so first if i pick this one and you come out here you see the image is still it's still black so you can't really see it i need to figure out how i can do that the big i guess maybe the big thing here that i need to point out in terms of how these colors are responsive to a change like that because if you think about it just changing the this dictionary it might not actually update the values and the reason you might not see that behavior is because by default all of the colors in the app the way they're styled use a static resource extension field and that as you might imagine builds it kind of builds the color at i don't know if it's technically compile time but it builds the color when the page is created but if you want it to be able to respond to resource dictionary updates you need to use a dynamic resource so if we go up here there's this keyword dynamic resource and then that allows it that basically hooks it in to where when the resource with that key is updated in the dictionary everything with the dynamic resource tag of that gets updated i would highly recommend you go out and look at the dotnet maui code to see how that's done because they are done differently one thing i did notice is that the static resource it actually converts the value for you correctly i ran into some tricky stuff with dynamic resource where in my custom control where i if you set it to dynamic resource all of a sudden it wouldn't take it and it wouldn't do the actual conversion because this is just a string in the dictionary but with static resource it actually it would do a conversion of string to color which is what i needed but with dynamic resource it would not do that it turns out the reason it actually what i needed to do was set that bindable property in my control to static but anyways again i'll talk about that next video so this dynamic resource that's kind of the key of updating these controls programmatically so when i click this they respond to the dictionary change instead of doing a static resource so basically to kind of sum up how do you do this well you have a button of some type in your settings which is what these are when a user clicks a you know in my case i'm doing mvvm so i go and i look at the view model and this is the the command that gets run i'm passing the string and then i'm setting the preference and i go out and i basically change the resource dictionary to be the color i want it to be and that updates anything with a dynamic resource color that's pretty cool the other thing i wanted to show real fast is in the code behind for the app.xaml so app.xml.cs and basically what i'm doing here is i wanted to load the user's theme as they open the app or as the first time they open the app so what i'm doing and this is kind of to make sure i'm kind of complying with the light or dark theme of the user settings in their app is i've got this set theme method which runs right here right after initialize components in the public the the app constructor so as long as you run this here before the actual main page is built then this work will be done before you know the app is is shown and so what i'm doing here is i'm looking for i have a preference field with a key of first load and if this is the first time they've loaded the app then we're going to set the app theme based on if they're in light theme or dark theme and so the way you do that is application.current.requested theme and that will give you either an app theme dark or an apptheme.light so uh this application.current.request theme will give you either apptheme.dark or apptheme.light depending on which the user has in their settings and then i'm setting the theme if this is the first time they've loaded the app to either nautical which is this first light theme here or royalty which is this first dark theme here and so depending on which one they have set in their settings they'll get one of those two loaded first and then i'm just gonna set the first load to false and then whatever they change to after that will just be saved in the settings and this will just happen every time okay so that's for if this is the first time they load and then after the first load stuff i'm grabbing if this is not their first load time i'm grabbing the theme name from the preferences it's key of theme and this is just a default nautical if there's not one for some reason and i'm setting that in the theme name and then i just do the exact same code we're doing in the view model we're doing it here too and we're we're setting the the color there so basically what it's doing is loading from settings their color and that way whenever they exit out of the app the color will persist pretty cool i just wanted to show that because it's just adding code to this app constructor which will then you know load up our theme before it's ever shown to the user when they first or when they open the app that way you get persistence across you know time so it doesn't reset the theme every time someone closes the app okay well i hope that helps um i think it's it's pretty cool to be able to give your users the ability to customize the app themselves i actually started to go down the route of giving them color pickers and just letting them set individual hex values i but i didn't want to mess with the color picker control and i thought you know this gives me still a little bit of control in terms of what they use what they set you know it kind of it still gives me the ability to have some amount of persistence of a theme oh i didn't even mention this uh lottie animation here uh the first time you open this app or not the first time but when you open this app if i click it here a lot of animation look at that i'll talk about that in the next video too just to throw it in as a because it's sort of kind of a custom control type thing too but it's using it's using the skia sharp library that's uh written for maui so pretty cool anyways yeah i hope that helps uh i think that theme stuff's pretty neat and uh you know i may not be the best at colors for instance i don't really know what this is but but anyways i think it's still cool uh the app's kind of coming along i'm adding features pretty much every day and you know it's maybe a little slower than i want but yeah you know it's uh it's pretty neat so if you want any of this code that we talked about today it'll be in the github repo down below i'm pushing stuff out there almost every day so if you ever just go out there you can see the last thing i did was but yeah so anyways i will see you guys next time with a video on custom controls i think it's going to be a pretty good one you know it's it's a it's a neat way to kind of create reusable custom controls that's how i'm doing these circular buttons and that's the exact same control that are doing these two so but look for that and if you found this video enjoyable or you know found it helpful give me a like maybe give me a sub you know who knows maybe anyways i'll see you next time bye

Channel: Programming With Chris

Views: 2,580

Keywords: .net maui, .net maui community, .net maui example, .net maui preview, .net maui tutorial, csharp, dotnet maui, dotnet maui getting started, dotnet maui tutorial, first net maui app, how to run first .net maui, how to run first net maui, learn .net maui, learn dotnet maui, maui c# tutorial, maui for beginners, maui tutorial, what is .net maui, Themes In .net Maui, App Theming, App Themes In Maui

Id: eu52qX-qww4

Length: 14min 37sec (877 seconds)

Published: Sun Aug 21 2022