Angular Material Custom Theme Tutorial

welcome back to this angular material introduction series in the last videos we covered some core components and what angular material is now i want to take a look at how we can actually adjust the look and feel of our page because if we have a look at our page as we left it in the last video this is what it looks like now besides the fact that all the data here is dummy data which we won't change i want to change the general theme the colors of this page and that's exactly what we'll dive into in this video so how can we adjust the colors the so-called theme of an angular application well that theme thing is actually very important if we go back to our source code you might remember that we actually import something in our angular json file in our project here we actually added a link to a pre-built theme and angular material works with such themes as you know or can guess by its name it uses the google material design and that material design thinks in primary and accent colors and on our page we would have that deep purple as our primary color now we don't really see the accent that would be amber there are some components which use that accent color and we can easily assign it to any element we want by setting the color property provided that this element supports it like for example if we wanted to add a button in our app component below the data table we could add a button with the matte button directive click me and if we set it like this what we get is a flat button which has this look now we can turn this into erase button so that we see more color and we see that by default this button looks just like that now we can set the color of the button because it's one of the components which supports that with the color property we can set it to primary to get that same purple but we can also set it to accent to take that accent color and now it has this amber this yellow like color so that's what we use the theme for and how we can style things differently with the theme and we can easily swap the colors we use by using a different theme of course we can go to the angularjson file and we can replace deep purple amber with one of the other built-in themes which you can find in the node modules folder and there in the angular material prebuilt themes folder but the idea of this video of course is to build our own theme but for this we just need to keep in mind that we have this primary accent color thing and actually there's a detailed guide on the angle material page if you click on guides and they're on theming angular material on this page you can learn how you can also define a custom theme and we'll exactly walk through these steps because it's actually really simple so what we need to do is we need to create a new file first of all where we store our theme and you can create that file anywhere you want i'll place it next to the styles css file and i'll simply name it my dash theme dot and now that's important as css because we're going to use sas we need to use sas as you will see so i'm going to place that here and the name of that file and that's important it's really up to you you can name that file whatever you want it doesn't have to be named my theme now we get this sas file and in case you don't know sas essentially is a superset to css it's a language that takes css to the next level adds more features to simplify the act of writing css code you could say and it doesn't run in the browser it's always compiled down to normal css and the cli does this compilation for us so we write in scss or sas it's kind of the same here but we get normal css code just as with typescript and javascript i guess so we need to use sas because we need to use some functions some features provided by the angular material package that make it easy for us to create a new theme because in that new file we first of all need to import something and we can do this with add import that is also available in normal css but it's a bit more powerful in sas and we need to import the angle material theming package so let's grab this line here and let's move it into our my theme.scss file what this does is it essentially unlocks a couple of tools helper functions and so on there are functions in sas yes you heard that correct that we can use to create a new theme so this is just unlocking the toolbox now we need to use something from that toolbox and if we have a look at the official guide what we do use is this strange line now that's the so-called mix-in mix-ins are a sas feature and they allow us to basically add a block of code so you could say this actually represents a block of css or sas code which we simply add to this file with one line only so without repeating the entire code so we do that and what include math core does is it gives us a lot of base stylings for the angular material package because what we will do here in the end is we will create a style sheet for the angular material package which uses the default base styles which we don't want to change but where we then also overwrite the default colors and set our own colors so that we then use this css file instead of a built in one to style all the angular components that's the idea so now we're unlocking we're adding all the base styles the core files styles of angular material package and now the interesting part comes now we start overwriting the colors and for that we first of all define some variables this simply is just what it is in javascript too it's a reusable part or snippet of css code we create a variable in sas with the dollar sign at the beginning and then any name you want and i'll name it my theme dash primary because this should hold the primary palette for this theme and i said palette and not color because actually material design things in palettes of color different shades of the colors so we define one color and it then generates different shades or we even define different shades shades that's also possible we do this with a function which is unlocked by importing material theming the matte palette function so let's use that function the question is what do we pass to that function it has to be a color material design understands and as you can see here in the example they use a variable which wasn't defined by us matte indigo now how do you know which color that is well for one you can google for google material and you will find color palettes there and you should find the names indigo pink and so on there too but you can also go into the node modules folder at angular material and there have a look at that theming scss file that's also what we're importing here by the way the underscore is omitted by sas and in that file you find a bunch of predefined functions mixins and variables if you scroll down for example if you search for indigo you will find this matte indigo thing and you see it's actually a color map because as i said material design things in palettes we get different shades so to say different variations of that indigo color and thanks to my ide and that actually is a feature most ideas have you see a preview of that color too and now you can really just look at the colors there and pick your favorite color or use such a material design tool i mentioned so let's go back to my theme and now pick any color you want important it starts with matte dash as you can see here and then the name so for example we could stick to the example given here and take that indigo color now important the matte palette function takes more than one argument you can just pass one an angular material will infer the rest the other shades too but you can't pass more than one you can to be precise specify a default a lighter and a darker variant or a u of that color here as it is the case in the second example we can actually copy that line and put it here and i'll change that name to my theme accent because this will define the accent color and i'll stick to the pink color and i will actually also stick to the use but this is simply defining different use shades for that color and angle material uses this these different use four different parts of their of the components like for example if you hover over something it might take a brighter uh color or variation of that color so now we get the primary in the accent color there is a first color we can we don't have to we can define and that's the warning color here so let's actually do that too let's define this variable too i'll name it my theme worn and i'll stick to the red you can of course use any color you want here and you can omit it and it will then use some red color as a default as you can see here so now we get all these variables defined but this alone doesn't do anything we have to inject them into that score set of styles we imported where we included with that matte core mix in here and we do that by using that matte light theme function here there we pass the colors as a variable and we store it in a new variable so i'll create a new variable which i'll name my theme and use that matte light theme function it's called light theme because actually you could create a dark and a light theme that changes the background color used for the page and so on i'll stick to the light theme and now we pass our three colors there first the primary color then the accent color and last but not least and this is optional as i said the worn color and now we define a theme we're still not using it though the using it part comes when we include this last mix-in where we pass our theme as an argument this will now kind of inject it or merge it with the default styles angle material gives us and overwrite the colors there so there we take the my theme variables since this is the name i chose here and now this will actually style all the components correctly and with that we are done we can now save that file and now we just have to include it in our application and we do that by going to that angular json file again and now we overwrite that style here where we refer to a pre-built theme and instead we refer to our own theme here so we can simply import source my theme as css here and if we now save this and restart ng-surf because we changed something in the angular cli configuration we should actually get an application an angular application which uses different colors which uses our own colors so let's go back to our page and let's wait for it to reload and there we are now indigo is close to the color we had before we had purple but this is now more bluish and we can clearly see it on the button in case you can't see it you can now simply change the color by going to the color you want to change like here and picking a different color like green and now you see it's green and this would affect any component on your page any angular material component on your page that uses some color and this is how you can adjust the theme to your needs as you see it's well documented and really just a couple of steps which you have to understand and then you got all the flexibility you need to really fine-tune your angular material project to your needs

Channel: Academind

Views: 97,092

Rating: 4.9230771 out of 5

Keywords: angular, angular material, custom theme, angular 2, tutorial, material design, theming

Id: EBnTZwr0RSs

Length: 12min 30sec (750 seconds)

Published: Mon May 21 2018