Customizing Angular 5 Material Themes

Key Takeaways

you hey everyone Gary Simon of course Etro now just a few days ago I released a pretty popular angular 5 material tutorial which I'm gonna link here you can watch that that's gonna show you exactly how to get set up and running and also how to use and integrate components somebody asked me though how do we customize the colors and the themes for angular 5 which is what this tutorial is all about now first just yesterday I did release a brand new UI design course so I have to give myself a plug check it out that's also going to be linked here in the description and it's nine bucks to access that plus every single one of my other courses so definitely consider that my children kind of have to eat ok so let's go ahead and get started here the very first thing we're going to do is use the angular CLI or command line interface tool to get started with a new project if you don't know what I'm talking about go ahead and watch my free angular 5 from scratch course so just gonna assume you have that installed already ng new we're gonna call this custom theme and we're gonna give a style flag of s CSS for staffs for sass rather so it's just gonna take a little bit to install this alright and once that's finished we're gonna CD and hop in to the directory custom theme alright and then next we're gonna round ng serve which will compile the project to start a local dev server at localhost 4200 and then also I'm going to right click here and make a new console window by the way I'm using commander CMD ER which is pre console emulator for Windows and this is a custom theme I created myself I think I'm going to release a video shortly because a lot of you asked for that alright so CD code and custom theme okay so what we want to do now is integrate angular material so if you follow along with the previous side tutorial that I was talking about earlier it's the same situation NPM install an angular material angular CD k save it as a dev dependency in the package.json file alright and then after that we are also going to install the animations so npm install angular animations and save it and the reason we're doing that we're not going to be using any components that use animation but you know it is you should install this by default if you know that you're going to be using them in your app so i'm just including that just to show you how alright great so now let's go ahead and open up the actual project this will launch Visual Studio code so I'm another monitor okay now a source app and our app module ts file we're going to make a couple imports so first we'll handle installing animation to do that we're going to import right here by the way I'm gonna make my browser or editor bigger here for everyone to see it's ctrl + + - will adjust that for you take this at it as an import alright next simply because we're already here in our app module file we're gonna go ahead and import the components that we're going to use from angular material so I'm just gonna copy and paste and by the way when I reference or paste any code don't worry about that you can go to the written version of the tutorial because in every tutorial I create I basically create a written version on my site it's in the description here in YouTube and you can just follow along and copy and paste the same thing I don't expect you to type out everything that I'm pasting alright so after this we're going to and by the way all imported was the Matt button module toolbar icon and card those are the components were going to work with to demonstrate theming here so also we're gonna have to import those as well so I'm just gonna copy and paste that bit alright so that's those four which align with up there so let's go ahead and save that and next we're going to use one of the four predefined themes so if I come back here we're gonna go to our source styles sass and import the indigo pink for the default angular material pre-built theme they offer four of them but of course if you're here you probably don't want to use one those you want to customize it next we're going to import the material icons because we're to be using those so I'm going to go to index to HTML and paste this following line right here okay so let's go ahead and save that as well all right so next we want to define the actual template so if we go to app component HTML and delete all that stuff actually that's stuff too yeah I'm going to go ahead and again I'm going to be referring back to that written tutorial so don't don't freak out by the amount of CSS here it's really simple and all this is actually coming from the official material documentation where they have their examples cuz I'm not trying to do anything really custom here in terms of the template so first I'm just gonna paste this in here we can see we have a matte toolbar this is gonna create a toolbar at the top with a color set to primary and then you'll see what this looks like momentarily alright so if I go real quickly to the let's get it up a new browser window here go to localhost 4200 you'll see what it looks like so far kind of looks like garbage if I hit control shift I and I click on yeah make sure this little thing is clicked on right here we'll see what it looks like on an iPad for instance so we'll just refer to that from now on all right and then after this we're gonna use some cards all right so paste this here and the only thing happening here is you'll need to adjust some time aid from you know the the example documentation is that I put a color of accent so we can see how custom accent colors work and I also change this to a raised button so that we can see a background for the button so it saved that we'll go back and oops I minimize that one too and we'll see what this now looks like so this right here is the default oops that looks like one second this right here is the default colors that we use based on indigo pink that we imported so what if you wanted to change these so now we're finally getting to the nitty gritty part of this tutorial before we do that real quickly there's just some a few CSS rule sets like this orbit here should be right aligned let's go over here again you can refer to the written tutorial to get this stuff here let's go to the app component sass I'm just gonna paste this right here again this is all in the written tutorial so let's come back here there we go it fix that stuff and everything's looking pretty good alright so what we need to do now in order to actually customize the themes to create a new sass file and it'll be in our source folder so if I just click on this one for instance and create a new file we'll call it call it whatever you want I'm just going to call it themed SCSS and the first thing I've to do is import or create two different lines so we're going to import angular material theming just make this bigger so you can really see it and what this does is it imports all the theming functionality and the next include Mac core which is a mix in this import or includes common style so next before we're going to continue on without actually creating this custom theme section we need to first in order for this to actually be included into the project we have to go there angular CLI JSON file and we have to reference that theme s CSS right here so we'll save that all right so now hopefully we can now just focus solely in this file what we want to do here is you know at this point after these two first lines we're going to create a variable here we'll call this custom - primary and we're gonna call the mat - palate mixin and in the first argument which is the only required argument we're gonna put in a palate reference so Matt will say deep purple alright we'll save that now nothing's gonna happen yet but just to show you and describe what exactly is happening here because you may be a little bit confused is if you go to the material IO of official documentation with the color palette section you're gonna see all of these different palettes here and each one of them has a name like light blue teal and cyan green light green etc you can also see the one we're gonna use deep purple this is where you specify that name after Matt - right here alright so hopefully you understand that so all you're doing is you're specifying a color palette next in order for this to work we have to replicate this line and create an accent color and this is also required alright so we also use the same exact thing so whatever you think will work well in terms of an accent color we can simply put here so we'll say pink that's one of the other color palettes you can also put a warning in the same method as these two but that's optional and we're not going to do that right now so next we have two more lines we're gonna make a custom theme variable it's gonna be matte - light - theme and we pass in our two variables from above so custom primary and custom accent next we actually you know at this point we've only defined three variables and variables don't do anything in and of themselves we have to usually pass them in to some sort of function or mixin so to do that we put in add include angular material theme and then we passed in the custom theme defined in line above alright so if we save that and we go back to our project we'll see that now we have this purple up here when previously it was blue now if you have a short memory just to prove to you that this works I mean I'm not gonna sit here in lie that'd be kind of ridiculous but if I take everything right here save it we'll see it goes back to the blue all right so let's also go ahead and let's make I would see if we contain this to a dark theme because remember I mentioned that this matte light theme can also be changed to dark so let's do that real quick hit save and voila so now we have a dark theme that we can work with and it's that easy simply changing one word all right so let's talk a little bit on expanding on this matte palette mixing right here so as I mentioned before the first argument is the required argument which is the actual palette that you want to use it can also accept three other optional arguments which is the default color in the second parameter a light color and dark color so let's say for instance looking back at our little pathetic project we don't like this particular darkness or lightness or hue of the purple we want to change that for whatever reason well to do that let's revert back over here so by default uses the 500 and so if we want to go lighter than that we would just simply specify for instance 200 or 100 and you will see that the top bar will change because we're setting our primary color default color to 100 all right so let's go ahead back real quick and do that so we'll change right here this value and in fact let's just go lighter than 100 let's try 50 as that was one of the other values as well so we saved that and now we could see it's much lighter so that's how you define default values okay so let's make another change real quick just so we can get a little bit more repetition in here make this one 600 in our accent color 100 so for save this let's get up our project here save it and there we go so we made lighter buttons in this context and a kind of a darker purple all right so let's also discuss creating and specifying multiple themes alright so let's go ahead and we'll put in an alternative theme down here so we'll put in and by the way just to save ourselves a little bit of work just copy these for paste them in I'm gonna change this to alt no not all right just alt for alternative theme and then right here let's try a yellow and we'll get rid of this let's also for the accent we'll make it gray and we'll make it a light gray 200 and then yell theme we're passing in just alt and alt and then the one area where this is going to change is we have to specify a class so we'll just call this alternative and this goes the include goes inside of that so this has only ever included if alternative the alternative class of is attached to a parent container in the template somewhere so we'll save this nothing's going to happen in the project at this point but what we need to do in order to actually use this is go to our app component HTML we could attach it right here and it would affect the button where color accent is specified or we can just wrap everything around it and we'll do that real quick classy goals alternative and put it down here alright so we'll save that we'll go back and that's right it didn't work because I passed in custom theme have to make that change too and let's go back and there we go very very easy so in this way you can mix and match and specify alternative different themes based on your needs so one final area that we can talk about is how do you theme specific components maybe you don't want to theme you know a site-wide angular material theme but maybe you only want to theme let's say for instance the button component well to do that that's real simple all we have to do is change this section right here and we'll reference mat - button - theme so when I save this the only thing that's gonna change now are the buttons this reverts back to this default theme up here all right and so you may be wondering where did I get this name from well if I open it up real quickly I have this linked in the written tutorial you'll see that I we have all these options down here so Matt icon theme menu theme radio theme and that's how you can specify just custom specific component based themes for angular material alright so hopefully you were able to learn quite a bit and sort of a crash course and you may have to run you may end up running in a few other issues if you get really in-depth into a big project and we're talking about customization but in terms of actually customizing the material theme itself that's pretty much all there is to it alright so if you enjoyed this make sure you subscribe here on YouTube I'm uploading videos left and right these days and also check out course cetera com see you later