ChakraUI Dark Mode Toggle Button - Part 1

what's going on so in this video we're going to create a button that our users can click and then it'll switch them between the light mode and dark mode so i just ran create react app and i just ran this command to download chakra ui and chalk ui icons so let me just open up this application and let's start by getting rid of these files that we don't need so all of these files we don't need it and let me clean out this app.js like so and let me do the same thing over here okay so as you can see this is like a global style sheet here under the file index.css we want to move all of these global styles into a theme that tracker ui is going to handle for us so let's just create a file called theme.js and create a theme object and let's do export default extend theme and pass in our theme so in this file we can have a styles object with a global object and that's where we would put our global styles so let me just change this and put this over here real quick and i'll just show you how it's done all right so i just changed all the selectors to objects and all the properties i gave them the correct syntax to be inside of an object so now that we have that done we can create a config object right here and inside of this object we will configure our application to have dark mode so let's give this a property of initial color mode and set that to dark and let's give it a property use system color mode and set that to true basically this says that our application is going to be dark mode however if the user specifies in the browser settings or the operating system settings that they want to use light mode then we'll do that for them so now we can delete this css file and in our index.js just wrap our application in a chakra provider this basically lets trucker ui do all this all these things for us and let's pass it a theme prop of our theme that we created which we have to import and then here we want to render a component called color mode script and i have to import that okay and here we want to pass the prop called initial color mode and that will be theme dot config dot initial color mode so now when i refresh the application it has a dark mode background so let's go in our app.js and we want to render a button so let's create that button and let's create a components folder and in that folder let's create a component called toggle color mode.jsx all right so in here let's just we're going to want to call the use color mode hook from choco ui and it gives us back a color mode and a toggle color mode function here and this will be equal to use color mode and so in here we're going to want to render a button and the on click of this button is going to be a function that calls toggle color mode and inside of this button we want to do a conditional render and so if color mode is equal to dark if it's dark we want to render a sun icon and if it's light mode we want to render a moon icon and don't forget the question mark here okay so let's go in our app.js and just render out this component like so there it is and we want to give this us some styles so position of absolute top of zero right of zero and a margin of one ram and there it is so it works fine and maybe you want to change the color so maybe on the sun icon it can have a color of let's say orange 100 right or let's say orange 400 to make it a little more obvious and on the moon icon we can give it a color of blue 700 so like a dark blue that looks pretty good alright so in the next video what we're gonna do is start making our sign-in page and login page and we're gonna make it so there's two different pages one for creating an account and one for logging into your existing account

Channel: Lester Fernandez

Views: 11,388

Keywords: Lester Fernandez, lester, coding, programming, react, full, stack, code, web, javascript, end, chakraui, dark, mode, button, toggle, light, easy, 2021, 2022, react-router, react-router-dom, react router, pern, full-stack, front, development

Id: gCl78ZUGHg4

Length: 6min 8sec (368 seconds)

Published: Thu Dec 09 2021