Build A Dark Mode / Light Mode Chrome Extension

[Music] hello everyone today we're going to be making a chrome extension for converting your page from dark mode to light mode and from light mode to dark mode so let me just show you a little sneak peek of what we're going to be creating today so if i go into youtube and this is the extension it's going to be a pop-up and it is going to look like this we're going to create the pop-up and make it look like this and we have this little button down here when you click on it it is going to turn your page into dark mode and when you click on it again it's going to go back to normal mode and the next thing i want to show is um that it's not just limited to youtube so you can look for anything such as if i wanted to look for puppies and then if i want to turn on my dark mode the page is going to go into dark mode and finally one last thing i want to say is that um it's not just limited to turning normal pages into dark mode if your page is already in dark mode if you turn it on it's going to go into light mode so let me just get in here and demonstrate so if i change my page to dark mode and then turn on my extension the page is going to go into light mode like so so let me turn it back off and so this sounds like something you're interested in making stay tuned in because we're going to be jumping into the code right now okay so now we can start coding this and so to get started what i'm going to do is basically drag this down here and into visual studio code and then that will just open up the project for us and i'm just gonna open this up fully like so um there we go now what we need to do is basically the first step to create any chrome extension is to create a manifest.json file so what the manifest.json file does is it basically sends information to chrome about your extension so the information could be something like the name of the extension the description or like basic information about it like the version and you can also give the permissions that your extension needs and um the scripts that you're going to be linking it to and that kind of information so first let's create that manifest.json file manifest.json and it's going to be in from json so it's going to be like this and then name and we want to set the name to inward dot io and the next thing we want to do is actually i don't want that in capital all right next thing we want to do is set the description um it's nice to have the description to be something short and nice so like let's just say something like um convert go from dark mode to light mode mode and place versa i think that's spelled with an s so i'm just gonna change it okay cool no that looks weird okay maybe it's sorry anyways it's just spelling the next thing we need is to set the version to um this so i'm just sticking to this convention um but you don't necessarily have to you can go with various kinds of versions i mean conventions for the version the next thing we need to do is set the manifest version to do so the reason the manifest version has to be due is because it's the most supported version from chrome so um it's also the most stable and most recent version so we set it to until some new stable version comes out so there we go so that's the manifest version so the next thing we need to do is set the background so what the background does is in here we define the things that should be running in the background so first we need some scripts running in the background so um in here let me say popup.js so for this particular project it's really simple and we only need one script but if you did have many scripts this is where it would go so it's it's in an array because you can attach multiple scripts in here basically so like i could have a comma in here and i could say i don't know script do dot gs but um here we only need one so let's just stick to this so the next thing we need is to set persistent to true this ensures that it's always persistently running in the background so the next thing we need to do is basically set the browser action so browser action so it's basically browser action is basically the action that your browser does when the way the browser basically responds when you click on the extension so here we want to say the default um okay everything has to go in quotes in here because it's jason and default title and we can just set it to invert dot io again and the next thing we want to do is so since we're creating a little pop-up like i just showed we need to set the default popup and we need to give it the page it has to read the html page from which it has to read the content of the pop-up so we're just going to call it popup.html so that's the browser action and finally what we need to do is set the permissions so permissions is basically the things that your browser has access to permissions is an array unlike everything else in here which is an object so permissions so our particular extension is going to need access to all these https pages and that's gonna we're gonna have to type this and the next thing we need to do is get access to the http pages and the final thing we need access to is the tabs which basically will tell us which tab is currently open so that we know which page to apply the dark mode styles on so that's basically all we need for the manifest.json file if there's anything missing we can come back to it and make changes one extra tip that i would mention in here is that all of these are like case sensitive so if this was in capital if your default was like the capital or like the whole thing capital it usually doesn't work so make sure you have everything correct and persistent should be spelt with the t and there we go that's all we need to do for the manifest.json file and next we'll be creating the popup.html file so let's create the popup.html in the popup.js file so dot popup.ht and pop up dot js so inside the pop-up.html if you press exclamation and tab um visually koryo studio code basically generates the spoiler plate code for you and then we can type in hello world inside the body and what this should do is basically create the pop-up that we were looking for since we mentioned that the default pop-up is popup.html so let's go in here to chrome so it says chrome so you need to go to chrome colon slash slash extensions and this is the old version of the pop-up that i made of the dark mode extension so here what we need to do is turn on developer mode and that will show you this tab and then click on load unpacked and then what you need to do is basically navigate to where your project is inside your computer and for me it's here and i'm just going to select that and there we go it says errors great um browser action do i have some oh i spelled browser wrong um that's great um i mean not great but like okay browser all right this should have fixed it let's clear all go back reload and there we go no errors if i click on let me just pin up inward dot io and then if i click on this hello world there we go the pop-up works so now what we need to do is we don't want to just see hello world we want to see the actual code working for the pop-up so um this is what it should look like so i have it open in figma so let me just open it and um and i can make it like this and i can get this smaller and i think that's good enough okay so let's go to the popup.html and um first we need to get the h1 tag for the heading and we want to give a span yellow because half the text is in yellow and i spelt yellow wrong and then the next thing we need to do is set span to blue for the blue part of it so in here we're gonna have inward and here we're gonna have dot io and then we need we can have like a p tag and inside the p tag we can have all of this text let me copy that and we can put that in here and finally what we need is to create the button this will be most the button will be purely made using um css and javascript so let me just type a button and what we need is to create a dot row for no um type that wrong dot row and set it to on and then just get that down here and take off in here okay so i'll just open up open it up in live server so that um uh so that we know what it looks like because we don't want to open it up every single time so there we go let me just close these two okay so it looks like this and it looks a bit plain so let's just style it up a bit more so let's add the style tag in here and um first what we want to do is to import the google fonts so um let me get in here and so what oh this looks pretty nice so let's just get this font so regular and then let's go into um well i'm looking for the pairings so pairings okay down here and let's get open sounds because it always looks nice so let me get that and let's copy the code from here and if we just paste it down here we'll be able to access the google fonts so let me go to the h1 and um use this let me just copy that and this would give it that font family that we're looking for next thing we want to do is go to type in yellow and get this yellow color from here and color and set the color to this and then the next thing you want to do is blue and get the color to this so color and this and that's basically all we need to do with the h1 tag next what we want to do is give the p tag as well as the button the font family that we're looking for so it is open sounds and let me copy that and maybe font font size 1.25 ram all right let's see what that looks like um that looks like this it's a bit big but like okay let me just make it 1.15 um i guess that's okay the next thing we want to do is actually make the button look like the button so like button and um get back in here and give it this background color so let me copy that and background color and let's give it the right background color and next we want the position to relative so we can position the circle on top absolutely and like mess around with it next thing we want to do is set the display to flex because we want the content in here to be in one line and um flex direction and set that row and then align items center and we want to justify content space between um space between there not evenly leaving yet all right between and okay and the width is too off so let's just say something like height set the height to 2 ram and then say width of like maybe 4 forum and we want to border radius border radius of one room let's see what that looks like and that looks okay and maybe make the width just a bit bigger it's like five round 4.5 and there we go that's kind of okay um also this looks a bit off so like it's like the row is just the on and the off is hanging at the tip so let's just give them a bit of a padding so they dot let's take down row target it padding top down can be zero and right left let's just give it a really small padding and that still looks a bit off so let me make it to five and that looks perfect there we go so we can do this and next thing we want to do is basically create the circle and what we're going for here is if we create a circle and place it on the on the on is going to be hidden and the only thing that's going to be visible is the off so it's going to give you the illusion of a button sort of thing when you click on it the circle will go to the right hiding the off and only displaying the on so again it's going to give you the illusion of a working functioning button so now we so we should create that circle now so let's just create a div called circle inside the button and get back up here dot circle set the position to absolute and top um zero i do not know what that is not text outline where we want to stop to zero and then left to zero and we need to set the height and the width to the same thing and since um this is of two ram we should set this to 2 ram as well and the width should also be 2 ram so that we can get a circle next thing we want to set the border radius to 50 which will give it the curve that we're looking for and finally we want the background color to be this so um background color and let's set that to this that should have worked and there we go it did work so um that's basically all we need um what we need to do now is basically add the animation for the circle to go to the right also i feel like the font is a bit too big so i'm just gonna make it one rum standard one drum all right so let's just add the animations in here so comment animations so let's add the keyframes and then let's call this move circle right yeah okay and then we need to we needed to go from left zero and background color this light color no well it's a darker blue isn't it um we need the background color too let me just copy it from here much less hassle all right so let's type that in here and then from there we wanted to go to left a hundred percent and background color um no background color so note that this has to be the same property so you cannot have background in here and background color in here so let me just get the yellow background color it is meant to be this um [Music] all right so there we go so now this is actually gonna look a bit off and let me go so the reason for that okay i'll just show it to you in action it's the circle is going to go a bit too far off out so let's add the animation in here and move circle right is the name and can keep the duration to 1 seconds timing function delay and let's set the iteration to infinite just so we can see what the infinite what let's that we can see the animation working properly and let's get rid of direction and fill mode let me save that and it's working but it's going a bit too far off to the left the reason for this is because the circle is starting from the left of zero and the beginning of the circle is going to the left hundred percent but we want the end of the circle to go to the left hundred percent so we want it to be contained within this blue box so let's get down here and to fix that we set the transform and then we can say translate x to a minus hundred percent that should fix it there we go that fixes it we also need a reverse animation so let's just copy that um the reverse animation is for when you want it to go back to its original state after you click on it twice um so let's call this move circle left and the next thing we want is to actually change the background color of the button so let's add another animation for that so add keyframes and then let's call it background background yellow you can go from background color light blue and um do a background color of the light yellow but i think we need figma for that color again because we do not have that color in here uh let's just wait for that to load up um all right so in here this is the color we're looking for now black but this all right let's copy that and put that down here now hopefully the use of figm is over let's just close that and now if i just add the animation again to the button this time so let me go to the button and background yellow this should work there we go it works perfectly so this is all the html and css we need to make this functioning so the javascript code is like the final stretch for this project and in the javascript code the first thing we need to do is to make the button function like a button and that is when you click on it it goes to the right and the second thing we need to do is to apply the dark mode styles to the currently open page um before we start with that um let's just um we missed out one animation in here so that should be in here so let me just paste that in here so the reverse animation for um basically the uh button um let me just paste this up here and that should work okay and one more thing we need to do in here would be to actually let me just show you so if i refresh this and open this up it is going to look really thin and like small so doing to like fix that issue we can get in here target the body and then set its minimum width to 300 pixels and then the next thing we want to do is text align center and that should fix the issue so like if i reload the extension in here now did i reload it let's reload it and there you go it looks fine so now the light the next thing we want to do is basically go into the javascript code so now in here we want to target the button as well as the circle so let me get those two things in here so the document document dot query selector and let's get the button and the next thing we want to do is basically get the circle so const circle equals document selector and dot circle the next thing we would need is this button called i mean a variable called button on so and we need to set it to false and you'll see why in just a second so button on and set it to false and now what we need to do is basically we need to listen for a click onto the button so when the button is clicked execute a piece of code so to do that we just say button dot add event listener and the event we're listening to is for the click and then when the click it happens we want to execute this arrow function so inside this hour function what we want to do is basically check the status of button on so button on is false execute the if statement and else if it is true execute the false statement the else statement basically so let's set the button on to true here which is the first thing we need to do since our code basically relies on the state of this button this variable i mean and then now we want to set it to false in here and now what we want to do is basically apply this animations to the circle but before we do that let's get back in here and let's set the point cursor to pointer so that what this does is it basically makes the cursor pointer and we want to set the pointer events to none in here so pointer events none and as well as in here pointer events to none and let's comment out these two things the animations because we don't need them anymore and let's just get this from here and we're going to need it in our javascript so circle.style.animation and what we need to do is set it to this so but what we saw when we had it set to infinite is that the circle perpetually and infinitely it goes to the right but we just wanted to go to the right and stay there until and unless you listen to the click that makes it go back so we should set this to forwards to make it go to the right and stay there next thing we want to do is basically apply a styling to the button so dot style dot animation and set it to would be copied except in here it should be background yellow and we want to set this to four words as well and the next thing we want is to basically just copy this and paste this down here so circle [Music] left and background blue this should essentially work um but we do need to attach the script tag in here and link up the javascript file source source and let's set that to popup.js now if i click on this there we go it goes to the right but we do have a small issue the background isn't changing um so it is button dot style um dot animation background yellow so i'm having an extra a so let's get rid of that extra a and now it should hopefully work so there we go it works perfectly and when i click on it again it goes back and it turns to blue so um now what we need to do is in here we want to apply the code to basically style the javascript file not the javascript file but like the page that is currently open so to do that now if we just do document and then target the html or the body and then set that to the dark mode styling then what it's going to do is basically get the pop-up and change the background color of the pop-up we don't want that we want to change the background color of the page that is currently open so to do that we need access to the currently open tab so for that we need to basically get that's why that's the main reason why we set the permissions in here because we need access to the currently open page so now we're going to be using it so how we use it is we just type in chrome and then dot tabs and then we want to execute a script on the currently open script so chrome.tabs basically gets the currently open tab and then we want to execute execute a script on that page so execute script and what we want to do is file and app on.js so appon.js is a javascript file that we will be creating soon to have the styling that we need like basically the kinds of styles you need to apply to the html to make it go into dark mode but the thing is the thing i want to point out is it doesn't just have to be file it could also be code and then you could say alert um hi and then enclose that in double quotes and this would run and work perfectly fine but the thing is all the styles we need for the dark mode is going to be way more than just one line and if you enclose all of that inside double quotes it's going to look really messy so instead of all of that we just get rid of this and we add all of that code into just to like ensure cleaner looking code we can add that into a new file and the next thing we want to do is basically paste that down here and instead call app off dot js now we should actually create the app on dot js and the app off dot js and now just for testing purposes let's have an alert high in here um this is actually when we turn on the extension now we're actually gonna have a small error i'll show you in just a second so if i get in here and refresh we're gonna get an err so when you click on it it says cannot read property adamant listener of null so what it's basically saying is button doesn't exist so when it doesn't exist it doesn't know what it's supposed to be listening to the click off the reason it doesn't exist is what javascript is doing is it's basically looking for the button function in here inside this page instead of the pop-up so to make it look into the pop-up instead of the actual page what we should do is only execute this piece of code when the pop-up exists so inside the popup.html we can quickly go into the body and give it a class of up and then inside here we can say if document dot query selector and dot pop-up so what this would do is it only wants this piece of code if the pop-up exists otherwise it won't do anything so let's add the opening and now um close it up down here and now if we clear all errors and go back and reload there we go it works perfectly fine um now let's just get back in here reload youtube and um i'm also going to set it back to like theme and now if i go in here and click it on it says alert hi so there we go it's perfect it's working perfectly fine so let me turn let me get this off and this off as well now we don't just want to say alert hi what we want to do is basically do all of the target the html and give the styles we need for it to go to dark mode so what we want to do is target the entire html and convert every single color in there to its opposite so like we want to invert it by a hundred percent and we want to rotate the hue back by a 180 degrees so let me just show you how to do it so document dot query selector ask at the html and then what we want to do is style and the property that allows us to invert the color is called filter so we set the inward to one which is the same as invert 100 then we want to do hue rotate by a 180 degrees and this should sort of work partially so let me just reload the extension no errors and then reload the page and now let's turn on and there we go it goes into dark mode but the issue here is the pictures and the images they look so bad so the reason for this is that when we do this not only are we affecting the html we're also affecting all the images and the videos and basically all the media and we don't want those to change because when they do change they end up looking like this so we just need to target those and set them back to not normal so let's get those things so let's say media let media equals document um dot query selector we need to select all of them so query selector all we need image we need um picture and we need video now what we need to do is basically loop over each single one of these so media dot for each and then let's just do an arrow function call it media item do this and inside here what we want to do is set the media item and give it the same style as we have on top in here and then so this would basically essentially this would invert everything and this line would invert the pictures images and videos back to its normal um mode so let's just get back in there and see if that works so let me refresh the extension and reload the page and hopefully it should work and there we go it works perfectly fine now the images and the videos don't get affected anymore so the next step is to basically wrap it up in um a self-invoking function so let me just say function and let's do this and let's cut this and paste this down here and then let's finally call the function and now it's going to be self-invoked function get rid of these lines and next thing we need to do is basically apply the same things to the app off.js but in here we want to set the inward back to zero hue rotate to zero and in here as well because we want it to go back to its original state so let me save this and this should hopefully work let me reload the extension reload youtube oh my god all right and you turn it on it turns into this and when you turn it off there we go it's perfect it works perfectly fine and like i said before it's not just limited to that so if i wanted to look for pizza and then if i turn it on there we go even the map looks fine so let me just close this up and that's basically all you need to make the chrome extension um one thing is the only reason i made this like this um called the chrome tabs twice is because i wanted to show you that you can do this twice and call multiple files but you can make this a bit more efficient by using an if statement in here and then call a different function based on which loop it is in another thing you could do is basically use local storage to store the state of the button on to implement um this in an if statement fl statement and yeah that's one way you could make this code a bit better but that's basically how you make a chrome extension turn it on and it turns into dark mode turn it off and it goes back to its normal um so yeah that's how you make a chrome extension so thank you for watching this video and um i hope you really enjoyed it and i hope you learned how to make a chrome extension from it and i hope you had fun so see you guys

Channel: Jaishree Bala

Views: 1,265

Keywords: Chrome Extension, Dark Mode, Dark Theme, Light Mode, Light Theme, How to make a chrome extension, HTML/CSS, JavaScript, Manifest.json, build a chrome extension, how to build a chrome extension, Build A Dark Mode / Light Mode Chrome Extension, jaishree bala, web development, json, build a chrome extension for dark mode, make a chrome extension for dark mode, how to make a chrome extension for beginners, beginner friendly

Id: 4RzPjLbFYl0

Length: 31min 27sec (1887 seconds)

Published: Tue Oct 06 2020