In this video, we're gonna build out a fully animated, light dark themes spot for using mostly CSS and a little bit of JavaScript.

And this video is gonna teach you a bunch of great concepts for some advanced CSS as well as how you can use SPG inside your CSS.

So let's get started now.

Welcome back to Webb.

Have simplified my name's Kyle, and my job is to simplify the web for you so you can start building your dream project sooner.

So that sounds interesting.

Make sure you subscribe to the channel for more videos just like this one.

Now, to get started, I have a completely blank visual studio code project open and on the right.

I have the final version of our project, and as you can see, it's a very simple project.

We have a picture of a son and then a swap themes button, and when we click that button, that sun is gonna go off to the right side of our screen and the moon is gonna come in from the left side of our screen, and everything is gonna smoothly transition to the dark name and then movie click swap things again.

It's going to do that same thing.

Moon jumps off to the right son, comes in from the left and everything slowly, transitions backed to this light theme.

We can click this button as many times as we want, and it's going to swap between those different themes.

So to get started with building this, what's first create an HTML file, we'll call index dot html and we'll just have exclamation point enter to generate all this boilerplate code and all this bully re plate with the exclamation point is generated using Emmett.

And if you want a full in depth tutorial on Emmett, I have one linked in the cards and the description down below.

Now, to get started, we're gonna need are different icons for the moon, this icon down here with the moon slash son and then finally our son icon and I got all of these from this website called material designs icons dot com.

So if we just search for Moon here, we can see Here is our theme light, dark and in order to get these into our CSS and are hte e mail because, as you can see here this icon actually changes color.

It's swapping colors as we rotated around.

So we actually need to be able to modify this inside of our CSS.

So what we want to do is actually grabbed the SPG.

And if we just copy all of this code for the SPG and paste it into our HTML, this is actually code that we can modify with CSS so we can change the color of this icon.

Change the size of it, changed the scaling.

We can do everything we want, all because we have this SPG directly inside of our HTML.

So let me just put a comment above this so that we know this is our swapper icon.

And then let's pull in our moon icon, which is right here.

So we just want again get the spg for that.

Make sure we copy this.

Come down here little ways and we'll give this one a comment of Moon.

Make sure this is indented properly and we'll do one more.

This one is going to be for a son.

And if we come in here and we just search for son real quick, it takes a little bit of time, and we have our son icon right here.

So let's just click on this, grab it as an SPG, and we want to just copy that over.

So now we have all over different icons inside of our HTML here.

You're gonna fix this space.

Seems that everything is perfectly spaced out as we want it.

And we can close that.

We don't need this site anymore.

So now that we have our different icons, let's work on the HTML that goes around these icons in order to get these different styles that you want.

The first thing we need is we're gonna need some form of title.

So let's come into our body.

What issues?

An h two for this, and we'll call it a theme swapper.

And let's open this up using live servers so we can see what we're working with.

And as you can see, we have dreams swapper, and there are three different icons down here.

So the next thing we need to do is create this button, which is going to have the text swap themes as well as our icon.

So we'll create a button and inside of this button, we're going to have that icon for this swapper.

So just copy this SPG and paste it into here again, fixed this indentation issue.

And there we go, that's fixed.

And also to make this easier to work with.

I'm just going to condense this down so that it's a little bit smaller.

And I can also put the text swap themes, hopes, themes.

Now, if we look over here, we have that button with the icon and our text swap themes.

Now, lastly, we need some kind of container which is going to contain our son and our moon, because the way that we're actually going to make these rotate off the screen when we click the button is by putting both the sun and the moon in the same container and position 1 10 pixels away from the top of the screen and the other one way down at the bottom of the screen.

So that way it'll just perfectly rotate to the exact right spot that we want it.

So we're gonna put them both just inside of the same container for now, So let's just create a diff to do that.

Delete all these comments, and we could just have a div inside of here, and we're gonna put our moon, which is this first icon here.

And we're gonna have our son as well again.

Let's just fix this indentation lives.

And there we go.

And we're gonna copy this son in there as well.

Just get rid of all this extra comments.

We don't really need them and will pace the sun in.

There is the very 1st 1 again, fixed this just like that.

And again, I'm gonna put that comment back in there for Sun, and then we can have the 2nd 1 down here.

Say, Moon, just so we know which one is which one.

We need to go change them later.

So that's all the html that we're going to need.

So it's actually now work on adding a few classes so we can start styling these inside of our style of sheets.

So the first thing we need to do is to link a style sheet.

What you gonna come in here?

Call it styles that CSS.

I'm gonna shrink down this side of the browser so we can easily see the code we're working with.

And also the next thing that we're going to need to do is add in a class on our button.

So we're gonna come in here, we're gonna add a class, we're gonna call it theme ta go button.

And on this SPG here, we can actually add a class to this and we'll call it icon so we can actually modify the SPG and change its color as we change the buttons color.

Next thing we're gonna do is this, son, we're gonna add a class here, which is just going to say, son, and we can remove that comment.

