Angular Material Custom Theme Tutorial

00:00:02 welcome back to this angular material
00:00:04 introduction
00:00:04 series in the last videos we covered
00:00:08 some
00:00:08 core components and what angular
00:00:10 material is
00:00:11 now i want to take a look at how we can
00:00:13 actually adjust the look and feel of our
00:00:15 page
00:00:16 because if we have a look at our page as
00:00:18 we left it in the last video
00:00:20 this is what it looks like now besides
00:00:22 the fact that all the data here
00:00:24 is dummy data which we won't change i
00:00:26 want to change the general theme the
00:00:28 colors
00:00:29 of this page and that's exactly what
00:00:31 we'll dive into in this video
00:00:37 so how can we adjust the colors the
00:00:39 so-called theme
00:00:40 of an angular application well that
00:00:43 theme thing is actually very important
00:00:45 if we go back to our source code you
00:00:48 might remember
00:00:48 that we actually import something in our
00:00:52 angular json file in our project here
00:00:56 we actually added a link to a pre-built
00:00:59 theme and angular material works with
00:01:02 such
00:01:02 themes as you know or can guess by its
00:01:05 name
00:01:06 it uses the google material design and
00:01:08 that material design
00:01:10 thinks in primary and accent colors and
00:01:13 on our page
00:01:14 we would have that deep purple as our
00:01:17 primary color
00:01:18 now we don't really see the accent that
00:01:20 would be amber
00:01:21 there are some components which use that
00:01:23 accent color
00:01:24 and we can easily assign it to any
00:01:26 element we want
00:01:27 by setting the color property provided
00:01:30 that this element supports it
00:01:32 like for example if we wanted to add a
00:01:34 button
00:01:35 in our app component below the data
00:01:37 table we could add
00:01:40 a button with the matte button directive
00:01:43 click me
00:01:44 and if we set it like this what we get
00:01:46 is
00:01:47 a flat button which has this look now we
00:01:50 can
00:01:51 turn this into erase button so that we
00:01:53 see more color and we see that by
00:01:54 default
00:01:55 this button looks just like that now we
00:01:57 can set the color of the button because
00:01:59 it's one of the components which
00:02:01 supports that
00:02:02 with the color property we can set it to
00:02:04 primary to get that same purple
00:02:06 but we can also set it to accent to take
00:02:09 that accent color
00:02:10 and now it has this amber this yellow
00:02:13 like color
00:02:14 so that's what we use the theme for and
00:02:16 how we can
00:02:17 style things differently with the theme
00:02:19 and we can easily swap the colors we use
00:02:22 by using a different theme of course we
00:02:24 can go to the
00:02:25 angularjson file and we can replace deep
00:02:28 purple amber
00:02:29 with one of the other built-in themes
00:02:31 which you can find in the node modules
00:02:33 folder and there in the angular material
00:02:35 prebuilt themes folder
00:02:36 but the idea of this video of course is
00:02:38 to build our own theme
00:02:40 but for this we just need to keep in
00:02:41 mind that we have this primary accent
00:02:44 color thing
00:02:45 and actually there's a detailed guide on
00:02:47 the angle material page if you click on
00:02:49 guides
00:02:50 and they're on theming angular material
00:02:53 on this page you can learn how you can
00:02:55 also define a custom theme
00:02:57 and we'll exactly walk through these
00:02:59 steps because it's
00:03:01 actually really simple so what we need
00:03:03 to do is
00:03:04 we need to create a new file first of
00:03:06 all where we store our theme
00:03:08 and you can create that file anywhere
00:03:10 you want i'll place it next to the

