Angular v17 using Signals & Angular Material to apply Dark and Light Mode | Angular Theming

hello and welcome to my YouTube channel I'm ay and in this video I'm going to be showing you how I do one of my absolutely favorite things to do when I work on the front end of any application and that is how to add Dynamic theme switching so that users can change between light and dark mode I will be using angular version 17 and for two out of the three ways that I'm going to show you I will be using angular signals so if you're interested keep on [Music] watching in this video I'm going to show you the option of changing the theme dynamically using angular version 17 and using angular material and I have been using this a lot for a lot of my apps the difference is that before I was using Behavior subject this time I'll be using signals and I'm going to go over the pros and conses very quickly so the pros are that you can use the predefined global styles that are provided by angular material UI you can use signals and the conses there really aren't any conses I have been using these for a lot of my apps where I'm changing the theme dynamically I have been doing it primarily with angular material the first thing that I need to do is go into my designated folder in my local machine I have opened up um G bash terminal over here and I'm going to create a new angular version 17 app with NG new angular V7 theme and um I'm going to just say angular material cuz I don't want to make it too long signals now of course you can name your app whatever you like I am naming it like this because I'm going to be adding it to the public repo where you can have a look at the code and use some of the styling that I'm applying if you like it but mostly have a look at the service and things that I will be doing over here and I like to start all my apps by setting the Style Style to S CSS so engine new angular version 17 team angular material signals and let's create the app and now that I have my app created I am going to open it in Visual Studio code by code and Dot so going in the correct app which is theme angular material I'm going to go and open up a integrated terminal and I'm going to generate one component I'll keep it very simple only generate components that are relevant to what I'm doing so NG generate components and it's going to be in components folder it's going to be called header cuz I really only need heer and a little bit of styling for this okay components and header get commit and push this up what I'm going to do over here is CD into the correct folder for this project angular and signals and I'm going to add angular material ngg add it angular material okay proceed I'm going to select the theme I usually go with the purple and going to go yes to everything else what I preferred to do and this is the angular material way it can work with just style CSS but I am just so used to doing it I create another file which I call theme CSS theme CSS I'm just going to copy the code that I have from another app cuz again I have been doing this quite a lot so I have the code already from different apps where I have been using it basically what the code does is it is connecting to the predefined styles that are provided by angular material specifically I'm adding styles for the dark mode the dark class and of course I can add more styles to the light theme if I want to but all I am doing so far is just connecting to the predefined Styles I haven't written my own Styles yet I mean I usually do add more but I don't have to because they they provide quite a lot already to use those Styles now the team CSS file has to be added in angular.js so I'm just going to search for Styles and over here where I have styles CSS I'm just going to add theme scss and I have it twice so let's find the second one which is over here now I'm going to go and add add things to the Heather component and I'm going to also need to use the let's open it to the side uh Heather component yes because I'm going to import some angular material components going to angular material checking my version going to components and I'm going to use a toolbar just the basic toolbar but first of all I need to import it I'm going to imported in Heather component so over here toolbar module and add it to import I'm probably going to need to add few more like buttons and icons but let's just do it one by one examples I'm going to grab the code here for matte toolbar and I'm going to replace what I got over here so since there are buttons and icons and in order for everything to appear right and to work I'm going to need to import buttons and icons let's find them button API M button module let's get it over here okay button modules and I'm going to have to go into icon import icon module still again I'm importing it in version 17 in the component directly which is header component in the case and now let's see what I have over here is I have a lot of glasses which I don't actually need I'm going to get rid of them for each button I don't need this second button I don't need the spacer and over here I'm going to remove the classes also going to go into the app comp component I'm going to erase everything that is over here and I'm going to create a wrapper div which is going to have a class of dark for now and I'm going to want to display my Heather component but in order to display it I need to import it also so let's just go over here in app component TS hether header components okay imported and now I can add it app header now I would like to run the app and see um the progress so far so npm install and NM start okay so let's see what we got going on okay my app and you can see that the Dark theme is actually already taken effect because I set it in app components it's already dark I like to set it as dark anyways but yeah so what I need to do is create a service I'm going to open up an integrated terminal and I'm going to NG generate service which is going to be in folder services and it's going to be called theme Service open up theme service and now I don't need a Constructor but here I need to set up my signal which is going to be in signal is going to be signal of type string and it's going to be set initially to dark which is what I prefer to set it initially to I know it always suggest to put it light but I like to set it to dark initially uh Imports okay so got the signal import import it over here what I need to do is I need to set the theme first which is going to be a string it's going to be this dot theme signal but here is set theme okay and now I need another function here which is going to be update them which is again theme of type string and the signal update okay so it's going to be this theme signal update but over here what I'm going to do is I'm going to get the value of it and I'm going to uh add a tary operator so it's going to [Music] be value if the value okay yeah yeah actually if the value is dark it's going to set it to light okay I actually got it from the first time over here so yeah I'm going to get the value of the signal and then I'm going to use the turn operator check if it's dark then set it to light and if not it's going to be dark so let's format this document a little bit yep so update theme doesn't actually take any parameter now with the theme service created I'm going to go back into app component TS and I'm going to need to inject it over here so I can use it so let's go theme theme service it's not going to be type any it's going to be type of my theme service and it's going to be injected inject theme service okay with theme service injected in app component I'm going to go ahead and use it I'm going to go into app component HTML and I'm going to replace the class that I have over here with NG class which is going to be connecting to the theme signal and it's going to be theme service them service do theme signal let's connect to it okay like that so now I'm going to go back to the heer component cuz I need to add few more things and I of course I need to inject the theme service in the header component as well but first let's just add few more angular material components and I'm actually going to change the Styles a little bit I'm going to use styles again I'm going to copy them from styles that I have before okay just to spread things a little bit better what I want to replace this icon here with is a slight toggle provided by angular material which is pretty cool so I'm going to import it in the header component okay I'm not going to be rearranging my imports this time I usually go by size but for now I'm just going to leave it like that and grab the code from the overview going to create a new element with class theme control and I'm going to add the let's say goes after need the toggle slide tole itself okay now the share icon I think is going to be bet time I think that there was the moon one yep there was the moon one I need the mat tole actually to be checked cuz we have the dark theme on I'm going to go into Heather component TS and I'm going to inject the theme service have type theme service inject theme service okay so let's add in all the missing Imports okay I want to add a new control flow conditional rending with the if and um just do it like that now I can add an else statement I'm going to start with bedtime and here the second one I think it was brightness seven or something like that and here the conditional is going to be just like I did it in the app component so theme service theme signal okay and um I missing get over here okay so theme service theme signal otherwise it's going to be brightness 7even and for that to work I need a click event so I'm going to go and Define it in hether component yes this one is going to be called toggle theme and I need to add the click event to matte slight toggle and that is going to be my toggle theme okay let's have a look now okay it is working it is changing the color of the theme I'm not happy with this icon though I think I'm going to go with brightness five let's say this be a bit better yeah yeah I prefer this one I'm going to add content putting the content inside there go into app component CSS and I'm going to add in content I'm just going to add a main mean height of let's say whatever something just so we can have some more substance over here and Y there we go now it's even more obvious that it works and it's picking up my styles that are defined and of course a lot more can be added angular material has a lot of components that can be added but that is the basic setup for the app you can have a look at the other options that I'm showing to changing the theme using angular version 7 you can have a look at the rest of the videos on my YouTube channel a lot of them are angular related thank you so much for watching and I hope to see you next time bye for [Music] now

Channel: Esther White {{ MonaCodeLisa }}

Views: 2,363

Keywords: esther white, web development, learning, practice, simple, html, css, javascript, angular, frontend, backend, programming, coding, v17, theme, service, switch, signals, dynamic, theme switch, theme switcher, light, dark, light mode, dark mode, google icons, how to, angular signals, ui, theming, angular theming, theme toggle, toggle theme, toggle switch, toggle, angular material, inject, dependency injection

Id: JYbn1Q25EEc

Length: 16min 18sec (978 seconds)

Published: Sun Feb 11 2024