Same thing for the moon will at a class which says moon and we'll remove that comment since we now know which one is which.

Lastly, we want that container which contains both our son and our moon, and we're gonna call it aptly named our son Moon Container.

So now we have a bunch of styling for our classes created, so that's great.

Now we can move on to actually styling this with our CSS.

So it's create that styles dot CSS file and the way that I'm going to switch between light and dark mode is by adding a class to our body.

So if we have a class which says dark, then we should be in dark mode.

And if there's no class than it's going to be light mode by default.

So let's just get rid event and inside of our styles we need to remember that.

So we're gonna have a body, and we're also gonna have a body dot Dark, which is going to be for our dark mode.

And the way that we're gonna swap between these two modes easily is by using CSS variables.

So we're gonna set the variables inside our body and then overwrite them in our dark mode for our dark theme, which has that darker background and this yellowish color.

So now, with those two classes created, let's first work on actually styling this sword theme.

Swapper and button are dead center in our screen.

So let's go over here, see what we have to work with.

And the first thing we're gonna want to do is use display of flex would justify content in the center and a line items in the center.

This is going to allow our content to be centered and in order to make our content show top to bottom We just want to change the flex direction to be column now everything will be stacked on top of each other and you'll notice it's centered horizontally.

But we also want to send her vertically.

So we need to make sure we specify our height for our body, which will use 100 VH, which is going to be 100% of screen size.

If we say that you notice this is in the center.

But we have this annoying scroll bar.

So if we remove the margin on our body, it's going to get rid of that school bar, and everything is gonna be dead center exactly like we want it now.

The next thing to work on is going to be the colors between our different themes.

So let's go over here and look at what our light theme looks like because this is going to be our default body.

So inside here, we're gonna have a few different variables.

We're gonna have a variable for accent color.

This is going to be this orange color and this yellow color.

So between the different themes and this accent color for default is just orange red, just the default html orange red color and we're also going to have a background color.

So it's created background color.

In our case, this is just white and we're also going to have a text color which in our case here is just going to be black.

Pretty straightforward.

But we're also going to have a button text color.

So it's create that is, well, button text color.

This is what color is This icon as well is this button text and that in this case, is going to be white.

Now, the last thing that we're going to have is the amount of time our animation takes.

As you can see here, this takes one second to transfer between one state to the next day.

So we're gonna create a transition delay, variable hopes, transition delay.

And this is just going to be set to our delay, which is one second in our case, and you can change this.

However, you want to make it either quicker or slower animation, depending on your needs.

So now inside of our body dark.

Let's overwrite some of these colors to make sure that the colors we want for this dark thing so the first thing we want to do is this accent color in our case is accent color is going to be D zero d zero hopes d zero d 066 And that's going to be this yellowish color that you see over here.

Next thing we're going to have is our background color, and this is just going to be 333 and then, lastly, we're going to have that text color.

And this text color here is going to be white in this scenario, and we also want to make sure that we set the button text color.

So we're gonna go in here and say, button, text color is going to be 333 And one thing that you'll notice is that our background color and our button text color are both the same between our body and our body Dark.

So it's actually just set our button text color here to be equal to our background color, and we can even just remove that down here that way, once we change our background color are button text color is goingto update to reference that background color.

So now let's start using these variables we can get started by saying in here our background color is going to be set to that variable so far, backgrounds color.

We're also going to set our color here equal to our text color, so we'll save our text color.

And now let's look over here and you can see as before we have white and black, so there's really not much difference here.

But if we come over and at a class of dark to our body, so we just say dark here and save you can see.

Now we're getting white text and we're getting a blackish colored background.

So we know that our light dark mode is working for a background as well as our color.

The next thing to work on is going to be this title.

We want to make it just so it doesn't take up quite as much room with a little closer to our button.

So it's at a class to that title.

We'll just say Title was going to be that class, and instead of here we could just select that title and we're gonna remove the margin so it's a margin.

It's going to be set to zero and then we'll add a little bit of margin on the bottom.

We'll just say 00.5 r E m just a space our text out from our but in just a little bit.

And I think that already looks a little better.

Next thing to work on is going to be this accent color as well as this button text color.

So it's select that button, which we called theme ta go button.

We're gonna set the background color just to be equal to that accent color, and if we save, you can see we're immediately getting that yellowy colored button.

We can also change our color here to be equal to our button text color.

And if we say if you can now see that color of our icon as well as the color of our text here, has changed to be that button text color.

And if we remove dark from our title there from our body here and save, you can see her button is orange with white text.

So we know that our theme swapping is working now.

The next thing to do is actually style the rest of our button, So the first thing I want to do is change our display here to be flexed.

And that's just so that we can justify our content in the center and a liner items in the center.

And that way all of the text inside of our button is dead centered.

And this swap themes lines up centered with the icon on the left hand side.

Also, we're going to change it so that our cursor here is the point, their cursor.

So we know that we can click on this, and we're also going to change around some of our padding and border.