How to implement Dynamic Theme Manager / Theme Switcher in .Net MAUI App by Abhay Prince

hello everyone I'm back with another video and in this video I'm going to show you how can we Implement themes in our net Maui app so this is going to be we are going to have different dynamic themes and then we can switch around these themes so a theme switcher or theme manager using net Maui so by default the doed Maui there is no theme but it can react to the system themes which is light and dark theme but in this video we will go beyond those light and dark theme and we are going to implement our own custom themes and then we'll have some option to choose between those themes that's all what we'll do in this video so right now I have just created this new project I named it theme manager Maui and I have not made any change yet I'm just starting it for the first time okay so the app is here by default we have this uh bluish default theme and we can click around here and then if we move through this dark theme if we enable this dark theme which is system label theme dark mode so it looks like this so a slightly different variation of this right so this is inbuilt we could say uh Although our code is using this but in this current video we'll Implement our own themes so first let's go to the resources Styles here we have these two things colors do ZL and styles. ZL these are the main uh Styles which are handling these themes basically so when we talk about themes in most of the cases changing the themes simply changes the color scheme the colors in most of the cases sometimes we could have different font sizes and sometimes we could have different icons but in most of the cases we have colors different colors for different themes so in this video we are going to implement these different colors for different themes okay now this colors. ZL here we have defined our colors which we can use in our entire app so this is color primary which points to this color and then we can use these colors so something like this static resource primary that means this primary brush this is using this primary color which is this one right so in the app we see this nav bar it has this bluish color which is this primary color if we go to Styles in Styles if I search for shell so you see this shell the shell. background color this is the color which handles the naar color and here we have this apum Bing I'll talk about it but before that oh maybe let's see this so this app Theme binding this is a dynamic markup which reacts to the system theme whether it is light theme or dark theme right so if you see app Theme binding it has if theme is light then use primary color if theme is dark then use this gray 950 color so this light and dark theme these are the system themes so this dark theme uh some mobiles can have dark mode or night mode so these are the Dark theme and by default which is this white one this is light theme so if this is light then it is using primary color which is this color okay so what we are going to do uh let me stop this app first I'm going to create a new folder in this resources folder I'll name it themes and inside this theme I'm going to create a new item which is going to be Mai Mai resource dictionary because if you check this colors. zaml this is a resource dictionary and this styles. zaml this is again a resource dictionary so to Define our Styles inm we need to use this resource dictionary so in themes add new item netm NM resource dictionary so here first I'll use default which is the going to be the default theme and then I'll go to colors and I'm going to cut these three colors so I'll comment these out here and I'll simply paste these in default color theme like this okay now now let's let's use these also this uh this St this solid color brush primary brush secondary brush and tertiary brush contr C cool save everything save everything everything is fine now but now these colors we removed these from here so we are going to have an error because we are using these colors in styles. ZL but these colors do not uh do not exist so for this we need to go to app. ZL and here if you see we are using resource dictionary. merge dictionaries we have colors. ZL we have styles. SML right so all other colors are defined in this one so here we'll add one more entry for our default theme so it is in resources themes default ex right now if I run it everything will work same there is no change okay app is here there is no change right now let's create a new theme so in themes folder I'm going to add new item AET Mai resource dictionary add oh I'm sorry I didn't add the name so themes add new item. my resource dictionary and I'll call it let's say fire which is going to be a red theme so fire in this I'm going to go to this default theme let's copy these colors and here I'll simply add this and then primary and so for primary let's use red color for this one let's use maroon color a dark red kind of color for secondary let's leave it like this only for now so now we have the second theme in order to see this we can go to this and we'll comment this default theme out and here we'll say fire and now if I run it I should see the red color in the main nav bar title bar of this app and the buttons background ground color let's see okay app is coming and yes you see we have add color here we have add color here cool let's stop it let's create one more theme new item resource dictionary and this time I'll say nature and I'll use green color for this so let's go to this one copy these colors and we'll use green and dark green dark green save and now we can go to app. ZL and we can command this out and we can use this nature. ZL and then we can run it all right so we have this green color here so that means means the colors and these themes are working but if you notice we are whenever we are creating a new theme file we need to modify this in app. ZL we need to comment out previous theme and add this new theme but that is not what we want right we want these themes to be available on runtime and user can choose the theme of his or her preference right so we need to make some changes so that user can choose themes on run time so for this I'll simply uncommanded and handle these themes we need to create a new class file so I'm going to create it on the root only class I'll name it team manager you could name it whatever you want now we need only single instance of this file this theme manager class throughout our app so we could have it as a Singleton registered uh class or we can have it as static class so I'm using as static class so public static class theme manager here first thing let's have the list of all the available themes and those classes so when I say classes if you go to resources themes uh this fire. zamble if if you say we have this fire. zl. CS this fire class we have this class so in order to use it we need to use instance of this class so in theme manager I'll say private stratic read only I dictionary string key which is going to be theme name and then resource dictionary which will be the instance of this theme okay here I'll say let's say themes map equals new resource dictionary and we'll Define our themes here so first we have default so key I'm going to use the name of this so this will be resources do teams. default and the value is going to be new new then same thing resource. themes. default then let me copy it or maybe before that let's use resources at let's using static themes equals I'm using alas here so using themes equals what is the name of app theme manager Maui do resources dot themes and then we can directly use themes like this okay I'm going to copy it then we have Fire theme so themes. fire then we have nature theme right now we have these three only We'll add others if we need them full so now we have available themes after this we'll have a property here so public static string selected theme selected theme with the default value of themes. default uh name of them start default like like this so this is the selected theme now we have the selected theme so we need some method using which we can change this theme right so for this I'm going to say public static void let's say set theme and here we'll use theme name okay and on the basis of this theme name we can get the instance of that theme from this themes map right but before that let's see if this theme is already selected tool if selected theme is already this theme name then we will not do anything we will simply return from here now if that's not the case we'll get theme to be applied equals themes map of theme name right I'm using this directly like this because uh I'm not going to provide user the ability to write down this them tee name right so we will have some mechanism of so that us user can choose from these options maybe uh radio button group or maybe picker or action sheet so from there user can directly choose a theme so this will always be good it will not throw any exception and if you want to still make it safe you can use try get value or other method you can try if that key exist in the dictionary this themes map then use that but for me I'm good with this one so I'll use this only now comes the next part we have application do resources application. current. resources do merge dictionary we have this collection which is a collection of resource dictionaries right right now if you check this it will give us these three items which is in this app do zamble so if you see application resources resource dictionary merge dictionaries here we have these three resource dictionaries so these are part of this merge dictionaries so here if we access these merge dictionaries then we are going to have list of these three resource dictionaries now let's talk about how these resource dictionaries work so in these colors we are simply defining color so these are key values the these are nothing we are with this when we go to Styles here we have this static resource binding if you see for all these colors we have static resource static resource static resource everywhere so how this static resource work this static resource uh we could say kind of copy the value from the main dictionary and then it has those values in memory we could say so these are uh we could say onetime operation when app is starting up then it will check so we are using static resource primary it will simply check primary all the resource dictionary so it will get it here in default and it will check this and it will keep this in memory and then there is no need of default ZL after this because it already copied this value and then there is no link between these two so it is not going to use this right so in theme manager what we are going to do we'll say application current resource dictionary do clear we are going to clear everything out from here so everything is clear there is nothing in mer dictionary but this will also work there's no problem in this it will work properly the reason is although we are clearing this resource dictionary down now this collection does not have anything but because we are just copying these values so now it is okay it don't have to uh look up in this default. ZL or in the styles. ZL it it does not need to look for this value for this style anywhere because it already has it okay it sounds confusing but I'll explain about dyamic resources then maybe it will be clear so we are clearing it so now we don't have anything it will still work now after clearing everything what we'll do in this resource dictionary we are going to add a new item and that new item is going to be this theme to be applied okay now after this theme to be applied we need to set this selected theme we'll set it to this theme name cool now let's see if we can use this so right now I'm going to let's go to the main page. ZL and here let's add one more button and here we'll say let's remove this name and we'll say change theme change theme to uh let's say nature and then I'm going to add a click event to this and here what I'll do I'll say theme manager do set theme name of resources do themes resources do themes and because this resources it is getting from resource dictionary so we need to use theme manager Maui do resources dot themes dot nature like this all right let's add a breakpoint here and then let's go to set theme and add a breakpoint here okay let's run it okay app is coming cool we have default theme now if I click on this change theme to Nature I clicked on it it came here let's continue and now we are here in our theme manager if we check theme name is nature that is fine selected theme is default that is fine now if we continue From Here theme to be applied now we have have instance of our nature theme this is fine now if at this point if we check this mer dictionaries we have three items here zero can we see the names oh where is the name resource dictionary count Keys merge dictionaries sources value this is fine how can we check names okay okay let's trust me it has these three items which as these three items right now what we'll do we'll simply continue from here now we cleared this dictionary now if we check it should have zero items so we'll say this one count zero it does not have any item now after this we have this theme to be applied which is the nature theme we'll continue from here now if we check it should have this one dictionary which will be this nature theme and then we are continuing we continued and nothing changed but it should have changed to that right so it did not change the reason being from these styles. SML we have the static resources so which is kind of it copied all these Styles and then there is no link with the style. ZL or colors or nature or default any file so it does not know that something has changed it does not know that the we clear the dictionary we added different set of colors with different theme it does not know about all these in order to let this know about that something has changed let's go to button first we'll go to button which is this here we have this background color we'll use this background color so first let me copy this the same line and here so background color app Theme binding if this is light use primary if this is dark use white so first thing uh let's do this on the main page I am going to have uh box view here with color static resource primary and let's use height of 10 like this okay now at this time if I check it it should show this blue color box okay now because this is static resource again it will simply copy this color and after that there's no linking but in order to use dynamic themes do ma gives us another type of resource mapping which is this Dynamic resource now how this is going to work this is going to copy this uh value for the first time and after that it will have a linking between these Valu so it will have kind of change tracking mechanism inbuilt so whenever this value is changing it will automatically change the appearance or it will automatically going to apply that change value to this element because we are using Dynamic resource it knows that this color this value is dynamic okay when we say Dynamic so initially we have default theme uh so primary color is this one after that we'll clear this from theme manager then we'll add this nature theme so it will go to Nature and nature we are modifying this primary color and then soon as we change this primary color to this green it will simply where is main page it will simply check the dynamic resource okay this Dynamic resource has changed I need to react to this change so this will change to Green now let's see it if it is working then we'll work on other parts okay app is coming okay so we have this now if I click on this change theme to Nature continue continue you see it changed to Green all other things did not change but this changed to Green that means this thing worked now we need to make it work for entire application Okay cool so we know that in order to use this we need to use dynamic IC resource now we can go to Styles here we have this button let's first for this light only let's use Dynamic resource okay primary and static resource white is fine now if I run it so we'll see that this will not work I'll explain why okay now I'm changing it continue continue so you see this changed but buttons background color did not change why so we have this Dynamic resource here for this box View and same thing we have this Dynamic resource on this button text button background color but this does not work so this is a kind of problem with this app Theme binding okay so with app Theme binding this Dynamic resource does not work in order order to make it work we need to remove everything and just use Dynamic resource and hold on I'll explain how to use light and dark theme for this but right now just go with the flow so we'll check this if this is working so let's run it again it is coming okay change theme to Nature continue continue you see all the buttons background color changed and box views color as well changed right so that means this Dynamic resource is working cool we have something great now the problem is we need to react to systems dark and light theme we can have dark theme in our system so if this does not work with this dark and light theme this app them binding and what approach we could take to make that work so for that what we can do we can Define our own Dark theme explicitly for light we are good we can use default or we can use any other theme we have this nature Fire theme we can use any theme whatever we want but for this dark theme we need to add one more theme which will be for this dark tee so here we'll say uh do Maui resource dictionary and here I'm going to use a dark them okay for this let's copy the colors from [Music] some this file we'll go to Doc team and here we have these so for primary let's use gray 950 which we using or what was the 900 what color was this style. saml gray 500 we have button static resource primary gray 950 we have gray 950 right so gray 950 and then for this color the dark we will use black okay let's save everything oh green and because this is can we have value here no we need to Define this color so for this let's copy this from the main color colors gray 950 this one all we can directly use this but let's have this explicitly here as well okay save everything cool now we can use a dark theme as well but now comes when we using this dark theme till now we were using the systems approach what I mean is for Dark theme we were not selecting the Dark theme explicitly we were using this dark theme which the systems Dark theme right it changed so for this we somehow need to react to this system level theme change okay so for this what we have now here if I check we have application dot current dot uh requested theme changed we have this event requested theme change so whenever system level theme is changing user is changing system label Dark theme or light theme then this event gets trigger and if you check this event it has a parameter of app Theme changed event TS if you go to this it has a requested theme enum property if you go to this we have these three options unspecified light and dark so we can check this dark theme and we can add our Dark theme for this right so for this let's come here we need to add this event handler we can have it in app. zl. CS file which is the starting point or maybe we can have all the theme related things in this theme manager only okay so for this what I'm going to do I'm going to create this event handler in a static Constructor so I'll use static Constructor because this is static Constructor we don't need to use public because static Constructors cannot be parameterized and cannot have accessibility modifier because we are not the one who are calling the static Constructor these static Constructors are gets called automatically whenever we are interacting with the this class for the first time so here what we'll do application. current. requested theme changed and we can add this event handler we can use this directly as a Lambda here delegate or we can use this separate function both will work fine here we can check if e do requested team if this is app theme. dark if this is Dark theme then we will explicitly set our theme to do so here we'll say set theme name of themes. do okay if that's not the case we'll simply set the default theme save everything and we are good now if we add here I have added this break point here so that we can see that we are changing this dark tee from the system now there is going to be one problem let's run it first I'll show it okay app is here everything is fine we are on default theme let's change it to Nature remove this break point continue continue good we have nature theme with these buttons now I'll go here and I'll enable this do theme you see breakpoint hit that means we are here at this point if we check requested theme this is dark so we can continue set theme it will come here set theme it is going to apply that okay there is some problem okay errors error is we are using Dark theme but we have not added that theme here so we need to add that here dark dark and run it now we are already on dark mode okay we'll fix this the initial dark mode Dark theme off then it did not change something is not right let me uninstall this app and install it again then I'll run it again okay I installed it app is here now let's try Dark theme break point did not hit of breako did not hit and why so okay uh do let me know in the comment if you know what the problem is we are switching the theme we are changing the Dark theme and it is this break point is not getting hit do let me know in the comment if you figured out what this is okay so now where we have defined this event handler that is here which is a static Constructor and what I told you the static Constructor this gets called automatically when we first interact with this class so till now we have not interacted with this class that's why this Constructor did not executed that's why this breako is not getting hit okay when we say interact with this class maybe getting or setting some property or variable value calling some method from this uh this class so any interaction with this class will trigger this static Constructor but till yet we have not interacted with this class so that's why this is not getting hit now let's use this change theme to Nature using this we have interacted this class we called this method we'll continue and now if we switch this the this break point should get it yes we are here so now we have this dark theme everything is fine continue continue and we have this dark theme which is fine now we can which is not fine actually this background color is black which uh we have not defined we need to remove this we'll work on this but before that let's disable this dark theme and here again this time if we check this is light so we'll continue continue we are setting this default theme continue continue and we are good we have this default theme now so that means now we were able to react to this dark and light theme from system labels to our our themes basically right so now we can get rid of all those app Theme bindings we can remove all those for me I'm not using all those so what I'll do I'll go to Styles and I'll simply modify the ones which we are using right so first thing is this button we are using after that we have shell this background color shell do background color we are using this so we'll uh let's remove this here I'm going to remove this complete thing and I'll simply add a dynamic resource dyamic resource primary color and then comes this background color of this target type page that means all the pages background color padding is zero and background color is this again on the basis of theme so for this page background color let's add a new color property in all our themes so here I'll say page B which is Page background so if this is default theme we'll use white color let's copy this and now let's go to all our themes we'll go to Dark theme in dark page background we'll use black in our nature let's use white only or maybe in order to show it let's use olive color on fire let's use white only and default I already added right fine now in our styles on this background color of page we can use Dynamic Resource page B okay so we are using page background we are using this background color of this shell then we are using our button okay on button if we see the background color is dynamic resource primary let's check it I'll continue okay we are here uh change theme to Nature let's remove all those break points now we don't need this so it changed to Nature right we have background color Olive this green color naar and here now if we opt in for Dark theme continue now we should have everything in dark right this text color of this button this should be white here also right right now this is to this one which is not right we'll modify this but this is working now if we disable Dark theme it will go back to default theme but IDE it should have go back to the theme which we had earlier which was this nature theme right so we'll work on this as well but before that let's fix the this buttons text color so if we go to our Styles button this text color text color we have for Dark theme we have primary color for light theme we have white color right so we can handle this from here only because we know all our buttons always are going to have some darker color so we can set it to White and if you don't want to do this you need to change this text color on the basis of theme you can simply have one more color property in your themes uh something like button text color that will work but right now I'll simply use this white color so always white save everything thing and we are good now stop it should work now after this let's run it first okay app is here we change it to this this is fine we are setting Dark theme now we can see this color white so this is working we can again switch Back To Nature and we can go here we can disable Dark theme and it will call back to default theme so everything is working fine cool now let's add some mechanism to modify the theme the we'll give all the options of available themes then we'll use those things to uh user to let him select the theme so for this first let's go to theme manager and here I'm going to create one property so we'll say public and this is going to in string array so in this we will have all the available themes we have so public string array let's say themes and it should be static and here we'll have our theme map dot Keys do2 array like this what is the issue here string arror does not contain definition for dog okay this is just Vis Studio okay so we have these themes array here so we can use this on our page to display the all the available themes okay let's go to our main page do SLE here let's do this uh first let's add a title to this so we'll say C manager something like this we have image we have this hello world we are this welcome to this welcome to this one then we had this button counter then we have this button to change the change theme to Nature we can get rid of this button now okay we have this box view after this box view let's add uh grid with column definitions of uh star and auto first we'll have a label grade. column zero where we'll display our current selected theme selected theme default okay then we'll have a button with the grade. column 1 and text will be change theme okay and horizontal options end vertical options Center and we'll add vertical option Center to this text as well like this and on this button let's add a click event okay in here what we'll do we'll say await uh display action sheet title is going to be choose theme then second is cancel canc so we don't want any cancel button or we need cancel button okay we need cancel button cancel then destruction button we don't need it so we'll say null then buttons so these buttons we are going to use at themes so here we can say theme manager do themes like this okay it will return return the selected value so here we'll say word selected theme or let's say new theme which you selected here we'll say if string dot is null or wh space new theme if this is not null that means you just selected something from the uh that action seat and the user did not select this cancel that also so we need to check so here we'll say if new theme is not equals to this cancel that means you just selected some theme from the themes list actually we'll come here and from here we'll say theme manager. set theme this new theme name okay save everything great now we can try it out let's try there is some issue what is it oh because this themes we are using this uh name space for that so let's say theme names okay so here we'll say theme names cool run okay app is here selected theme is default everything is fine change theme and we have this choose theme cancel default fire nature dark all these available options if we cancel nothing will happen if we selected fire then Fire theme applied if we choose nature then nature theme gets applied if we select dark then Dark theme gets applied and now we have one issue we'll check this cool first we are on default everything is fine then we move to fire so colors changed but the selected theme text this is not Dynamic this should be dynamic we'll work on this after that we'll go to change theme and on dark this text color this is not uh aligning with this theme right so we need to work on text label text color as well these are labels right so let's work one by one first thing we need to modify the selected theme so this should be dynamic so for this what we are going to do we'll stop it and on this page we will add one property so we'll say string and selected theme okay and the default value we can have the theme manager do selected theme now let's use the binding context for this page which is going to be this current page only because we have this property here selected theme we can use this then we'll go to ZL markup and on this page let's define the data type so that we can have intelligence before that let's add a name space for this so we'll say xmlns local which is this only so it will be theme manager Maui and then data type is going to be this main page and now on this label we can have binding selected theme and here we'll use string format we'll say selected theme zero which is this value cool let's try it out there is one missing piece so if we go to main page. sample we have the selected theme but we are not modifying this theme right if we change theme nature everything is fine but this text did not get changed because we have not modified the value of the selected theme so whenever we are switching the theme we are changing the theme this value should be changed now one approach could be we can set the selected theme property here which could work for this page but there might be other screens in our app where we need this updated selected theme right so for that the best approach would be from theme manager we should have some notify uh property or notify option so that when whenever the selected theme is getting changed it should notify that that whoever is want this updated value he can use it so here we'll say public event event handler and we don't want any property any uh return type from this so we'll say this and here we'll say selected theme changed like this and it should be static so selected theme changed so whenever we are changing this theme so we set selected theme equals to this theme name after that we'll simply raisee this so null and event ask. empty like this cool now whoever want this not want uh to be notified whenever selected theme is changing he can simply add a event handler through the selected theme changed event so in our case we need this on our main page so in this Constructor we'll say theme manager dot selected theme Chang plus equals and we can do this so here we will say simply selected theme changed equals tee manager or selected theme now we will be here so it will work uh the selected theme property is going to be changed but we are not notifying the selected theme change so that it can be used so this jaml could be updated so if you remember if you use mvvm model view view model we need to have that notify property changed for the selected theme right so for this what we'll do here we'll have one bing field so private string underscore selected theme which will have the default value of this selected theme like this after that we'll make it a full property so from getter we'll return selected theme from seter we'll have some logic that logic will be first we'll check if value is not equal to selected theme then only we'll do this selected theme equals to Value after that we'll say on properties changed name of selected theme so we are modifying this property so this on property changed this method is coming from parent so this main page has this content page parent on this content page we have templated page on this templated page we have page on this page do we have I notify property here only no so let's go to visual element and here do we have that no let's go to navigable element then go to element bindable object and on bindable object we have I notify property change so it will it is flowing in the hierarchy to the very low level here we have property changed event and for this we have this on property change method so we are actually calling this which will actually raise this property changed event and which will internally update this zaml so save everything and we have this so we should ideally should uh remove this event handler detach this on disposing but for now let's leave it like this only I'm running it and now we'll see if this the text is getting changed or not up is coming okay change theme fire remove this break point and you see fire if we change it to Nature it Chang to Nature if you choose default it is default if you choose dark this is dark which we cannot see right now we'll fix it now let's try from here as well if we enable dark mode then we have this do so that means these things are working cool right now let's disable this dark theme and let's fix this dark theme when we are selecting it the text color these labels is not F right not correct so we need to fix this for this what we can do we'll stop it for the first time then we'll go to our Styles and here we'll search for label this is label on this text color we have this app Theme binding right so for dark it is white for light it is gray 900 so what what we'll do we will use uh one more property in our themes so that will say let's say label text color just text color we are in dark it should be white and nature let's have it black only fire let's have it maybe dark gray dark gray will not look good uh maybe have black only then default black and we are good right 1 2 3 4 we have four themes cool so on style we'll remove this and we'll say Dynamic resource and here we we will say text color like this so save everything run it and let's see okay app is here if we change fire black nature black dark it is white so that means this thing worked right change theme default change theme fire now if you go here Set Dark theme on this is white so everything is working fine right cool now one thing right now I'm on this default theme I'll go to Nature okay now if I select this dark theme this is Dark theme this is fine now if I disable this dark theme it is going back to default theme but ideally it should go back to the theme which we have before this dark theme right we have that nature theme so it should go back to Nature not this one then one more thing right now I have selected this fire theme so I like this theme I prefer this theme I Clos the app uh let's close this app and open it I selected fire right but if if I'm opening the app again now I can see default theme this is not what we want we need to preserve user settings right so for this what we'll do we'll again go back to theme manager and here we will have some logic and that logic is going to be we will have a method which will public static void and we'll say initialize oh initialize the this theme initialize this theme manag initialize this theme manager so here what we'll do uh before everything whenever we are setting the theme okay so after setting the theme we should save this setting in user preferences here we'll say preferences do default if fault dot set type of string and the key so let's define a key here here we'll say private uh const string theme key uh name is up to us whatever we want theme key here we are going to set this theme key and the value will use theme name okay so whenever we are setting the theme we know what theme we are setting after this what we'll do we'll go here initialize in initialize we'll check if we if this user has already selected thumbs some them so here we'll say selected theme equals we'll try to get it from preferences so we'll say preferences. default. getet string keys theme key and the default value we will use null we don't want any default value okay then we'll check if selected theme is null if that's the case we'll simply set selected theme to default theme name of themes. default okay and then we'll simply call our set theme with the selected theme like this okay now we need to use this initialize method from somewhere and that somewhere is going to be our app. zl. CS this is the main starting point of our app here we can override a method which is on start and here we'll say theme manager do initialize so we're initializing this now save everything and now we should be good let's run it app is here now let's change the theme Nature close the app open the app again we should have nature theme selected and this is nature that means this thing is working cool next thing was if I am on fire I go to Dark theme this is Dark theme and now if I remove dark theme it went back to default but it should have went back to fire so for this we need to have state for this as well for this what we'll do the system level Dark theme that we are handling from this event handler right so if this is dark we came to Dark theme here first we'll check if we are not already on Dark theme so selected theme is not equals the name of themes do dark if that's the case we have not already on Dark theme then what we'll do mhm so we are not on Dark theme we are selected Dark theme from the system tray or somewhere then we need to check what the current selected theme is so for that we'll have one more key here so let's say previous theme key pre theme key something like this so in here we'll set this preferences. default do set previous theme key PR theme key and this will be selected theme okay now when we are coming back that means we are switching back to some light or unspecified mode so we are when we setting Dark theme to off at that time we need to check if we have some value in this PR theme Cube if that's the case we'll use that okay so here inside this else case we will check mm we'll get we'll say if previous theme or let's say previous theme we are going to get it from here preferences default get string previous theme key and the default value we need to have some default value in this so for default we can have uh default theme so themes. default if you don't have anything in previous theme key then we'll simply go back to default theme from here we'll set this previous theme like this cool now let's try it out let me run it okay okay app is here let's switch to Nature now let's go to Dark theme we are on Dark theme now let's go to we are setting off and now we are on nature so that means this logic is working great now what else there is one case I think yes that case is let's stop it and uninstall the app okay now set enable the dark mode now system is in dark mode now if I run this app so I'm running my app for the first time right now ideally because we have dark mode enabled on a device our app should open in dark mode but let's see in which mode our app opens if we are opening it for the very first time it is in default this shouldn't be the case right that is happening because when we are first opening our app it will come to initialize it will get the theme key which is null we have this null and we are setting it to default right so before setting it to default if this is null we need to check if on system level if user has selected the dark mode if user has selected the dark mode then instead of setting this default we should set to dark mode let's do this in order to test this we need to again uninstall the app app info uninstall okay cool now here if selected team is null here we'll add one more condition where we'll say end the application do current dot we have user app Theme so this gives the current users app Theme that is the dark or light or unspecified right so this user app Theme and here we will check if this user app Theme is app theme. dark if that's the case so selected theme is null that means we are we came here for the first time and user has selected Dark theme so in that case we should set it to dark right selected theme it should be dark cool so here we will see if this is dark what if selected theme is null and it is not dark okay so here we'll set selected theme if this is null then we'll set it to default so now I think we have captured all the cases when we are coming here for the first time selected theme is null and if user has selected dark mode then it will come here so dark mode is then we are setting selected theme to dark and we are setting that if user is coming for the first time and user theme is not dark so this condition is not going to be executed it will come here selected theme is null in this case so we will set default and if we are opening app for any subsequent run at that time selected theme will not be null so it will simply skip this and we'll simply set selected theme to null uh so whatever selected them we have so I think we have covered all the cases let's try it out run we are running it for the first time and we have dark mode enabled so our app should open in dark Mode app is opening and this is not in dark mod why so let's check so we have initialized stop it uninstall let's run it we'll see what the issue is break point got hit he'll come here so selected theme is null and user app Theme is unspecified should be dark right so application. current do user window application do current dot user app Theme unspecified we have other property right user current dot what was those platform and Platform Theme Platform Theme let's try this Platform Theme we can use Platform Theme cool so let's stop it and we'll use platform app Theme P manager uninstall okay remove breako and run it and our app open in dark mode cool now let's switch the theme we are on fire let's stop the app open it again it will open in fire mode cool it will go to default which is expected Nature close the app now if you open it it should open in nature theme and boom yes everything is working right so this is how we can Implement our dynamic themes okay so for this change theme maybe you might have a dedicated screen profile file or settings screen from there you can handle this maybe using this action sheet only or maybe you can have radio button group from there you can choose or maybe you can have picker which is the select drop- down list you could say from there you can have all these options and user can select theme okay and then there is one more thing which I wanted to tell you so right now in Styles okay in that case we need to remove all these app Theme Bing these are not going to work right because I'm not using all these in this particular sample demo tutorial that's why I have not changed all these but you can change all these then there is one more point and that point is if we have multi-level Dynamic resources multi-level Dynamic resources if we have hierarchy of dynamic resources so what I mean is let's go to uh main page. Zam here I had this box view right on box view I had this Dynamic resource primary instead of having it like this if I had this as a style so here I'll say content page do resources resource dictionary and here if I had some Style with Target type let's say box View and key let's say box and here I have a SLE with property of color and the value of dynamic resource primary and now if I use this style on this box view so instead of this color directly I'll use uh style and here again I have the static resource box or I can use this as Dynamic resource okay let's try it out app is coming it will be in uh nature mode green I change it to fire everything is working fine but for this particular case box view is using this box style and this box style is using this Dynamic resource primary so for this we don't need to use Dynamic resource here we can use static resource here so save run app is here app is here this is default if I go here I make it nature this is nature I make it fire this is fire I make it dark this is dark so that means this thing is working so if we have this kind of scenario where our style depends on some Dynamic resource then we can consume this style directly using static resources okay okay so I think that's pretty much it for this video do let me know in the comment if you find this video useful if you learn something new and if you are going to use this Dynamic theme switcher theme manager in any of your app okay please like this video share this video subscribe my channel I'll be back soon with some other cool video till then bye-bye happy coding

Channel: Abhay Prince

Views: 969

Keywords:

Id: apmWADNFiY0

Length: 75min 50sec (4550 seconds)

Published: Fri Nov 03 2023