Hey all, in this last Chakra UI tutorial we’ll look at how we can customize the default theme values (things like fonts, sizes, colours, etc).
⭐⭐ Watch the whole course now (without ads) on Net Ninja Pro:
https://netninja.dev/p/chakra-ui-crash-course
?? Access the course files on GitHub:
Course files –
?? React Tutorial:
On Net Ninja Pro –
On YouTube –
?? React Router in Depth Tutorial:
On Net Ninja Pro –
On YouTube –
?? CSS Flexbox Tutorial:
On YouTube –
?? CSS Grid Tutorial:
On Net Ninja Pro –
On YouTube –
?? Chakra docs –
?? VS Code –
All right then Gangnam Style we're Reaching the end of the series hurray But there is one more thing I wanted to Show you and that is how to extend the Default chakra UI theme so at the very Start of this series if you remember I Mentioned that one of the drawbacks of Using a component Library like chakra UI Is that your website start to feel very Very same and generic because they all Use the same pre-styled components and All those components use what's known as A default theme inside chakra and that Default theme dictates the color palette Available to us the font size is the Font faces the breakpoints spacing Border radius Etc now you can check out all the Default theme values on the chakra Documentation by going to style props First then scrolling down here to Theming and choose default theme and on This page is a huge list of the default Theme values which chakra uses then to Style the different components now the Good news is is that we can easily Extend or change this default theme and I'm going to quickly show you how to get Started doing that in this lesson so We're not going to change everything but We will add some themed colors and we'll Also change the default font families so If you scroll to the typography section You're going to see how chakra
Structures the font property so we can Just use this structure to update the Body and the heading fonts in our Website for example and then if you also Scroll up to all the colors section past All the colors you can see that we can Also use the colors property name to Either change the values of the colors Or add our own and we can also add some Different strengths to each color as Well so let's give this a whirl so the Way we do this then is by first of all Coming to the main.jsx file and then up Here from Chakra UI import a function Called extend Theme and this function allows us to Extend different properties inside that Theme so what I'm going to do is down Here create a constant chord theme and Set it equal to that function extend Theme and invoke it like so and all we Do is pass through the different Properties in here that we want to Extend so that could be the colors it Could be the fonts or whatever So once we have that then we would pass That theme into the chakra provider so I Could come up here and say the theme is Equal to then Theme like so this thing okay So let's structure the things that we Want to extend so let me do a comment to Say extend the theme first of all and Then I want to extend the colors so I'll
Say const Colors is equal to an object remember That's what the colors property was if We go back over here we can see colors And it's an object right so we can Either change the values that already Exist or we can make our own I want to Make our own so I could say well I want A brand color so then we would set the Background color to be brand not blue or Anything like that and also we could Have different strengths so that could Be a colon and then that's an object and We could specify different strengths in Here now what I'm going to do is just Paste these in because they're just a Bunch of numbers and different hex codes I've not gone all the way down to 100 I've just done the upper half so we have 900 to 500 and they're just different Shades of blue that could be our brand Color and we could use that now in our Theme so I could then just pass in here An object and pass through the colors Property And that would update the color palette To include this new set of brand colors And now if I go back to the sidebar for Example in fact it's not the sidebar It's the root layout for the sidebar we Have this background right here I could Change that now to Brand dot 400 for Example and that would grab me not 400 It needs to be something higher than 500
Or 500 I'll do 600 that would grab me This color right here a bluish color so Let's save that and preview let's go Over here and now we can see it's this Blue color so that's pretty cool right We can add our own brand colors Now I also want to maybe change the Fonts so let's say const fonts is equal To an object let's go back to the docs And let's see how they structured the Fonts if we scroll down here We can see we have the fonts property Which is what we want to update and we Have a body font and a heading font so Let's update both of those so inside Fonts let's say the body is Tahoma And let's say for the heading let's Change it pretty drastically so heading Is going to be Courier New Like so now we also have to pass in the Fonts property So let's do that fonts and save it and Now if we take a look at this We can see we get the curry new font up Here and this now is auto Homer it Doesn't look great I just wanted to show You how we can either a new values to The theme and also change the current Values now like I said I'm not going to Do it with many of them I just wanted to Show you how we can use this function Extend theme to either extend or update The default theme and that makes it a
Lot more personal your website then you Can customize it to your heart's content And when it comes to extending the theme It's definitely worth checking out the Docs because it shows you everything That you can update like font sizes font Weights line Heights break points Spacing loads and loads of stuff that You can update so my friends I really Really hope you enjoyed this series and You learned something along the way if You did please please please don't Forget to share subscribe and like that Really means a lot and if you want to Access all of my YouTube courses without Adverts also get access to premium Courses and Early Access courses as well You can do at net Ninja dot Dev you can Sign up for netninja pro which is just Nine dollars a month and also half price For the first month with this promo code Right here and for that like I said you Get access to every course without Adverts without YouTube adverts you also Get access to exclusive courses not Found anywhere else you get access to my Premium courses on udemy and also Early Access to all of my YouTube courses as Well so the link to this page to sign up Is going to be down below again I really Hope you enjoyed this series and I'm Gonna see you in the very next one Foreign
