React & Material UI #6: Themes - Making your own Theme

hey everyone in today's video we're gonna be looking at theming in material UI and react and how you can create your own custom theme in your react app using materialized seeing provider and make theme theme is a very important part of your application especially if you're using material UI a lot of the times you're gonna want to customize your application depending on whether you're building it for yourself or a client to match your colors typographies spacings breakpoints and all that other good stuff just a reminder if you like this video and you find value in it please consider giving it a thumbs up leaving a comment below or subscribing it really helps with the YouTube algorithm and it really helps get the channel out there to a lot more people now if we go to materialise default theme what you need to know is every time you use a basic Mattel UI components such as this button component whenever you don't override the theme and you give it a property something like color equals primary that primary or all these variants and all the text that will be inside the component is actually pulling from the materialize default theme so here is a page where we can look at the Mattel wide default theme and we can look at some of the values so let's go ahead and look at these categories the first category we have is breakpoints then we have mix-ins palette shadows typography spacing shape transitions and said index the specific ones we're gonna be looking at for today are breakpoints palette and typography if we open up break point you can see here that we have a couple of different breakpoints we have extra small small medium large extra large and if we look at the values object we can see that each one of these keys aligns to a certain number what this number is is essentially your screen size in width for when that screen is considered extra large large medium small or extra small for example if your screen is above XL if your screen is above a 1920 in with this screen is going to be considered extra large and when you use materialised breakpoints in your code and your screen is that size more specifically your browser is that size it will add whatever properties it needs to as if the screen was Excel if it is between 12 18 19 20 it is considered large if it's between nine and 60 and 1280 medium etc etc the smallest you could have is extra small which is a screen ranging from 0 to 600 now I haven't seen much use cases for anyone needing to change these default values for the breakpoints although a lot of big companies will have their own custom grid sizing and their own custom breakpoints and that's when you would want to change it and most of these breakpoints are usually used for things like grid if you're not familiar with how grid works and everything like that I will also have a video probably next week coming out on grid but that's what most of these breakpoints are used for you can use custom stylings for all your CSS within make styles and also if you use this thing which we are gonna touch on a bit later in the video called use theme you can also actually vary your JSX based on anything a part of your theme including breakpoints so the next thing is palette this is pretty much every single color that is in your application you can see here in this button I set the color to primary if I were to remove that you would see it would just be a default gray color but because I set it to primary it turns into this blue this bluish color now where is it getting that from well we can see here inside of palette we have a bunch of different colors and one of them is primary if we open primary we can see that the primary object has three different variations we have main light and dark and also this contrast text but really main light and dark are the main focus is whenever you set something to primary it's going to set it to whatever the main is this light and dark is for if you were to for example you can see the mattel UI site if I were to come over here whoops if I were to come over here I can toggle light and dark you'll see that when it's on dark mode it's actually going to pull from the dark default themes I accidentally moved everything over but you can see if I go back into palette everything will have four primary a light and a dark so a lot of applications if you wanted to create you know a little light and dark mode for your website I told you as basic themes already have all the colors for light and dark mode saved in and it's just a matter of passing in dark mode into your theme which we will also show in this video as well so the next thing we want to look at is typography so typography is where everything is being kept and we can see here that for example this button text the text for is is actually in Roboto the font family is Roboto and then it has some other fallback fonts like Helvetia and Arial and censor of the standard ones and you can see here if I were to go ahead and import typography and actually create a typography component and let's say if I were to set the variant to oh did I spell the right typography oh I imported it from the wrong card right so we can see here this is my typography if I were to set the variant equals to H 1 we'll see that it takes on all the styles that is in this H 1 object for our typography oops and that if you wanted to for example maybe the company you're working for has their own separate typography variants and I've been in that situation before you can either choose to go with the same naming h1 h2 h3 h4 h5 h6 or you can make your own typography variants and add the styles to them in your theme which I've done in my typography video last week so if you're interested in doing like that something like that just check out that typography video but that's the gist of it for the default theme so let's go ahead and see how we can actually make our own theme if we go to the theming page and Mottola Y you'll see here that pretty much whenever you want to pass a theme in you use a theme provider and theme providers are pretty basic providers in general are a pretty basic concept and react pretty much when you raps when you wrap your application around a provider what it does is it gives every single component that is nested within your application access to any variable that is sort of within that theme provider or within that provider itself so if you've ever used redux before you'll also see that it's used there as well so I'm just gonna go ahead and import theme provider wrap it around my app but you'll see here we need to pass in this variable called theme well this is where we can actually create our theme and overwrite some of the default themes so let's look for an example where they use the actual create theme and here it is so what they do is they call theme they say theme is equal to create movie theme and within that function they pass in a map and you'll see that this map that they're actually passing in is pretty much the same as whatever you want to overwrite it's pretty much the same as the way the actual default theme is structured so in this case they're overriding in within palette the primary and secondary colors and you can see palette is at the top level of the theme object and then so is a primary and secondary now something that's really interesting to note if we were to try doing something like this so let's go ahead and let's go ahead and import our theme or create our theme let's get rid of the status danger we don't want to overwrite that for now we can see here that when they override our palette our primary and secondary this purple and green is actually getting imported from materialized colors now let's see what happens let's just do primary for now if we try to set primary to a specific color that's not from one of material guys so let's just set primary I don't know to green in quotes like that we'll see here that we get a error that the main property is invalid and that is because when you add a color to your palette i'ma tell you why it has to have a main property sort of like how we saw in this in this palette example in the default object we can see here main was equal to this and the reason for this is because every time atoll UI material has a cost a couple of custom built in like I said light and dark and main themes and it needs a variance so right now we're not like sending the theme to dark or anything so it's looking for the main variant of this color and the reason you didn't need to add this in this example is because when you actually import the color green from until you eyes green what you don't see on the bat in the in the in the background is that this green is actually an object that contains a light or sorry a mane a light and a dark version of it so if we wanted to just add our own custom green we would have to make this another object and say main and then just put the green like that and you'll see that our button will now oh so it looks like it wants an actual hex life so let's just say cccccc which i believe is like some offshoot of gray yes so we can see here now primary is some offshoot of grey and I think if we wanted to make it you know ffffff obviously that color would be white and then obviously 0 0 0 0 is the hex value for black so we're pretty much just setting and I don't know if you notice but that was a really nice thing that happened as soon as we set the color of this button to black the text automatically changed to white which is just another really cool feature of materialized themes it sort of has this if nothing's been overwritten it sort of has this dynamic checking to make sure that each component is displayed correctly and things like having black on black for button and text doesn't happen so we've seen how we can override some of the some of the properties of the palette so let's go ahead and just import their green and purple from material UI colors just to make things a bit faster and simpler for us and we can go ahead and set primary equal to green and by the way what I see a lot of if you're working on an application that has a lot of different themes and let's say the theme that the user is choosing is based on a reducer value so for example like if there's a button up here or a setting or something within their profile I recommend just storing all of these themes in like a his fall or something it's a lot more clean but for this example we're just gonna go ahead and use it here so we can set the primer to green and secondary we can set that to purple and now if I come back in my button let's copy this button let's make another one it's up let's set the color to secondary and you'll see this button ends up being purple and just like the last time the text sort of changes to make it as visible as possible black on purple would not look too well and that's pretty much how you overwrite theme values we can also do the same thing for typography values and the breakpoints that we looked at before let's look at how we can use a theme now in our actual and our actual make styles over here so if you're not familiar with make styles I have a whole video on it and I touched on make styles in my last last week's video as well and how to use theme with it but essentially if you wanted to style things based on break points for example let's say when the screen is really small I want this button specifically to be black and when the screen is really big I want this cut of this button to be blue the background of it to be blue others ways to do that so the first thing we're going to do is let's create a style for our button specifically so we can call this like button style or just button it's up to you and in here we're going to be passing in a theme and the way we're going to do that is pretty much up here in the make Styles tag we can add theme here and then return another return pretty much another map and then in our actual so wherever we want to actually use the theme and in this case we're using it with the breakpoints we can do something like this so what this will do is when we have this in here it'll say whatever is within this object right here will be applied when the themes breakpoint is small or up and we can see here if we go back to the default theme object the themes whoops the theme object the the breakpoint for small and up is pretty much just 600 pixels wide and up so I can save background color is black when the screen is above 600 pixels and then when it is below it let's make the background color to blue and finally let's apply our style to our actual button so if we say button and lastname equals class's thought and then background color oh sorry but that's what we named it and if we were to save it you would see here now you would see here the background color when the screen is bigger than 600 pixels is black and if I were to move the screen smaller it is now smaller than 600 pixels it becomes blue the last thing that I think is really useful to know about theming is the use theme hook so let's go ahead and import it so we're gonna import it from Styles again and not from just slash core so the story behind the whole slash core and slash Styles thing is that my tell you I used to have used to import all these things from until you I - material - UI / styles and then when they did a huge overhaul on all these Styles components and hooks and everything like that they moved it all into slash core slash styles so a lot of times if you're getting any I've been in a situation where I've been importing all this stuff from just material I / styles and it's been giving me a lot of errors and stuff like that and that's because I was using the deprecated versions instead of /chorus / styles so just that's a really good check make sure you're importing anything related to style so make Styles use theme and then back here create Mui theme and theme provider from core / styles and not just styles but anyways what this use theme hook allows you to do is it allows you to actually get the theme object within your JSX which is useful for a couple of different reasons if we were to see here I'm pretty much using the hook and I'm gonna console about log it and if I look at the console we have pretty much the entire giant theme we have the entire giant theme object that we have created and a good thing to also note is notice how we still have all the default break points still have like default colors for pretty much everything other than what we over written and that's how create theme will work when you're in your index and you use the create movie theme it will only overwrite the things that you pass in from the t from the default that way you don't lose things like break points and stuff like that and spacing x' and other random small stuff that you might not want to overwrite so and yeah this is pretty much how you use use theme we can get anything we want from this theme object this might be if you're trying to specifically render an element based on like for example the break point that you're currently in and you don't want to do with grid or anything like that but that's pretty much the gist of it let's go ahead and remove all of the pallet overrides we did here and let's remove all of these imports and actually for pallet the last thing that I want to show you is how to change the type so if you remember I said that you could switch it to dark mode anything any time you want if you add dark to the pallet type you'll see that oh and let's get rid of our let's get rid of our stylings that we added to the button yeah so if we set pretty much the type to dark you'll see that we are now in dark theme and it you can't really see it right now but if I were to remove this root and I were to use a paper so if you're not familiar with the paper component I'll have a video of releasing pretty soon for that as well but paper is essentially just a background color but as you can see when the the theme is dark when the type is dark paper turns to black but when the theme is normal paper is just white and it has a little border around it and all the text inside of it is black so if you wanted to create an app of material UI application with scratch and you wanted your site to be in dark theme all all you have to do is overwrite the type of the palette to dark and everything will already be in a nice dark theme just like it is on the site that's all for the video once again if you liked it please consider subscribing leaving a comment below on what you'd like to see next what I can improve on and or liking the video really helps with the algorithm so I hope you guys have a good day hope everyone's staying safe and I'll see you guys in the next video

Channel: Anthony Sistilli

Views: 56,973

Rating: 4.9710746 out of 5

Keywords: material ui, material ui and react tutorial, material ui beginner, material ui code, material ui react, material ui tutorial, react material ui, material ui theme override, material ui theme, material ui theme provider, material ui theme tutorial, material ui theme example, material ui theme editor, material ui theme colors, material ui theme change, material ui theme customization, material ui react theme, material ui react theme example, react material ui theme tutorial

Id: Q4o0GmfNpJc

Length: 17min 54sec (1074 seconds)

Published: Sat Mar 28 2020