React JS Tutorial | Dark Mode Toggle Using Styled Components

hey guys so today I'm gonna be showing you how to create a dark mode toggle using the style components for your react web app as you can see when you toggle the switch here the background text and components change colors these colors are all defined in one place and it's really easy to reuse and even add more themes in the future the toggle switch here I actually created in a previous video which is linked in the description below if you're interested please check that out now let's get started the first thing you need to do is create a new project if you already have an existing project and have style components installed near you just skip forward a few seconds whilst we set up I'm going to start by using create react app because this is really easy to setup and I have a tutorial later on for anyone who's interested in how this works now to use it first command me to run is MPX great ok app and then the name of your app in this case I'm going to use dark mode toggle this normally takes a few seconds to set up and install the packages once it's done we need to enter into the project using CD the project name so in this case CD dark mode toggle now we're inside the project we need to install the style components package you can install this from NPM or yarn and it's pretty simple just type NPM install styled - components once again you'll have to wait a few seconds whilst the package installs next let's run the project and open vs code you could do this with NPM run start now the projects running I'm going to start by glean on a boilerplate code that comes with create react that I'm going to delete this header right here and I'm gonna remove this logo draw SVG and I'm going to delete the logo SVG file we aren't gonna need that to start coding the themes create a new file in a source directory called theme CAS this file will contain all of the theme data of styles and colors so let's start by making two themes the constant light theme equals and we're gonna say the body color of light theme is going to be white and then the font color is going to be black we're also going to create a dark theme so we're going to say can't start theme equals you're going to say the body color of the dark theme is gonna be black and in the font color is gonna be white so the opposite of the light theme now back an outdoor J s we need to create some state for the component to track which theme we're currently on I'm gonna be using new states at the top next to react we're going to import you state then inside of the functional app component we're gonna say Const theme and set theme equals use state light we're gonna need some way of toggling between light and dark so I'm gonna create a theme toggle up which is going to be a function where it says if the theme is current equal to life then set theme equals the dock else set theme equal to life so we can call this the in table function from anywhere and then it will toggle between this light state and this dark state right here now we need to import a theme provider from style components so at the top we're gonna say import theme provider wrong style components now this teen component here we're going to wrap the div down the bottom so let me copy and paste that and now you can see that the theme provider wraps the if which is the main app component under theme provider we need to provide a theme so we're going to stay theme equals and then we're gonna say if the theme is equal to light then we're gonna do something else we're gonna do something else now to do these else on this if here we have to need to import the themes for my themes or JFS so we're gonna say import light theme dark theme from themes ojs now we can say when the theme equals light make the theme here equal the light theme and whether it's not equal to like we can make equal to dark we need to change this for light if you get this error on the right saying theme properties required you need to go into your themes j/s and we do for these now back in the apt OJS everything should be working I'm going to swap out this div for a style components up here I'm going to say Const styled at equals style div and then we also need to import star from style components and I'm gonna replace this div here with the starred app if we add in a test like hello world we should see on the screen here we go you may want to start elements not inside this component and the way you can do that is if you go into themes KS you can export another console global styles equals poor create global style from style components and we're gonna say global stars down here is equal to Craig global style and then we can use some CSS in here so you can say body background color is equal to and then we're going to pass through some props so we can have props here props and the way you access our theme props is by saying provost our theme and then you can pick one of these so body next we need to add inside of apt at Jas we need to import the global stars that we just created and then below the theme provider we need to create that component there now if we change you stay here to be dark you'll see that the background color changes to black I'm gonna set that back to light and I'm gonna add in a button inside of here which is gonna say unclick and we're gonna theme toggle just create an anonymous function there like so and maybe we'll get a B button some text so change theme button now in every clip change theme we're gonna swap between light and dark once again you can access these theme styles by going into the star component itself for example and we could change a color of the font so you could say color and then we're going to open up this and say props props theme and then we named our variable font color you can close that up now when we click Change theme we'll see that the font color changes also you can add as many things as you want and all you need is different logic on the theme toggle between allow you to have more than three themes if you enjoyed the tutorial please like the video subscribe and comment below thanks for watching

Channel: Will Code For Views

Views: 54,387

Keywords: programming, coding, react, reactjs, beginner, webdevelopment, web development, react tutorial, toggle switch, javascript, js, python, development

Id: G00V4tRx1ME

Length: 7min 47sec (467 seconds)

Published: Mon Jul 06 2020