React Dark Mode Toggle/Theme - Complete Guide

if you're a developer the only thing you hate more than JavaScript is using anything in light mode in this beginner friendly tutorial you'll learn how to add a dark mode to your react project along the way you'll also learn how to add cool transitions using CSS how to use local storage to save the user's preferences and how to easily read the user system preferences from their machine to automatically decide the theme so if you're done smashing the Subscribe button let's get started we'll create a project using npm Create wheat at latest after choosing react and JavaScript and running npm install we'll install another dependency called use local storage which we'll use to store and get data from local storage later on we'll run npm run Dev and now we have a project running on localhost once we have a project running locally we'll do some cleanup by firstly deleting the assets folder in app.css we'll remove all the current styling we'll do the same in index.css in app.jsx we'll remove everything and use rafc to create a simple functional component and then so that it gets imported properly we'll go into main.jsx and wrap curly braces around the app import to add some basic styling to every element in our page we'll use the asterisk operator and we'll set a margin of zero padding of 0 for every element we'll say that box sizing should be border box which means every element's border size should be included in their width and height calculations and finally we'll say that the font family should be aerial helvetica or Sans serif as a default in app.jsx we'll import the app.css file in app.css we'll Target this new class by writing dot app we'll give it a width of a hundred percent of the page the height will be a hundred percent of the viewport height we'll have a display of flex and the flex direction will be column we'll justify content to the center and we'll also align items to the center of the page and lastly we'll set a background color of white the content of our page will be pretty simple we'll remove the app and instead add an H1 with the class name of title and a text of hello world below that we'll have another div with a class name of box and inside that we'll have an H2 which just says this is a box now we need to talk about CSS variables CSS allows us to create variables using this syntax and then instead of using this value everywhere in our app we can just use this variable and whenever we want to change it we can just change the value of the variable and the entire website will get updated we'll be using this because whenever we switch from light mode to dark mode all we need to do is update the value inside this variable and our entire website will get updated we'll go into index.css and we'll say colon root and we'll Define our variables inside this this is so that the variables are available for every element in the page we'll firstly set a background color of white a foreground color of blue a primary text color of black we'll be creating a toggle which will have a background of light yellow and the foreground of our toggle will be a dark yellow now to use the variables all we need to do is use the VAR function provided to us by CSS and passing whichever variable Bond and if we save that we see that the background color variable is now being used so now that we've defined some variables we'll add some styling to our page so firstly we will Target the title we'll give it a color of primary text color and we'll give it a margin on the bottom of 50 pixels for the Box div we'll give it a padding of 20 pixels about a radius of 10 pixels a background color which will be equal to the foreground color which we've defined and then a color of secondary text color and we can see that the variables which we defined are working another important concept you need to know about is custom HTML properties so we know that HTML provides us with common properties in every element such as ID class and style but we can Define our own properties called Data attributes which follow this format and then CSS can fetch the value of this property and decide which styles to apply so back in app.jsx we'll go to our Dev element and we'll set a data Dash theme property and set it equal to dark and now in index.css we can Target it by using square brackets and then saying data Dash theme is equal to dark and the properties inside this will only apply to an element which has the data Dash theme value equal to dark so over here we'll Define alternate versions of our variables so we'll set the background color equal to Black we'll set the foreground color equal to a light blue the primary text color will be white the secondary text color will be black for the background of our toggle we'll set it to dark blue and the foreground of our toggle will be a light blue and when we save that we see that our web page is in the dark mode and it's using the new variables if we go into app.jsx and remove this value everything goes into light mode again using the previous variables now instead of hard coding the data Dash theme attribute we need it to be programmatic so we can change it from a toggle so to do that we'll import use state from react we'll create an is dark variable using U State and set the initial value to false and for the data Dash theme property instead of just setting it to dark we'll use a ternary operator on the is dot property and if it's true we'll set it to dark otherwise we'll set it a light now all we need to do is update the initial value to true and we're able to change the dark mode to create the toggle component which will be used to update this value we'll create a new folder called components and inside that we'll create a file called toggle.jsx and toggle.css in toggle.jsx we'll firstly import the CSS then we'll create a functional component called toggle which takes in a handle change function and an is checked value we'll return a div with the class name of toggle Dash container inside that we'll have an input which will have a type of checkbox and ID of check a class name of toggle for the on change we'll use the handle change function pass to us and then the checked value will be is equal to the is checked property passed to us and then we'll have a label say in dark mode and we'll tell HTML that it's for an input with the property of ID is equal to check using the html4 attribute this enables us to trigger the input even when the label is getting clicked now in app.jsx we'll import this toggle component and we'll put it on top of our H1 for the is checked prop we'll pass in the is dark stateful variable and for the handle change property we'll pass in an arrow function which basically takes in the current value of sdark and calls set is dark to make it the opposite value and now we can click on the checkbox to toggle the theme for the CSS we'll start with the div which contains our toggle and we'll position it absolutely we'll set it to have a 2 em space from the top of the page and a 2em space from the right of the page and now that we're able to render the toggle we want to set it to visibility hidden that might seem counter-intuitive but we don't want to render a checkbox at all we'll be using CSS sudo selectors to render out the toggle that we usually see we'll use the plus selector to Target the label directly after our DOT toggle input and we'll set it to be a flexbox this is because we'll be using the before and after pseudo selectors which basically add a fake element inside whichever l element that used on and then we'll use the flexbox to align them and create the toggle that we want we'll align items to the center of this Flex box we'll give our label a font size of 1.5 em we'll make it a cursor of pointer whenever we hover over our label and we'll give it a color of whatever our primary text color is next we'll use the before pseudo selector to add an element inside our label we'll set the content to be nothing because we do want to render it out but we don't want anything to be inside it we'll set the height to be 1 em and the width to be 2 em we'll set a border radius of 1 am and a background color to the toggle Dash BG which we had set and then we'll add a margin to its right and that creates the background of our toggle similarly we'll be using the after pseudo selector to create the circle inside the toggle we'll again set the content to be nothing we'll set a height of 0.8 em and the width as well and we'll set the Border radius to be 1 em we'll set its background color to be toggle Dash FG and we'll position it absolutely with respect to its parent so it goes all the way to the left and we'll say it should have a space of 0.2 em from the left of its parent we'll now use the checked sudo selector on our toggle and then Target the switch which we just made and we'll set the transform to translate x a hundred percent which means that whenever a toggle is checked the circle inside the toggle should move on the x-axis by a hundred percent and now when we click on the toggle we see that it moves to the right and switching it off moves to the left again now it's a bit jarring right now so let's add some transitions we can add transitions to any element by adding a transition property this has three properties firstly it's whichever field we want the transition to B for secondly is how long we want the transition to take and thirdly is how smooth we want the transition to be so in this case we'll Target the background color the transition will take 0.25 seconds and we'll use the ease and out gradient for our transition for the circle inside our toggle we'll do something similar with the background color and if you want to add another transition to the list all we need to do is add a comma and then repeat so in this case we also want to add a transition to the transform property which basically decides the x-axis position of the circle we'll do the same thing in our app diff with the background color and now when we click on the switch we see that it has a nice transition between the two stages now we can change the theme to dark mode but if we click on refresh or go to any other page it resets it back to light mode which is a bit annoying so to fix this we can use local storage local storage allows the browser to keep track of certain values for a particular website even across different pages or different sessions in our case we'll just store the is dark value so we'll go into app.jsx and import the use local storage dependency which we downloaded instead of using use State false we'll say use local storage and then the first field is the key which we want to keep a track of and the second value is the default value to use if the key isn't already present in the local storage now we can see that if we change the value and even if we click on refresh the value persists and to see that the value is actually being set you can open the developer tools go to the application tab and then inside local storage for the Local Host we can see that the is dark value is equal to true and when we update our toggle it gets set to false again another ux Improvement we can make is using system preferences most operating systems now let you choose if you want to use a dark mode and we can access the user's preference from their machine using the prefers color scheme media query so in our app.jsx component we'll create a constant called preference and then on the global window variable provided to us by JavaScript we'll call the match media function and this will check if the media query of prefers color scheme is equal to dark and the dot matches will convert this into a true or false value and all we need to do is inside a used local storage we can set the default value to be equal to preference and then to simulate the system settings we can say Ctrl shift p type in show rendering and in the new tab that shows up go down until you see this field and then instead of no emulation set it to dark and if you click on refresh you see that it automatically uses the Dark theme because that's what the system preferences are if we delete the local storage again and set the preference to light and if we refresh it's using the light mode so that's about it for implementing dark mode in react it would be great if you could like share and subscribe and let me know down below what tutorial I should do next thanks for watching

Channel: Code Complete

Views: 12,973

Keywords:

Id: sy-rRtT84CQ

Length: 12min 29sec (749 seconds)

Published: Fri Sep 15 2023