Dark Mode JavaScript toggle using localStorage

in last week's video I looked at how to do a dark mode using a media query to follow system preferences in this video we're gonna be doing a little button to go back and forth but the cool thing with this is even if the person visits a day later a week later a month later it will remember the setting they used we're using local storage for this one and making a little button here that we can toggle back and forth let's jump right into it alright so let's get started here and just to take a really quick look at what I've done I have this button that I have right here with them that click here that it's going to become our toggle right now it is not doing anything if we come and take a quick look at it I have my button set up right here so there's the button it is with an SVG I have the class of dark mode toggle on it an ID of dark mode toggle I've also got an area label on here toggle dark mode because well there's nothing indicating really what that button should do we don't have a label on it or any text that's inside this button so it is not too clear so because of that I have put my area label on there and one thing I have done here is on the SVG itself I have put the fill as current color which we can see right in there and this one's really simple just the outside of that icon so this is going to match the text color if you don't want it to do that the text here click here I didn't want to bring another font in so I just did that as an SVG that you know it's a font that I outlined and turned into an SVG that one has the VAR foreground as its fill so if I change my CSS custom property here of a foreground it's going to switch or if I just change my text color or my whole page it will also it would also switch so right now my current color is my foreground so they're both the same but I just wanted to show you two different ways that we could set the color on and to switch around they are both fantastic the real focus of this is going to be the JavaScript though and not the CSS side of things but just really fast what I have done I have all my colors set here in the root on custom properties as well as my fonts that are down here and what we've done is very similar to when I did it with the system preferences I've set them all up there but the difference is instead of using a media query to switch them I've have a class here that is going to switch them all when we turn that class of dark mode on on our body so let's see how we can do this what the very first thing we have to do is create a javascript file so let's just come into here and I'm going to add we'll call it dark mode J s and the very first thing we'll do is come into my index file here just come all the way to the bottom this is all just the SVG stuff right down here we'll add in a script and SRC will be equal to dark mode J s just like that so we can come in now and open up that file and start working on it I shouldn't need to get into my CSS at all the main thing I'm doing here is toggling a class on and off but we also want to be able to save the proof the really important thing here unless so of the toggling things on and off what I really want to focus on in this video is how we can save the preference for the person so if somebody visits your site again it will be on the last thing that they chose and we're gonna be doing that with something called local storage and local storage is really really awesome so we're in you Alette dark mode equal local storage let me explain local storage in a second just in case you don't know it get item we're gonna say dark mode just like that so what what this is or what local storage is is I'm sure you know of cookies local storage just kind of similar but it allows only be saving of key value pairs in the browser and it also stores that with no expiration date which is pretty cool it also gives us an available size of 5 megabytes which is tons of room I don't think you need 5 megabytes but it is there and accessible cookies are generally really small and like a couple of kilobytes in size but the really big distinction between a cookie and a the local storage is it the data has never sent back to the server this is only as the name implies it's only stored locally on the computer there's also a session a storage which it will only last until that session as soon as the person session is finished that data is gone whereas local storage will hang on to it as I said without any expiration date so if you're not sure if you need a cookie or if you need to use local storage generally it's if the server side needs to the data for some reason then you might need a cookie whereas if it's only client-side as it is in this case then we don't need to use a cookie we only need to use local storage this also for privacy concerns you know you wouldn't have to we're on a cookie warning or anything like that for gdpr or any concerns like that if you're only using local storage everything is only stored on the person's computer this information is never sent it to the server its local so there's no concerns about security or anything like that what we're doing here is we want to see if in their local storage they have something called a dark mode and what the settings for that dark mode are the other thing we do need to do is we we have a button here that we need to be able to interact with so I'm gonna say Const dark mode toggle is equal to document query selector and in this case I had it as an ID of dark mode toggle like that boom there we go so now we can interact with that button and we can do things when we click on when we click on our button we're gonna need to reference that cool so before we can actually do anything with it you know what's going to happen when we click on it so let's test just to make sure that worked if you're ever doing anything javascript wise especially if you're new to javascript you should be just testing to make sure everything you do is is actually working so let's set that up right away let's do in a dark mode toggle I had event listener and we're gonna throw a click event listener on there and I'm gonna use an arrow function for this so I'm actually for now just gonna put parenthesis and then I'm going to do my arrow so and then my curly braces like that and then inside of here I can put my function so for the moment let's just see let's just do like a nice console log of test and see if anything comes up so I'm gonna just open up my dev tools we're gonna do an inspect element on there and open up my console and when we click on that there we go we can see test and every time I click on it it is firing so the number there keeps going up perfect so I know it is working one thing you might have noticed that what single quotations and they all of a sudden turned into double quotations that's just because I have prettier on and it is set to have double quotations on there so we know that my dark mode toggle is there it is working we don't really need it to test that anymore so we can delete that because we know that that is working but when we click on it obviously we don't want it just to run test we want it to do something what do we want it to do we have a few things that we're going to need to do right we need to check if dark mode is enabled if it's enabled we want to turn it off if it's disabled turn it on right that's all the things we need to do when we click so instead of doing everything in here what I'm going to do is I'm going to create a few different things here so let's do a Const of enable dark mode and then we're going to do this with arrow functions the advantage of doing it this way is if we need to use our enabled dark mode in several different places we can whereas if we built it all into here it's only going to work when I click on it so by pulling it out and making it something that I can use here it's reusable as many times as I want which is super useful because we're gonna have to do that a little bit later on so for my enable dark mode how can we enable dark mode well first we need to the first step we need to do is add the class dark mode to the body and the second thing we're going to do is we need to update dark mode in the local storage right so that we know that that's what the new setting is for the next time somebody comes so number one here let's do that first document this was the easy one body class list add dark mode and then number two if the then we need to update the local storage so local storage and this has range something a little bit different here we're gonna say set item so up here we did a get item so we went into our local storage and we got the item dark mode to check what it was this time we're going to set the item so we're going to say we're but we need to know what item are we setting first of all so the first thing we're going to do is we're going to set the item dark mode and this can be literally anything you can create any name you want here for your local storage so whatever item you're setting just you know you give it a name and then what do we want to set it to we want to set it to enabled again this is a state that I'm putting on it it's a string you can see it's in quotation marks it's not like this special thing that you need to follow I'm just putting a string in here but it makes easy for me to know that by writing enabled you know it's pretty straightforward my dark mode is set to enabled and this is what I'd mentioned at the very beginning we can store key value pairs so my key is dark mode and the value is set to enabled right now now we also need to have something that's going to be the opposite so let's copy this and paste it because we're lazy and it would be called disabled disabled dark mode and in this case we want it to remove the class of dark mode and of course here we want to set it we could set it to none but I'm just gonna set it to null just so it's this sort of sets it to on or off in a way by having a null here it just means no we doesn't really actually have a value on it you could we could definitely set it to disabled or something else there as well in how I'm going to use this and I think it would work just fine um so let's go and do this so let's set all of this up we want to come into our function and we want to check first so we want to say if dark mode so if it's not equal to enabled and then they say what this is it could be like literally anything so if it's not set to enabled what should we do well in that case we want to enable and do I spell that right enable dark mode so let's see if that works save that and we have dark mode is not enabled right now so it's not enabled when I click on that it should switch fantastic it worked and now when I click nothing is happening because we need it to switch back so here I can do else disable dark mode this also makes it a little bit easier remember and I said we pulled I wasn't including these in my click function here again we might need to use them in other situations but the nice thing with this also when we're reading our event listener here it's super obvious what's happening if dark mode is not enabled label it and else disable it even though I just added this it's still not working and to figure out why the easy thing to do here is to console.log console.log dark mode so we can see what dark mode is giving us and let's put this on both of them so we ain't no matter what happens we're always getting it and it's gonna make a lot of sense in one second so the page refreshed and now when I click here you can see that dark mode is currently set to enabled well that's interesting because every time I click it it's not really dark here to refresh my page and see what happens now and I click well it's switched but now now it's set to no and every time I click it's still set to no well that that's weird right well not really actually what's happening is it's going back to this so this we're setting our dark mode up here we're saying let dark mode is localstorage getitem dark mode but this is only firing when the page loads so when my page is loading so we refresh my page loads and even let's do it right here so console console.log dark mode so let's see what happens now when my page refreshes dark mode is enabled so every time I click on this it's just gonna keep saying it's enabled because even though we're changing it because even though we're technically switching it here it's not getting that information again because even though here here we're changing dark mode to be null and then here we're changing it to be enabled so technically it actually is switching the problem is it's the local storage that's switching and not my variable that I created here this variable is set to whatever it was on page load well that's a bit of a problem because we obviously want it to be able to switch all the time so that's why it's only when i refresh my page that it seems to actually have a bit of an effect on there so what we need to do is we need to update this dark mode every time someone clicks on it so here drew a side of my eventlistener we can also do before we check to see the state of my dark mode we want to update it so here we can say that my dark mode and this is gonna look really similar at dark mode is equal to local storage dot you can guest it get item good item dark mode and once again we have to do this every time we click because we're saving this as a variable and this variable wasn't getting updated before now we're updating that variable every time we click we don't have to sit we don't have to really clear like let equals or whatever like back we've already declared a variable here we're just updating what our variable actually is and it's also I didn't do it as a Const it's why I did it as a let so it would be able to be changed over time so now if I click here you can actually see it's going to switch back and forth cool right I think that's pretty awesome so now we can switch back and forth it's doing its job except if I'm in dark mode and i refresh my page we're coming back and we're not in dark mode huh that's no good and this is actually the reason that I didn't only have this dark mode variable inside of my event listener it's because we want to know when the page loads what this is so it's really really important to know when the page loads did they have the enable dark mode on a previous visit to this page so what we can do is we have our enable dark mode or disable dark mode but before we get to our event listener here what we can do is say if dark mode is equal to enabled we want to enable dark mode that makes sense right so if dark modes setting is equal to enabled we need to enable it right it means it should be on so this means when the page loads that we should even have dark mode enabled or disabled so now you can see as soon as I save that dark mode was currently enabled so my browser immediately switched it so if I click we can go back to light i refresh my page we should be in light mode but then if I go to my dark mode and I refresh it's going to stay in dark mode this time whereas if I take this off when my page refreshes that's gone and it's not paying attention on page load so that's really important why I had this at the very top here is because I do need to have this checked as soon as the pages load as soon as the page loads and if it is set to dark so I'm checking right away I'm saying let's get this and let's see if it is set to enabled if it's set to enabled from a previous time that somebody visited it we're going to enable my dark mode a pretty much perfect use case for local storage here in this case I really hope you enjoyed this video if you didn't see the last one in that one instead of doing a toggle button where we're setting it one way or the other I looked at how you can do it with your system preferences and a simple media query so I'd encourage you to check that video out I really hope you like this video it was a ton of fun to make I really enjoyed this one I learned a few things along the way as well thank you very much my patrons for helping make all of this possible you guys are amazing and of course until next time don't forget to make you recording the internet just a little bit more awesome

Channel: Kevin Powell

Views: 46,377

Keywords: Kevin Powell, tutorial, html, css, javascript, dark mode, darkmode, dark mode toggle, dark mode localStorage, dark mode javascript, javascript localStorage, localStorage

Id: wodWDIdV9BY

Length: 16min 48sec (1008 seconds)

Published: Wed Oct 23 2019