 Not too long ago somebody left a comment on one of my videos asking me if I could clone the Google Fonts theme toggle thingy, a sun moon thing that they have and I took a look at it and noticed there's a lot of fun things going on with it so in this video we're going to be doing exactly that. Hello my friend and friends and welcome back to the channel I'm so happy that you're here for this video and if you are new here and you don't already know my name is Kevin and here at my channel we learn how to make the web and how to make it look good while we're at it with weekly tips tricks and tutorials and in this video we're going to be doing a lot of CSS and a little fair bit of javascript as well people are always asking me for more javascript content so we're going to cover a little bit of it in this video because we need it for some of the functionality because not only do I want to make the sun moon back and forth but we might as well get it working with our dark theme and light theme and doing all of that at the same time so for this one I see this as a bit of a challenge to myself it's something that whenever we're cloning something it's like how can I do that can I replicate all the different things going on in there and to start off with the first thing we need is an svg to work with so I just fired up illustrator here and made the the svg had to play around with it a little bit to get the shape that I wanted but it went pretty well to be able to replicate it it's simple enough if you don't have illustrator you could do the same thing with the inkscape and there's other vector softwares out there that you could use as well that are free and the nice thing with illustrator I don't know about those other ones but you can just literally hit copy and then go into vs code and paste it and it pasted as an svg with everything you need there now I did also do a little bit of work on my html and css before we're gonna dive into the tutorial side here just because you know it's really basic things that I did just to set it up in the middle of the page and link my css file basically and with that I think we're ready to dive in and see if we can figure out how to clone everything with that thing because there's a lot going on with the toggle we have the different animations different speeds the pulsing thing that seems to be going on with it there's a lot of different elements in here to try and get working plus the whole light mode dark mode and all of that as well all right so we've sort of got things set up now I so I've just centered everything on the screen I added a bit of text and another thing I did is I wrapped my svg in a button and I did put the id on the button itself because it's the button is our toggle and our svg is just what we can click on now I was going to do this off screen too but I think it's an important one to do on screen which is if you have a button that is like this that has no text in it you do want to come in with an area label and we're actually going to do some interesting things with this area label as we go through so let's do switch switch to dark theme because when we click on it that's what we want to happen we want it to switch over to a dark theme and I'm using this is if we look at Google you know what I have it in the other window but let's go over now to this one just so we can go back and forth between our two tabs and see how we get that tool tip that comes up so we're going to use that here too and let's do switch like that so we can take advantage of this area label to I think to be able to get that little thing to come up on there and we're in a new browser and zoom in cool so we're off and running except right now the sun when we're in dark mode we see this because it's showing us a sun because it's saying if you click this you'll get the sun or you'll get your light mode or light theme and then like this it's showing us the dark one because when you click on it we're going to that so I guess the first thing we need to do is move that over so that is my toggle circle right there and so we can come down here and say that my and you could do all of this nested in theme toggle if you wanted to um the specificity wouldn't cause any issues but we'll say toggle circle and I think we just want to do a transform uh translate translate of what negative 50 does that make sense translate x x yeah translate x of negative 50 way too much negative 20 it's it's shooting outside my svg right now um negative 15 and let's leave that right there but we can just shrink this window down a little bit um just so we can keep that in view all the time there we go so I think that actually looks pretty good maybe we've even moved it over a bit too much or maybe my circle could have been a little bit bigger to match it exactly but I'm pretty happy with how that looks I like my moon so we're going to stick with it like that and um so there's a few things that we need to be able to do uh we need to be able to spin the outside and move the inner thing um so what I'm going to do now is just focus more on the css side of things before we worry about the functionality because you'll see like when I do this there's a lot of stuff happening um and so when I hover on top actually you know what theme toggler um we're going to come on this I'm hoping this works in the dark mode too we'll see opacity of 0.7 maybe um because see how it's grayed out and then when you hover on top it it comes in and we get a background that comes on it hmm okay 0.8 maybe that looks not too bad and that means that my um theme toggle hover and I'm guessing that's also on the focus yeah so also so my theme toggle hover and my theme toggle focus um are both getting a few different things so they're going to get a background of let's do an hsl and I'll explain why hsl is just really easy to switch from white to black so we're going to start with an hsl um and do a 0 0 0 percent no I'm going to do a 50 percent um so if I do that um that should give us a gray background and the advantage with doing it at a 50 percent gray is uh if I play with the so if we come here and we say it's like 0.2 so this is the opacity so we've we've lowered the opacity and I think there's this even lower but I'll leave it like that so it's a 50 percent gray so a 50 gray on top of white will make it look darker but if we switch our uh body background to black which eventually we will when we hover on top you can actually see that 50 gray is making it lighter and that's exactly what's happening here um or it's selected now but when we see there it's getting lighter and then we go that way when I hover it's getting darker uh so I think that will work out perfectly fine so there we go um there are a few things that we will need to do let's give this some padding of I'm going to do it um the padding here like I'm making my button really big so it depends a little bit on how you're going to do it uh but since I have a big button we'll do like 4rem and we'll see what that looks like but obviously the size of your button um will have a big impact on that and then we can also say so padding 4rem and then a border radius of 50 to make it a circle there we go so I think that looks pretty good compared to what we have there there's as I said much lighter um oh and there's another thing the opacity is also going to go up uh opacity of one uh because again here when I have it on top the whole thing gets a little bit darker so there we go I think that's good and we'll just drop this to a point one and I think that's actually a pretty good start to that all right um a few things that I will need uh I think what we're going to do is come all the way to the top here and I'm going to use some custom properties for this because I do think it's going to be the easiest way um to eventually do this so on my route let's set a color foreground uh once again let's just use HSL so zero zero percent foreground is the front so zero percent uh yeah zero percent I'll just do over one bit far so that's going to be black and then my color background will be in HSL zero zero percent one hundred percent uh which is pure white so nice and easy uh way to hit black and white and so that means on my body we want to say the background is my var color background that's right and that my color is var color foreground and now I'm on a computer I have dark mode enabled so one thing that we should be able to do with this is I should be able to use a media query right away um so at prefer uh at media at media prefers color scheme dark and what I could do is take these copy them paste them and we just need to inverse them so this would become my background and this one would become my foreground and there we go it worked uh so because I am on a prefers color scheme dark that's working and then if we go to turn that off or if I change my user or my preferences in my system it goes the other way now my button obviously also needs to change because we can't see it so that means that my theme toggle uh so let's just say uh theme theme toggle SVG has a fill of var color foreground and there we go it's working and when we have it on top we can see it gets lighter and then right now I can't click now so now there's there's one issue with this actually right now so I'm going to turn it off for the moment I'm just trying to think so I mean this works but the problem is it's the wrong icon now which is a little bit of an issue is it that pale when we're here it's pretty pale I'm actually going to boost that up to like a point 15 though because I find that on the gray this there that looks a little better cool um so yeah it's functional but it's the wrong icon so we're actually going to have to build in some things now that are going to change the so I think what we're going to actually need to do so this is going to work and it's nice because it will automatically choose based on the user's preference um but I'm also going to come in here and let's just copy you and let's copy this one uh so I don't know if it's getting a little redundant but let's we're going to set this as a dot light theme and a dot dark theme and we're going to use some javascript to toggle on the body and that's sort of what's going to be used to um play with this so we'll also I'm wondering if we might be able to get rid of this but I think I would leave it anyway just in case like this way even if the javascript fails for some reason or somebody has javascript disabled um they can still get the color scheme that they want that's the thought right now but let's see uh I think most of the CSS is done except for the animations but it's going to be a lot easier once we add some javascript so let's go and add the javascript now uh so first thing I'll do is just let's uh link to a javascript file so we need our script source and we'll just call it um whatever theme toggle dot j s and let's go add that new file here theme toggle dot j s okay so what's what do we need I actually think the only thing we need is our theme toggler which is equal to document dot query selector um I'm going to turn word wrap off for now I guess there we go um so we have my query selector and that is my theme toggle cool um so let's just do a quick um theme toggle dot add event listener on click so we're going to listen for if somebody clicks on it and then if somebody clicks on it we want to do something so we'll put in a function and this is why I like writing CSS with CSS the the line wrapping and stuff the short lines are nice uh compared to a javascript uh so here we go if we want to do something that just makes it easier for recording I mean uh so here theme toggle add event listener click so when somebody clicks well what do we want to do um so let's choose my body class except I'm just trying to think the best way to do this okay let's let's just do something really fast um so um document body class list um dot contain so you know what though because because I want to be able to switch from the light and the dark one there I'm just trying to think the easiest way to do this um okay because we sort of want to okay I don't want to write a whole if statements what I'm going to do here is let's uh let's make a function called um enable dark mode and then what are we going to do we're going to do a document dot body dot class list dot contains no if we're enabling dark mode so first we want to remove so we're going to remove and we're going to remove light theme which is the the light one and I know we haven't actually put that anywhere yet but we're going to remove light theme and then we're going to do a document dot body dot class list dot add and there's a reason that I'm not doing like a toggle for dark mode on and off and I'll explain that in a second we're going to add in a dark theme uh and then we can come in with a very similar one for enable uh not dark light mode and that's just going to be an ad here and a remove there and just to keep things in the same order there we go so then what we can say here is uh document dot body and maybe I should have made a const for this or something but whatever uh class list um dot contains contains light uh we're going to say contains light mode a light theme right light theme and we're going to put a question mark and because then what you can do is we can say that does it contain light theme it does if it does we want to uh enable dark mode and if it doesn't we want to enable light mode does that make sense I think that makes sense so document body dot class list contains light theme question mark if it does we're going to enable dark mode if it doesn't we're enabling light mode so we're running the functions that we've created down here so this could be a total failure or it could work but it's working yes I'm saying cool um so there there we go and as I said we could have had something that's going to toggle a theme on and off so we we just have dark theme and we can remove and add it then we wouldn't really need to do this um but I do like the explicitness of it I think I think it's going to help us out um because we need to do a little bit more with the two with our area labels and stuff um so I do I do think that this is going to make sense but that's a good start so that's working so now um because of that we do have our area label that does um if you remember here I made the area label of switch to dark theme now if I click here we don't we need it to you know an area label of switch to dark theme doesn't make sense we now need that area label to be switched to light theme so to do that when we enable dark mode we're going to come in here and we need to do a theme toggle so we're selecting the button itself and we do have an area label that we can use um so area label will be equal to uh switch to switch to light theme right light theme because we're in dark mode the button will now switch to light theme so let's copy that one and paste that there and that can say switch to dark theme so if that worked properly let's go and inspect this guy here um so we do see my button right there and it says switch to dark theme um so let's see if this works if I click on it uh now I click oh it's not working did I save my file is it just not working let's see oh so we can see this is working so my function is working but theme toggle three hours later all right so a fun note here I just did a little bit of research on why my area label wasn't switching and it turns out it is um if I come and I open my dev tools here so this is in chrome and if you look here in chrome we can actually see here where it says switch to dark theme is switching back and forth cool right um but then what happened is I wasn't working so I looked it up and just to make sure I was doing it right and look at this it's not the it's not supported in firefox uh which sucks because it's been around for a little while um no that doesn't mean it's the end of the world it'd be nice if we could do that in firefox as well but you know there are other ways of changing attributes and stuff so it's not the end of the world it just means this has to get a little bit longer um so here instead of doing area label we're going to do a set attribute and the set attributes a little bit different so here instead of that we're going to do this and then I'll close this over here and we just have to tell it what we want to set right so this would be the name of the attribute so that was area label so my area label will go switch to um the light theme and then let's just copy that paste it down here and then this will be switched to dark theme so let's see if that work now um and the advantage here is if this works here it will work in all the browsers so um here is my area label it looks like it is working there we go so I didn't realize that wasn't supported in firefox but luckily it's not that much harder to do it but it's nice when they come up with these new new ways of doing things that do make our lives a little bit easier so hopefully we do get that in the not too distant future uh in firefox um I think we've set most things up there's one last thing that we're going to do but I'm gonna let's let's get a few different things done here um so theme let's come here I'm gonna say that my um theme toggle we'll do an after is we need that to have content and for the content of this actually usually I give it blank content but we don't want to give it blank content we're going to say attribute ATTR this is a function so ATTR open close parenz and then in here we can write in area label and let's just give it a display uh let's hit save and see even if that there it is switch to dark theme you can see it right there uh you can see it's changing the shape of my button because it is within the button so I am going to come on this and say position is absolute whoops absolute and we're also going to come up onto the theme toggle itself um and I'm going to say that here we have a position of relative there we go um just so it's going to make it easier to get this to go where I want it to and that's to get this little guy like the the tool tip that we're getting right there uh you do want to be careful with tool tips so um if anybody is an accessibility expert you can tell me what you think about this and doing it like this I'm trying to match what Google did and this to me is the way I don't know if this is how they did it but I'm assuming it is because it does follow their theming um and stuff so I'm guessing this is how they did it uh because I know they have an area label on there so um and because it's not text that can't be read I I guess it could potentially be read twice um by a screen reader because some screen readers read suit elements some of them don't so maybe it would read the area label and the suit element I'm not sure um so if you do know please let me know uh if there is a different approach that we could use for this um I guess I guess one way we could do it is actually to have like a um a screen reader hidden element in here as well but I'm trying to clone this as closely as possible and as far as I can tell they didn't they don't have that um in here I see a few spans um so I don't see anything that would actually it right there's no like I don't know there's nothing in here that has that text um the only thing it has the switch to light here on their area label if I do that switch to dark yeah so I'm going to do it like that but if you know I have a better way to do it um but if you know of a more accessible way to do it please let me know uh in the comments and if there's a good one that comes up I'll pin it to the top um all right so that's there so here let's set this up a little bit more the color on this color needs to be actually let's just take a look here the color is the opposite okay so the color on that is going to be var color background and the background of it will be var color foreground there we go um we're going to give this a width of max content because it's always going to be one line so there we go max content will fit the width of the text exactly or the content itself so it keeps it always on one line the font size here is tiny so font size let's just say two rem again I have a really big button if you're matching this you'd probably want to play maybe that's a bit big uh 1.5 rem and then we're going to say uh you know what we're going to do we're going to give this a left of zero and a right of zero and that it's gonna so this is an interesting thing with position absolute um if I didn't give this a width so if I take the width off it's going to take that whole space available to it but because I have a width on there it's going to use that width but by doing the left and right of zero here it means I can do a margin of auto let's just say margin yeah we'll say margin zero auto so the left and right become auto and you can center it if you don't have this here it it doesn't have that availability to it and it sort of bugs out as you can see so um the margin auto will work only if the left and right are zero and with the width so you sort of need all of those on there and then we're going to say that the top is um top is going to be what a hundred percent um I guess we can do 90 90 percent there we go 95 something like that let's get it perfect I'm happy with that um I have a margin we'll add my padding here padding of 0.5 m 1 m maybe it's probably a bit too much usually left and right tends to be a little bit bigger um that looks pretty good though maybe we could stick with one actually one we'll give this a border radius of 0.125 m just around the corners off a little bit so that looks pretty good and there's definitely a lower opacity on this because you can uh I think yeah I can see through it a little bit so we're going to say that the opacity is like a 0.8 0.9 it's pretty high that looks pretty good oh and that's interesting that it darkens even when I hover which I don't think there's oh but we're not going to see it so actually we're going to have to play with this a little bit we're going to say that the opacity on this is maybe a 0.7 then that looks a bit better um because normally we're not going to see it um so let's give this a opacity of zero uh there actually so the opacity is going to be let's just see it sort of fades in right and grows so the opacity is going to just leave that there so we can see what we're doing and then I'm going to do a transform scale of zero so it will disappear and we'll drop my opacity and then what I want to do is my we're going to move this up here because here's my hover and focus so I do want this to be on here so we're going to say hover theme toggle hover after and it's on hover and it's also when I tab so it's on my hover and on my focus state so we can select it like that and then what do we want to do we want the opacity I think it was 0.7 I said and then the transform scale of one so now oh and we want to transition it right uh transition um transform it's pretty fast 200 milliseconds linear and opacity 200 milliseconds linear let's just do that that's way too slow 75 maybe 70 so I think that's not there's even faster I think and there is another difference there's a lower down but that's okay the other difference that's happening here is it's growing from the middle I don't want to grow from the middle if you see here it sort of grows it's really fast but it looks like it's growing in from the top so transform and then we do a transform origin of top so now it grows in more from the top and you know what mine's going in and out there's this only growing this way and then it just oh the opacity goes that way so what I'm going to do this uh we'll copy this whole thing I'm going to delete this so my opacity is always going to transform both directions but here we're going to do my transition for both of them uh not there whoops on this one and so if we hit save on that it should transform both ways this way but only the opacity on the way up the opacity on the way out it's not working transition opacity fast and then slow why isn't the opacity transitioning what if I just put this one to zero then oh I know what's happening so my when I go off okay no I know what I could do here um there are ways you could do like a javascript listener and stuff so here let's keep this at like um we'll keep this one at we'll do 100 milliseconds on the way out um so it's going to go 100 milliseconds so what we're going to say here on this transition is um it's zero but we're going to delay it by um 200 or 100 it doesn't matter the opacity is disappearing um because we need to delay the we need this transform not to happen until the opacity is finished so basically I don't care about this part of it I just care about this delay so it's going to disappear and then this second part of the animation can run so when we go on we're transitioning both and we go the other way we're just we're fading out that and we should get it on focus to and out now with the focus we also want to say um outline of zero which normally I'm not a big fan of but we have enough other things happening here and we're trying to match what Google did here and there we go cool so that's looking pretty good now we want to get this animation happening too right when we switch between the two so when we're going to start in the dark theme because that's more of our default one so this is going to be um dot light theme that's my body right I have my body class is switching from light to dark theme did I do that do we have that there yeah okay so there we go that's happening so remember that's when here I did this which is enable light mode and dark mode which is switching the class here enabling whoops we're switching the my body class uh to light and dark so now when I click on that we can see that jumping back and forth so it just means that my we're going to do both of these they're probably going to be different I guess I so my toggle circle is going to have a transition of trans transition transform uh I don't know 250 milliseconds I'm going to do linear we're going to play with it there we go cool and let's see how there's looks so it's probably just an ease in as my guess there we go I mean we could find the exact timing we might have to we might actually have to play with that a little bit or is it ease in or ease out that I want oh that's better ease out is better yeah it sort of slows down near the end looks a little bit more natural okay so that's working and then we also want my spin and that spins I can't use the same transform because that spin you'll notice it it spins and then it comes back a little bit it like over spins then comes back a little bit so on my light theme yeah I'm trying I'm treating dark theme as the default state so let's leave it here um so this is my toggle sun I think I called it was that what I called it toggle sun it is okay um so this one instead of a trend I'm going to do a turn let's just do one turn and see what happens so if I click it should spin or not oh not turn turn turn rotate one turn oh my goodness what is happening um okay don't toggle sun fingers crossed transform origin center hopefully that doesn't work oh origin wow my goodness okay let's add let's transition transform transform 500 milliseconds ease um we're going to pop whoa it is the transform origin that's off look at that guy go transform transform or origin center no center center 50% oh my goodness okay I just found out what's causing the issue let's go I didn't see this when I did that I must have made a mistake when I made my svg I had there's a default transform on here that's kind of weird let's see what that's going to do if I get rid of it apparently nothing so actually now it's now it's off off like now it's in the wrong spot so this is coming from my my svg so I made a mistake when I made my svg let's come back in here really fast I don't get why that's happening but we're going to fix it um so actually what I'm going to do is let's break this up like I said so this oh new layer uh so this is my circle this one is my sun um I don't know if this is going to fix it or not but we're going to do one other thing which is to change my artboard properties artboard is going to be fit to selected art not selected fit to fit to artwork bounds let's try copying that again I'm going to jump back over to vs code svg paste that in and see what so let's is there a transform on this guy again there's no transform so I just something weird happened there and you'll notice here like I don't need these classes anymore um but you'll notice that now I automatically came in with these ideas and the g just means group um so it shouldn't actually change anything and get rid of my depths because I don't need them hit save circle sun these are ids so let's do um class whoops class is equal to theme toggle toggle circle and toggle sun class hit save on that and fingers crossed that looks okay aha it worked it worked it worked okay it's just spinning way too much now but I'm so happy that was my fault and not something that I was doing wrong in the code um so let's see that's still spinning a lot holy moly okay that looks a little better right let's see there's yeah I think it's a half turn it looks like a lot but then when you do it like it does a lot there um so now actually to do this I am going to do my inspect on here and I want to get my sun because what I want to do is actually come on this transition here and I want to play with it a little bit and I'm in fire I wonder if I can move this up and more on screen for you guys whoops there we go it's more on screen um so basically what I want it to do is I want it to go past this point here um so we're gonna I think it starts off let me just see theirs it starts really fast and then it goes too far and then slowly comes back so yeah I want it to go start pretty fast go a little bit too far and then come back a little bit and the nice thing here is in the dev tools you play with it you can see what it looks like and then you can test it out uh so you can see it's working it's just ugly um that that way back is not pretty so I'm actually going to stretch that out more it's a little bit better theirs is so gentle at the end all right so I played with it I sort of ended up back at this point but I sort of think that's good I think I don't know I can't really get it better than this uh so what we're going to do is copy this whole line here so we'll just do a copy on that um and bring it in so that's on my son so we're going to replace this with this one uh and hit save but I think what we're also going to do is make it a little bit slower um so let's try 750 milliseconds oh that's a lot better right there we go let's see here even that this one maybe we could bring up to 500 so the circle will be like 500 because it definitely looks like the circle oh they're almost yeah the circle gets there just as like the sun starts reversing direction a little bit so I'm I think that's actually pretty good timing ah cool okay so we're getting there we're almost there uh there's a few more things though that I need to do one of them is if I refresh my page right now uh I'm in dark mode and say we go to light mode and I refresh my page I'm in dark mode and that's because I have my prefers color scheme on um but the problem with that is if if I like say somebody prefers lights the light mode they're still getting they're getting the wrong symbol at this point um to start with so what we actually need to do is we need to check using javascript which um which color scheme they want to be able to start with the icon in the right spot um so what we're going to do is go back into my theme toggler and think about this for a second um so let's do a function called um set theme theme preference and the main thing that we want it to do is um document on on uh load will be equal to set theme preference uh so the idea is when the document is loaded it's going to check to see what the user's preference is their system preference for a light or dark theme and that way it can add the right class to it and then that's going to make sure that we have the right icon from the very beginning and so we just need to make this function actually work now so we don't need it on any other time I think we only need it when the document is loaded and then after that it doesn't really matter too much so yeah we'll leave it just like that and let's see what we can figure out here all right so um I think the easiest thing here is going to be an if so what we can do say is um if um it's window dot and you can do match media and match media means you can look for any media query you want uh it is a string so you put in the quotation marks and one thing to be careful with here because we are looking at like this like this is the string here so that includes the parentheses right so here you want to inside your string include those um parentheses so we say if window match media prefers color scheme dark and to check if it if it is prefers color scheme dark we can do a dot matches right there um this works in all modern um browsers and if ever you're on a not so modern browser and it just fails it's not going to be the end of the world at all it gets skipped but we have so many other things that are sort of fallbacks for this um anyway it's just going to change how our icon is set up a little bit uh but let's see if it's working first so if it matches what are we going to do um so let's just say uh console log is uh I like it dark and then we're going to do a return so it if that happens then we can get out of our function and if not we can console log I like it light and let's just see to test if this is working so um I've broken something along the way clearly because we just switched oh no I turned off my I didn't save but I turned off the this here okay good um so that's working now what I want to do is let's jump on over here and check my dev tools so in the console here we should see and we do I like it dark um and then actually what I'm going to do is I wasn't going to open it in this but we're going to check out polypane so polypane's a development browser it's really cool it's good for responsiveness as you can see here there's like multiple uh view ports all in view at the same time it's live review like you know you can see if I'm updating one they're all doing it with browser sync and some cool stuff going on there um but what I want to do and one of the things there's really good accessibility testing and stuff they're not sponsoring this by the way it's just I think it's a cool product um but one of the things you can do in here is you do have as I said there's accessibility testing and more but we can check out our dev tools and so you can see here it says I like it dark and that's because we in our system preferences I like it dark but instead of having to change the system preferences you can come in and I clicked on the wrong thing and right here I can actually change my prefers color scheme so I switch that one to light and now if I refresh the page let's hope I like it light there we go awesome so we know it's working so I have an I like it light right now and we switch back and forth um pretty easily so let's keep polypane open actually because it's going to let us test these at the same time um so what we're going to do here instead of console logging stuff we can just do an enable dark mode right there and this one we can get rid of it and do an enable enable light mode um right that makes sense so let's hit save and there we go we can see not sure what happened maybe this one was on light mode that's on light mode too there we go so we're going to do that to dark um we have to fix my media query so that actually works but you can see they're both working so it's refresh and this one was set to light those ones are set to dark this one if I switch this to light and we hit refresh and there we go so again the nice thing with this is at the beginning if somebody lands on the page it's going to be the right icon for depending on their color their color scheme preferences um that they have for their browser but we also want to make sure that everything is working so I am I am going to stick this on I think it's a little bit redundant having both I don't know if we need both but it doesn't hurt having like five extra lines of CSS um and again if for some reason the javascript fails I think that that gets us pretty far um and it's cool seeing them both go at the same time so there we go uh we have both of them that are working and for both color schemes we can go back and forth now there's a little bit more I think uh that I want to do here so let's close down and um so one of them is it's an issue now is it sticks so like when I click and then I move away I still have this and that whereas here if I click and then I move away you can see that the after is going away it's still selected actually um oh and you know what there's a pulse that's going on in the background there when I click too okay so we got two more things to do um so let's actually let's do the pulse first and then we're going to make that so it can disappear because it's pretty easy to do I think the pulse is going to be a bit more work um so let's do the pulse first so for that I think because it happens and then it goes away like if it went and stayed I could just use a transition um between like my active or my what is it I could anyway we could use a transition somewhere in there but because it goes and then goes away I am going to come all the way down and let's just come in with some keyframes keyframes we'll call it a pulse so what's my keyframes pulse it's just going to be it's really fast I know what we're going to do we're going to open up my inspect here um oh I'm in firefox usually let's see if we have it even in here do we have one in here I use different browsers for different sorts of debugging there must be something in here but I know where it is in chrome so let's let's open this up in chrome instead of searching around too much um all right so here's google fonts in chrome and the reason I want to do it in chrome is because uh if I go to here I can go to it's here and I go to more tools and I go to animations and what I like about it is like if I do this it's going to find it found all the animations that were happening um as it switched so now I just have to find this one and when you hover over you see it happen so you can see that's where it's happening so I'm going to click there um and here let's just make this a bit bigger for a second usually if you do this you actually see it happen over here which I don't see happening but that's okay um what I'm going to do is just do 25 percent and then click ah it was the right one so see how it's really slow so you can see now it's pulsing out um and so we have it grows out and then disappears and then it grows out and it disappears so you can play around and there's even ripple map ripple element and there's the opacity that goes up and then back down so maybe it's bad and you can play around with it um inherent stuff I'm not going to deep dive the animation one I just wanted to slow it down so we could see what was actually happening there and now that we know what was happening whoopsie let's get out of here um let's build that in so at zero percent um I want a transform of scale zero because it starts small and it's going to grow bigger and we're going to say in opacity opacity of I don't know 0.5 right like if we looked at that graph where we saw it I think it starts with some opacity um then when we click that I'm just trying to think oh I wasn't working before because I was in firefox but so it it grows really fast it's growing it looks almost instant so I think there is a growth but it's really fast and then it's more based on the opacity so we're going to say at like 30 30 percent we're going to have a transform of scale one and opacity can be at I don't want to have an opacity I'm going to skip opacity on this one and see if that works then at like 75 percent we're going to have our yeah spell things right transform I'm going to let's we'll skip that I'm going to say opacity here is at one and then it sort of faded out at the end so at 100 the opacity will go back to zero because it does it definitely fades out at the end it doesn't just disappear and I'm just going to stick this here at the last keyframe just to make sure that makes sense I'm not sure if we need it but we're going to do that so do that where are we going to do it we already have our after so we're going to use a before I think so my theme toggle before we'll have a content of nothing it's just decorative so we can leave blank content position absolute probably yeah let's give it a background that stands out background of I've been using lime green a 10 so we're going to go with lime green just so we can really see it and then we can play with the color of it after so background lime green um inset of zero because it's position absolute and with that I'm going to move this line down just that's good border radius I'll just do an inherit in a match that way if ever the border radius changed it would also be changing over here and then I'm going to do a transform scale of zero so it's going to start at zero just so we don't see it and an opacity of zero just so it's it's always hiding on us right um and then how are we going to do it actually when we click we need it to have the animation to happen so if we do dot light theme and you know what we might have to do two animations okay light theme theme toggle before we'll get an animation on animation pulse so it's pulsing we'll do 500 milliseconds I'm going to do linear for now we can always play with it so if I click there we are we saw that right um so there we go it whoop and then disappears now one problem is it's on top of everything so I'm going to come here and I'm going to do a z index of negative one now with that it might disappear actually it's going to work just because it can leave it like that if ever this was with other things that had backgrounds it could get lost so I'm going to do an isolation isolate here which creates a new stacking context and it just means it can't escape outside of my button but there we go that's going to fly open like that and I just thought of something that anyway we'll leave it like that for now um I think what we're going to actually do is an ease out on that um just to slow down the animation or maybe I could just change this to 750 actually um 750 let's see what that looks like oh that's not bad actually and then it fades away 650 a little bit faster maybe so you click it comes in and then fades out it comes in and fades out I think there's actually let's just go back down to my keyframes this is going to be at like 10 percent it grows out so fast on theirs it doesn't even look like it's growing but when I slowed it down you definitely saw it there we go okay we'll go with that and then it fades away I think that's good now it looks really really harsh but I think that's just because of the color that I have on it so here what I'm going to do is once again an HSL of 0 0 percent and then is the 50 going to work again 50 percent over like 0.2 so that should darken it when we go that way now the problem is I can't if we take this and we say dark theme it's not going to work the other way around and now it's not going to work anywhere and the reason for that is we've put the animation on and the animation is still there it's not going to restart the animation when we click on it so we could use javascript to go in and actually like remove the animation um once it's finished but you know I could just come here and we could do this is my pulse to pulse to light and then we could just copy this same thing and have a pulse to dark I don't know if this is maybe a javascript doing it would be better I'm not sure so that means here my light theme is the animation is pulse to light and then here would be pulse to dark there we go cool right and again the nice thing with this is by just using this like transparent gray it works it gets darker it gets lighter just like that one gets lighter that way and darker that way oh oh I'm pretty happy with that that's pretty cool so the last thing I want to do is just make it so when we move our mouse off after we've clicked that the that um suit element disappears which is nice and easy as I said um so that is my after so for that actually all we need to do is here where we have the focus on this I'm just going to switch that to a focus visible and focus visible is amazing where you can see it's there but then when I come off it goes away and comes on goes um so basically it means if your keyboard navigating it will like keep it when it gains focus that way but if you do it with the mouse and you click it's not actually the focus visible is not doing it and it's it's really based on the browser determining how the behavior should work but it's really really cool basically it means mouse interactions won't have it gain that state whereas with a focus it can and with buttons sometimes that can be annoying like in this case you don't want it to keep that but I did see that they've kept the background so I'm going to do that when you click on it it's still there very subtle or if I click that way it stays there it's very subtle but the the tool tip that we made goes and comes just like that now that was a lot of fun and if you liked this video and you like the idea of cloning things you probably really like this video right here where I cloned the pop dog card that was really cool and has different animations and fun things happening with it and if you'd like to further dive into the worlds of light modes and dark modes I have a couple of videos in a dedicated playlist right here that dives into that side of things and with that a really big thank you to both Zach and Randy for my supporters of awesome over on patreon as well as all my other patrons for their monthly support and of course until next time don't forget to make your corner internet just a little bit more awesome