Angular Applications Dark Theme Switch Tutorial | Angular Material Dark Mode Toggle Tutorial

hi friends welcome to arc tutorials in today's episode i'm going to show you how you can achieve dark mode theme for your angular applications dark mode theme has become kind of a craze and a trend that and also it helps for the end user right to have a dark mode theme design and it's really appealing to the users a lot of modern applications provide that and i'm going to show you step by step how you can enable the dark mode theme in your angular application but before we get started i want to show you a quick demo for our users who are not really sure about what a dark mode theme is so that they get an idea about how interactive or how appealing it looks let me show you uh the popular so everybody knows youtube this is my youtube channel you see this is a dark mode theme because it's all dark now and black background go here and say appearance light theme it becomes white right similarly again go back and say appearance and dark theme and you get the dark theme right so we are going to simulate this use case and build an angular application from scratch step by step and achieve the dark mode theme let's get started all right before we uh actually start coding i'll request you to kindly support me and my channel please do subscribe to my channel please do like share comment on the videos and please do share this with your friends and colleagues also if you like the video please do consider buying me a coffee at buy me a coffee.com slash arc tutorials thank you in advance for your support all right so what are we going to do in today's episode we uh we are going to learn how to create the dark mode theme there are a few prerequisites for this which is you need obviously you need an angular application for it and also we will need the angular material design framework right so if you are using other design frameworks this may not really work so this is designed only for angular material design framework i will consider showing you the dark mode theme with bootstrap sometime later but for today we will focus on learning how to get the dark mode theme using angular material framework let's get started all right so all i have here is an empty and blank folder i don't have anything i will start with the very basics for you so i'll do angular npm install angular cli right this is from scratch step by step so that it will help you learn everything how to do end to end so let me list down some steps for you if you miss out on some of if you already have a angular cli installed if you already have angular application in you can skip these steps install angular cli and the command you will do is npm install angular cli okay that's step number one the step number two is to create the angular project and we will use the ng command once angular cli is installed we will run the ng new and the project name so let's call it product board right so this way we'll create a new application so our cli is installed and now let's run ng new product board that's the name of the application i'm giving you can give any name of your preference or choice all right so this will create the new so here we will say yes would you like to add routing yes we'll use scss and let it create the project the next step is for us to create a sorry install not create install angular material okay that's the third step and this we can do it using multiple things okay either we can say ng add angular the rate angular slash material or we can do npm install angular slash material right whichever command you run it's fine there is no there is no difference but having said that when you do ng add it will give us theming options okay theming options so i would suggest always do ng add for some reason if you run into any issues or errors then go with the npm install command okay so some of uh sometimes i have seen errors in ng add i i hope we don't get it today but if you get it first do npm install and then run this command okay it won't make any difference for you same with existing applications if you have the angular material installed you can skip this step okay if you are already using angular material you can skip the step number three and come straight to four and five okay so the next step is um we will run the application and see the default so we will run using ng serve okay so this way we will see the default application and then we will add our theming inside it let's give packages are installed successfully okay so now the next step i said is ng add at the rate angular slash material okay so this would give us install okay so this needs to be in the okay so now ng add angular material so now we are trying to add the angular material library so see i'm getting some error which says sha manifest etc etc i'm not going to go and fix it rather i'm going to just run a npm install at the rate angular material this would install the package for us so let's do that so once this is done we can again run ng add to add the theming in our application all right let's give couple of more seconds okay so it added the package now again let's run ng ad so that it adds theming options so this will check if the theme is available it's the package is already installed if it is installed it will give us the theme option like here and here you using the arrows up and down arrow select custom and hit enter yes select the typography select browser animations and it will update our package dot json alright so once it is installed we will run the application and see the output once we do that the next step will be to customize right the next step okay so you see here all things are updated now run ng serve okay so now we are running ng serve it will load the application and we should see it compiled and run the application that's step number four let's give it a minute to build while it's building please do consider hitting that like and subscribe button please do keep supporting my channel and me thank you again in advance all right so it's generating the bundles now should be done soon do let me know how you find this tutorial if you like please drop a comment to encourage me all right so we got the application compiled successfully now go to our ui and refresh it and we see that this is the default screen okay and we added angular material as well so beautiful so far now i'm going to clean app.component.html for all the unnecessary code that it has so if you already having an application you can skip this step as well come down and to the router just keep a router outlet and everything else you delete okay so now all you have is router outlet your screen should be empty like this okay so now you have it so now what we are going to do is we are going to material dot angular dot io and the components and i'm going to get a slight toggle right i'm going to take this behavior of slide toggle and use it in our application so we'll copy this we'll use this as a button to reset so now this is where it gets interesting friends so pay very careful attention because now what i'm going to do is add some angular material components right ah not specific ones but the generic ones so that we know um exactly how to add it okay so let's get started first uh maybe we can add some more code uh say add let's say add matte card and i'm going to say matte card content and i'm going to paste that matte slight toggle here okay so what i've done i've just added a matte card or we can also add a tool bar right i'm going to copy the default toolbar for now and let's copy the simple one so this is just too fancy and you don't have to do it necessarily i'm doing it just to make it more appealing application so now this will give you all types of errors in the code because we have not imported the required modules so let me do that quickly uh again go here in the ts copy the copy the ap go to api and you would see the modules that we need to import so i'm going to import the required modules for toolbar similarly for card right we need the card api mat card module copy it and save it and once you import them you need to add them to the list of import arrays so add both modules inside this particular module save it and now we should see the applied okay so it says matte card module cancel reload again so we have the card module we imported the mac toolbar right and we also need the slider right so we need the slide toggle let's take that also we need the slide toggle mat toggle module did i think we added it no we did not add it so let's add that mat toolbar mat slide toggle take it add it here okay so now i've imported matte card mat slide toggle and matte toolbar module now this should compile fine because i have provided all the modules which we are using here in the matte library which is matte toolbar matte card and matte slight toggle let's see there is some error what is it so matte icon okay so we need the matte icon but for now i don't want to complicate it right so i'm going to remove that matte icon or let's just do one thing let's install it it might take one more minute bear with me please all right so icon let's go and get the api for that and copy it here and again go into modules and add it to the list of and include this in the list of imports here all right beautiful i think now all the we have provided all the modules required and whenever you see this just close and cancel it should load fine this is just to make it look better you don't have to do again this step you can again skip it but the real thing that we are going to do is adding the design which i'm going to do right now all right add some angular material components this this step i'm doing it because you can see that visually then right the changes that when we do so our application is compiled successfully and we see that you see the gray background you see the toggle beautiful now this is where the fun begins okay now let's customize the dark mode theme okay and to do that we'll do few steps one in the app component right we have got the slide slide right so let's do that and take that slide and copy it okay so let's first fix up the styling so go to style.scss and you would see that this is the code which comes when there is a default custom styling that you selected and you would particularly see this line this is the matte light theme copy that entire thing paste it again here just below that and let's call this dark theme here let's add a new and call it dark theme okay so what i've done i've created a new variable and i'm saying matte material has a inbuilt dark theme take that and use that to a very assign it to a variable now we will say whenever there is a dark theme enabled then load the dark theme so that's all you need to do here you will pass the dark theme variable now see again carefully what changes i have done first you would see these lines which has for the matte light theme copy it as it is from here paste it again and rename this from light to dark so angular material has support for dark theme so you are going to use that matte hyphen dark hyphen theme now take that values and pass it to a variable product hyphen dark hyphen theme and we are saying whenever the class is dark theme include this theme which is the dark theme that's all changes you will do in style.scss okay so style dot scss make and enable dark theme when class is dot dark theme now this dark theme is custom defined class you can define any name you want okay this can be any name you want it's a class name you can give any name to it i have given dark dot theme now next let's go to our component class and here i'm going to define a variable and i'll say is dark theme equal to true right usually what happens is in real time you would have a user setting or preference api which will fetch the saved value for this variable right so you if user has saved dark theme it will be true else it will be false okay true is equal to dark dark theme is equal to is true else it's false so that way you'll save it in the backend api assuming that this is now true okay assuming that it is true okay now add a variable is dark theme true and go to your app component and wrap all of this into a div let's let me wrap it up in a div here okay and let's close everything here and now i'm going to say add a ng class okay so now we'll use a variable okay and you use the operator ng class and say whether it is true or false okay let's get that going so it's simple it's just a toggling right so you'll say true or false that's all you are going to do let's do that here you will say ng class equal to now you will say if is dark theme then add the class dark theme or else add light theme okay so what you are doing here you are checking if this variable which is in our code which is is dark theme then you will say that it is light uh apply the dark theme else if it is um if it is a dark if it is a light theme then apply as usual the normal one that's what we are saying it here clear so let's test it out and see uh how it looks in the output all right so let's get this done now what are we going to see are we seeing any errors okay so it says is dark theme error okay so let's check that variable name once and see why that is not reflecting so let me go to my component class and let's check that value here it should be somewhere here okay okay let's put it like this oh my bad start theme right and then we are going to add it and okay so we are going to make it start theme and start theme okay so here i'm doing a check conditional check that if it is this is dark theme add dark theme else light theme let's see so see here now it is all dark because in my component i have added it as true now let me make it false now see it will automatically become okay why is this so let's check each dark theme is dark theme there should be a true value or now it should be actually false here it's a interpreted class so now it's compiled successfully let's see why okay so now it is false now let's go back i think it didn't save earlier okay so now we got dark theme now it will become dark now you have false it will become light right so it's switching so what we'll do we'll add a click button and here we will say on click equal to toggle theme okay so nothing fancy just a simple method that i'm calling to toggle it and we'll mention it here and we'll say this dot e star theme equal to we'll toggle this dot is dark theme so if it is dark it will become light if it is light it will become dark so now see right so this is how you can enable the entire angular application to go into a dark mode theme right just like how we did it here so the moment you select light theme it becomes light just like here again you select dark it becomes dark similarly in our case you slide and it becomes light theme you slide it becomes dark theme that's how simply you can enable the dark theme in your project i have shown you step by step how to achieve that if you already have an application give it a try it's really amazing awesome you will love the experience do write to me if you have any questions i would be happy to help you stay tuned for more such cool angular tutorials keep learning keep growing if you like my tutorial please do consider buying me a coffee at buy me a coffee dot com slash ark tutorials thank you again for joining see you in the next episode

Channel: ARC Tutorials

Views: 5,315

Keywords: angular dark mode switch, dark mode angular material, angular material dark theme, angular material dark theme switch, angular material dark mode, angular dark theme, angular dark theme switch, angular dark mode toggle, dark theme angular material, dark mode angular 10, dark mode angular 11, dark mode angular 9, dark theme angular applications, angular apps dark theme, dark mode anglar, dark theme angular tutorial, angular dark mode tutorial, angular dark theme tutorial

Id: pxWRRM4EmQg

Length: 21min 19sec (1279 seconds)

Published: Mon Jan 18 2021