00:03:12 styles css file
00:03:14 and i'll simply name it my dash theme
00:03:16 dot and now that's important as css
00:03:18 because we're going to use
00:03:19 sas we need to use sas as you will see
00:03:23 so i'm going to place that here and the
00:03:25 name of that file and that's important
00:03:27 it's really up to you you can name that
00:03:28 file whatever you want it doesn't have
00:03:30 to be named my theme
00:03:32 now we get this sas file and in case you
00:03:34 don't know
00:03:35 sas essentially is a superset to css
00:03:38 it's a language that takes css to the
00:03:41 next level
00:03:42 adds more features to simplify the
00:03:46 act of writing css code you could say
00:03:49 and it doesn't run in the browser it's
00:03:50 always compiled down to normal css
00:03:53 and the cli does this compilation for us
00:03:55 so we write in scss or
00:03:57 sas it's kind of the same here but we
00:04:00 get normal css code
00:04:01 just as with typescript and javascript i
00:04:03 guess
00:04:04 so we need to use sas because we need to
00:04:07 use some
00:04:08 functions some features provided by the
00:04:10 angular material package
00:04:12 that make it easy for us to create a new
00:04:14 theme
00:04:15 because in that new file we first of all
00:04:18 need to import something
00:04:20 and we can do this with add import that
00:04:22 is also available in normal css but it's
00:04:24 a bit more powerful in sas
00:04:26 and we need to import the angle material
00:04:29 theming package
00:04:30 so let's grab this line here and let's
00:04:32 move it into our my theme.scss file
00:04:35 what this does is it essentially unlocks
00:04:37 a couple of
00:04:38 tools helper functions and so on there
00:04:41 are functions in sas yes you heard that
00:04:43 correct
00:04:44 that we can use to create a new theme so
00:04:47 this is just
00:04:48 unlocking the toolbox now we need to use
00:04:51 something from that toolbox
00:04:52 and if we have a look at the official
00:04:54 guide what we do use
00:04:56 is this strange line now that's the
00:04:59 so-called mix-in
00:05:00 mix-ins are a sas feature and they allow
00:05:03 us to basically add
00:05:05 a block of code so you could say this
00:05:07 actually represents a block of css or
00:05:10 sas code which we simply add to this
00:05:12 file
00:05:13 with one line only so without repeating
00:05:15 the entire code
00:05:16 so we do that and what include math core
00:05:19 does
00:05:19 is it gives us a lot of base stylings
00:05:22 for the angular material package because
00:05:25 what we will do here in the end is
00:05:27 we will create a style sheet for the
00:05:29 angular material package
00:05:31 which uses the default base styles which
00:05:33 we don't want to change
00:05:35 but where we then also overwrite the
00:05:37 default colors
00:05:38 and set our own colors so that we then
00:05:41 use this
00:05:42 css file instead of a built in one to
00:05:44 style all the angular components
00:05:46 that's the idea so now we're unlocking
00:05:49 we're adding all the
00:05:50 base styles the core files styles of
00:05:54 angular material package and now the
00:05:56 interesting part comes
00:05:57 now we start overwriting the colors and
00:06:00 for that we first of all define
00:06:02 some variables this simply is just what
00:06:05 it is in javascript too
00:06:07 it's a reusable part or snippet of css
00:06:10 code
00:06:11 we create a variable in sas with the
00:06:13 dollar sign at the beginning
00:06:14 and then any name you want and i'll name
00:06:16 it my
00:06:18 theme dash primary because this should
00:06:20 hold the primary
00:06:22 palette for this theme and i said
00:06:25 palette and not color because actually
00:06:27 material design
00:06:29 things in palettes of color different
00:06:31 shades of the colors
00:06:32 so we define one color and it then
00:06:34 generates different shades

