Materialize Tutorial #5 - Colours

Key Takeaways

alright then so when we're working with materialise we have access to a huge color palette and we have different classes that we can use to apply these colors to either a background of an element or the text color of an element so I've got 2 color over here on the navigation and if we scroll down a little bit we're gonna see this huge palette of different colors right here and on each color we can see it has a few different classes so say for example this one here this has a class of indigo the hex code of that color is to the left of these classes so if we apply this class of indigo to an element it's going to make the background color of that element this indigo color right here now if we wanted to lighten that color we could add an additional lighting class to it by saying lighten - one on lighten - 2 - 3 - 4 all the way up to - 5 to make it lighter and also darken it as well / - 4 so dark and 1 2 3 & 4 so this is the way we apply these different classes these color classes to elements to get these different colors and as you can see there's absolutely loads of them so let's have a go now trying to use these different colors to apply colors to our elements over here the background and the text color so as you can see I've already got a container and these five different h5 tags right here and in each one there's an oscar wilde quote so what we're going to do is try playing around with the color a little bit of these different h5 to change the background and the text color so first of all this top one be yourself everyone else is already taken so say for example I want to make this have a blue background at the minute it just has a white background that's the default behavior but if I want a blue background I can just apply the blue class to it and that makes the background of this element blue cool so what if I want to darken this down well I can just add on the additional class darken - 1 or darken - etc and that is going to darken this blue now to make it a little bit darker maybe you can't notice the difference there but if I go too dark and 4 then you should notice the difference because it makes it quite a bit darker there we go but we can barely see this now so let's change it back to darken one and save that okay so next say we want an orange background so we'll give this a glass of orange for the next one and then let's make this lightest or say lighten - form so if I go over here now we can see the orange background but it's a really pale orange because we've given it that lighting plus as well all right so let's try changing the text as well as the background so first of all let's give this one the third one a purple background source a purple I also want to darken the background so I'll say darken - three then I want to give this white text because at the minute if we preview this then we can barely see the black text on it I want to make this white so how do we color the text of an element well all we do is use the color key word so white and then - text so if we wanted this to be purple text we'd say purple text or if we want it to be red then red text etc we want it to be white so we'll say white text and this makes the text white all right all right there so let's try it a couple more examples let's go down here and we'll say for this one we want it to have a background of teal we also want to darken - to that cool let's make it a bit darker we want something yellow text so we'll say yellow - text - right there and we also want to lighten the text because at the minute if we save and preview I think this yellow is a little too dark and want to lighten the text a little bit so how do we lighten the text we know how to lighten and darken the actual background but when it comes to text it's pretty similar all we do is we say text - lighten and then - whatever number we'll say 3 so text lighten 3 and if we save that we can see that this now is a bit lighter this yellow text awesome so let's try dark in the text as well for this one down here we'll give this a yellow background we'll say lighten - 3 - light in the background then we want purple text and what we'll do is just preview this for now we'll save it and preview it and we can see it there but I want to darken this text so I will say text - darken and - - to darken it twice so if we check this out we can see now this is a bit darker alright then so there we go there the different colors and the way we can use them again I'll leave this link down below so you can check out all of the different colors available to you and the different classes that we have to get those colors and by the way we can also apply these accents right here and that just gets as a slight variation of the color so for example pink accents here what accent 3 so there's tons of different colors to choose from but the takeaway points here are to remember to get a background color we say the class name of that color to get a text color we say the class name of the color followed by - text then we can use darken and lighten to light in the background and text darken and text lighten to lighten or darken the text