- 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