00:06:36 or we even define different shades
00:06:38 shades that's also possible
00:06:40 we do this with a function which is
00:06:42 unlocked by importing material theming
00:06:45 the matte palette function so let's use
00:06:48 that function
00:06:49 the question is what do we pass to that
00:06:51 function
00:06:52 it has to be a color material design
00:06:55 understands
00:06:56 and as you can see here in the example
00:06:58 they use a variable which wasn't defined
00:07:01 by us
00:07:02 matte indigo now how do you know
00:07:05 which color that is well for one you can
00:07:08 google for google material and you will
00:07:11 find color palettes there
00:07:12 and you should find the names indigo
00:07:14 pink and so on there too
00:07:16 but you can also go into the node
00:07:18 modules folder
00:07:20 at angular material and there
00:07:23 have a look at that theming scss file
00:07:26 that's also what we're importing here by
00:07:27 the way
00:07:28 the underscore is omitted by sas and in
00:07:31 that file you find a bunch of predefined
00:07:33 functions mixins and variables if you
00:07:36 scroll down
00:07:37 for example if you search for indigo you
00:07:39 will find this matte indigo thing and
00:07:41 you see it's actually a color map
00:07:43 because as i said material design things
00:07:46 in palettes
00:07:46 we get different shades so to say
00:07:49 different variations of that indigo
00:07:51 color
00:07:51 and thanks to my ide and that actually
00:07:53 is a feature most ideas have
00:07:55 you see a preview of that color too and
00:07:58 now you can really just look at the
00:07:59 colors there and pick your favorite
00:08:01 color
00:08:01 or use such a material design tool i
00:08:04 mentioned
00:08:05 so let's go back to my theme and now
00:08:07 pick any color you want
00:08:09 important it starts with matte dash
00:08:12 as you can see here and then the name
00:08:16 so for example we could stick to
00:08:19 the example given here and take that
00:08:22 indigo
00:08:23 color now important the matte palette
00:08:26 function takes more than one argument
00:08:27 you can just pass one an angular
00:08:29 material will infer
00:08:31 the rest the other shades too but you
00:08:33 can't pass more than one
00:08:35 you can to be precise specify a default
00:08:38 a lighter
00:08:39 and a darker variant or a u of that
00:08:42 color here as it is the case in the
00:08:44 second example we can actually copy that
00:08:46 line
00:08:47 and put it here and i'll change that
00:08:50 name to
00:08:50 my theme accent because this will define
00:08:53 the accent color
00:08:54 and i'll stick to the pink color and i
00:08:57 will actually also stick to the use
00:08:58 but this is simply defining different
00:09:01 use
00:09:02 shades for that color and angle material
00:09:05 uses this
00:09:06 these different use four different parts
00:09:08 of their of the components
00:09:10 like for example if you hover over
00:09:12 something it might take a brighter
00:09:14 uh color or variation of that color
00:09:18 so now we get the primary in the accent
00:09:19 color there is a first color we can we
00:09:21 don't have to we can define
00:09:23 and that's the warning color here so
00:09:26 let's actually do that too
00:09:27 let's define this variable too i'll name
00:09:30 it my theme
00:09:31 worn and i'll stick to the red you can
00:09:33 of course use any color you want here
00:09:35 and you can omit it and it will then use
00:09:37 some red color
00:09:38 as a default as you can see here so now
00:09:41 we get
00:09:41 all these variables defined but this
00:09:43 alone doesn't do anything
00:09:45 we have to inject them into that score
00:09:48 set of styles we imported where we
00:09:51 included with that matte core
00:09:53 mix in here and we do that by using that
00:09:56 matte light theme function here there we
00:09:59 pass the colors as a variable and we

00:10:01 store it in a new variable
00:10:03 so i'll create a new variable which i'll
00:10:05 name my theme
00:10:06 and use that matte light theme
00:10:09 function it's called light theme because
00:10:12 actually you could create a dark and a
00:10:14 light theme
00:10:14 that changes the background color used
00:10:17 for the page and so on
00:10:18 i'll stick to the light theme and now we
00:10:20 pass our three colors there
00:10:22 first the primary color then the accent
00:10:26 color
00:10:26 and last but not least and this is
00:10:28 optional as i said
00:10:29 the worn color and now we define a theme
00:10:32 we're still not using it though the
00:10:34 using it part
00:10:36 comes when we include this last mix-in
00:10:38 where we pass
00:10:39 our theme as an argument this will now
00:10:43 kind of inject it or merge it with the
00:10:46 default styles angle material gives us
00:10:48 and overwrite the colors there so there
00:10:51 we take the my theme variables
00:10:53 since this is the name i chose here and
00:10:55 now this will actually
00:10:57 style all the components correctly and
00:10:59 with that
00:11:00 we are done we can now save that file
00:11:03 and now we just have to include it in
00:11:05 our application
00:11:06 and we do that by going to that angular
00:11:08 json file again
00:11:09 and now we overwrite that style here
00:11:12 where we refer to
00:11:13 a pre-built theme and instead we refer
00:11:16 to our
00:11:17 own theme here so we can simply import
00:11:20 source
00:11:21 my theme as css here
00:11:24 and if we now save this and restart
00:11:27 ng-surf because we changed something in
00:11:29 the angular cli configuration
00:11:31 we should actually get an application an
00:11:34 angular application which uses different
00:11:36 colors
00:11:36 which uses our own colors so let's go
00:11:39 back to our page
00:11:42 and let's wait for it to reload and
00:11:45 there we are
00:11:46 now indigo is close to the color we had
00:11:48 before we had purple but this is now
00:11:50 more bluish
00:11:51 and we can clearly see it on the button
00:11:53 in case you can't see it
00:11:54 you can now simply change the color by
00:11:57 going to the color you want to change
00:11:59 like here and picking a different color
00:12:01 like green
00:12:02 and now you see it's green and this
00:12:04 would affect any component
00:12:06 on your page any angular material
00:12:08 component on your page
00:12:10 that uses some color and this is how you
00:12:13 can adjust the theme to your needs
00:12:15 as you see it's well documented and
00:12:17 really just a couple of steps which you
00:12:19 have to understand
00:12:20 and then you got all the flexibility you
00:12:22 need to really fine-tune your
00:12:25 angular material project to your needs

You may also like