Learn how to toggle between light, dark, and solar mode (plus other cool tricks) by reverse-engineering the UI of alligator.io 🐊🎨https://github.com/fireship-io/226-css-theme-toggler

1:40 Setup
4:18 Triangle Header
5:13 CSS Dropdown Menu
7:56 Theme Switcher
12:59 Rainbow Animation

Awesome frontend dev resource  https://alligator.io

#css #javascript #code

Install the quiz app 🤓

iOS https://itunes.apple.com/us/app/fireship/id1462592372?mt=8
Android https://play.google.com/store/apps/details?id=io.fireship.quizapp

Upgrade to Fireship PRO at https://fireship.io/pro
Use code lORhwXd2 for 25% off your first payment. 

My VS Code Theme

- Atom One Dark 
- vscode-icons
- Fira Code Font
2024-02-04T06:17:44.608Z
nova-2
2-general-nova
2024-01-09.29447
30089e05-99d1-4376-b32e-c263170674af
ccf0b010-5a82-46cc-9fc4-30b670cc992f
b66d0ffec899cfa7ede45e0950e96f6fac619200a493efa74ae7639e67e5571f
67875a7f-c9c4-48a0-aa55-5bdb8a91c34a
deprecated
One of my all time favorite development sites is Alligator.
Io.
So, naturally, I think we should reverse engineer some of its UI.
Like all good development sites, it gives us the option to switch between a light and dark mode.
And, it even goes a step further to give us Solarize themes as well.
In today's video, you'll learn how to build a feature like this from scratch using CSS variables and and a little bit of JavaScript.
And, it's actually a lot easier than you might think.
Along the way, you'll also learn a bunch of other cool things, like how to create this triangle shape with CSS, how to create a drop down menu without JavaScript and we'll finish up the video by giving our logo this rainbow like color transition when we hover over it.
If you're new here, like and subscribe drive and grab the source code for this project on Fireship IO or GitHub.
Let's start by taking a closer look at what we're building today.
We have a nav bar that's based on Flexbox.
Box.
When you click on themes, it opens a drop down.
And I'll show you a cool technique for keeping this drop down open using nothing but CSS.
So no JavaScript is required for the drop down itself.
But when you click a button inside, it does use JavaScript to change the CSS variables in the page to update the theme.
You'll You'll notice we have an option for light and dark mode and then an option to solarize, which gives us a variation on top of these producing a total of 4 different color schemes.
And you'll also notice bit after I select a theme and then refresh the page, that theme is still applied.
We do that by caching the user's selection in the browser's local storage.
On top of that, we'll look at how we can control shapes in CSS and I'll throw in a variety of different animation techniques as well.
Before we get started, I just want to remind you that we move pretty quickly on mist channel, so feel free to pause the video or slow down the playback speed.
And if you want to jump to a specific feature, check out the timestamps in the video description.
In our project, we have files for HTML, CSS, and JavaScript, all of which are currently empty.
Let's start things off in the HTML to give our website some structure.
Hit exclamation mark tab to create the initial HTML boilerplate.
From there, I'm using a custom font that I got from Google, then I set up the style sheet by typing link colon CSS and hitting tab, and then I reference our JavaScript by typing script colon source and hitting tab.
Then we'll point that to App.
Js, and we'll make sure to use the defer note so the script loads after our HTML.
That autocomplete stuff was done with Emmet, which is built into Versus Code.
If you're not already using abbreviations like this to autocomplete your HTML you definitely should be.
Next, we'll go down to the body element and give it a class of light.
You can think of this as our default theme.
Currently, it doesn't do anything, but, eventually, we'll add CSS variables to it that represent the light theme for the site.
And then we'll write some JavaScript to swap it out with different classes.
Then inside the body, we have a nav bar on the top that has a class of nav bar, and we have a header element below it, which is where our logo will go, and then we have the main content below that, which just contains some dummy text.
Our top navigation bar contains an unordered list that'll be a flexbox container, and then inside that we'll have a few list items, which will be flex items inside that container.
And, eventually, we'll add a drop down menu here as well.
From there, we'll fill out the header, which contains an image tag and points to our logo PNG file.
Feel free to replace that image with anything you want.
And below that, we'll use an h one tag for the headline, front end web development fired up.
And then we'll use a paragraph element for a sub headline below that.
And then inside the main element, we'll use my favorite flavor of ipsum.
But if you don't like this dummy text, there are all kinds of different ipsum generators out there, which you can see on loremipsum.io.
Now if we open up our website in the browser, you can see that it's currently pretty ugly.
Let's go ahead and jump into the CSS file to change that.
We can start by quickly taking care of the boring things, like setting margin and padding to 0 on the body and then removing the default list style for our navbar.
From there, I'll target the a element or the links in the page and tell them to use the current color.
By default, HTML links are an ugly blue color with an underline.
Instead of that, we'll use current color to tell our links to inherit the color from the nearest parent.
This can be really useful when combined with CSS variables as we'll see later.
From there, we'll create our NavBar.
We'll give it a height of 70 pixels, a width of a 100%, And for right now, we'll go ahead and set their colors to static values, but eventually we'll come back and change these two variables.
Then we'll set up the class that targets the unordered list element in the navbar.
We'll make that a flex container, align the items in the center, and then we'll space them evenly across the horizontal axis.
And then we'll set the height to a 100%, so it fills the parent navbar.
The end result is a basic nav bar that looks like this.
Nothing too fancy, but if you do wanna take things further, I have a video for that.
Now our next objective is to design the header and give it that cool triangle shape at the bottom.
We'll start by giving it some margin and padding and aligning the text to the center.
That gives us a standard rectangle that looks something like this.
What we wanna do is trim out part of this rectangle, so it makes that triangle shape at the bottom.
The tool used to do that in CSS is the clip path property.
You can think of this as putting a bunch of points around the element that you can move around.
We can use the polygon function to add as many points as we want, and then each argument to this function represents a point around that header element.
You'll notice that each argument contains 2 percentages.
This represents where the point lives along the x y axis.
So in this case, 0 0 would be the top left corner and 100% 100% would be the bottom right corner.
But when you use the Clip Path property, just open up your website in Firefox and use the Clip Path tool to play around with it.
If you click the icon, it will actually set up the points on the element and then you can drag them around and it will automatically update that property which you can then use in your code if you want.
That takes care of our header.
Now we're going to build a drop down menu using only CSS.
First, we'll go into our HTML and then inside our navbar, we'll add an additional list item, but this one has a has drop down class on it.
Inside that list item, we'll add a link and then an additional unordered list, which represents the drop down.
That drop down will have a few drop down items inside it.
Then each individual drop down item has its own link.
And for each of those links, we'll provide an ID that represents the theme that we want to switch to.
So in this case, an ID of light, dark, and solar.
We'll need the IDs to grab these links when we get to the JavaScript in a few minutes.
Our drop down menu has a position of absolute and a fixed width of 500 pixels.
And we'll set the opacity to 0 by default, making it invisible until it's actually focused.
We also need to set the z index greater than its parent element, which in this case will be 2.
That will make it appear on top of the main nav bar that it sits inside of.
We'll give it a background and a border and then we'll round out the bottom two corners by targeting them individually.
Now, the actual buttons in the drop down are aligned horizontally.
So we'll set the display to flex, align the items in the center, then maximize the space around the items inside that row.
To preview it, I'm going to temporarily set the opacity to 1.
And now you can see underneath this theme link we have this drop down menu.
We can make things look a little nicer by adding a box shadow and then I'll also move the item a little bit to the left so it's more centered around the parent theme link.
And, we can do that by translating along the x axis.
And, that looks a lot better, but how do we open and close this drop down.
We need to determine when something inside the drop down is focused, and then we'll change the opacity from 0 to 1.
A transition on the parent element We'll make the opacity fade in and out when it loses focus.
Now remember in the HTML, on that list item, we gave it a class of has drop down.
We'll use the pseudo selector focus within to detect when a link inside that drop down has been focused.
When that's the case, we'll set the opacity of the drop down to 1.
Now when we go and click on the theme link, it creates focus on that link, which will cause the drop down to fade in.
If we click outside of it, it loses focus and fades out.
And that's how you build a clickable drop down menu using nothing but CSS.
What I'm doing next is just polishing some of the drop down items.
I'll have each link take up all of the available space and then I want to display a circle next to each link with the corresponding color for that theme.
There's a few different ways to create circles with CSS, but one way is to target the before pseudo element.
This allows you to add an element before the link itself, which in our case will just be an empty string, but we'll give that empty string a border of 2 pixels and a border radius of 50% with an equal width and height, which will give us a perfect circle.
Then we'll refine the alignment and margins, and the end result should look like this.
And so now that our main UI is done, the question becomes how do we dynamically change the color theme using CSS and JavaScript.
Well, the first thing we should do is outline our themes.
We'll target the root element and then we'll define classes for light, dark, and solar.
The root element is where I like to define variables for static values that don't change.
Things like colors, breakpoints, and so on.
For this demo, I have 7 gray colors that are ordered from lightest to darkest.
And then we'll throw in blue, purple, and yellow as well.
That gives us our color scheme, but in real life you'll likely have many more colors than this.
And a cool tool that you might wanna check out to generate colors automatically is colors.c0.
Now that we have the color scheme, we can use them to define variables that represent different elements of the UI.
Like our base background will be gray zero.
So we're creating a variable that's based on another variable.
And, by the way, if you've never heard of CSS Variables before in your life, make sure to check out 100 seconds of CSS Variables.
We can also use our variables to build up more complex values like a linear gradient.
So our nav background will be a linear gradient that goes from left to right using the variable gray 1 and the variable gray 3.
And then we'll continue doing this for other variables that we plan to use on the UI like the text and the border color for example.
Now, when it comes time to create a different theme like our dark theme, We can simply use the same variable names, but give them different values.
Our dark theme will use the background of gray 5 instead of gray 0, mode, but the text will use gray 0 to give contrast against that background.
So the takeaway here is that the brand colors always stay the same, but the way they're used changes between the different themes.
But you don't necessarily have to do things that way.
For example, in our solar theme, we'll override the gray colors directly to give them a more yellow green shade.
This allows us to use our existing light and dark themes, but override the base colors to make them appear different.
You just need to make sure to give your colors the same contrast ratio.
If we go back to our website, you can see it looks exactly the same as before.
Why is that?
Well, we haven't actually used our variables yet.
The next step is to go into our styles and use the variables that we defined in our themes.
Basically, anything that had a static color before now has a variable value.
Another cool trick is that you can animate the change between themes by setting a transition on the background and color properties.
And I'll make the background change a little bit faster than the text color to give it sort of a cool offset effect.
Now, after changing all the values in your styles, you should be able to go to the body and change the light class to dark and you should see the colors update automatically.
And if you include the solar class, it should override the gray scale colors.
And now we're at the point where it's time to implement some JavaScript to allow the user to change the theme dynamically.
In our JavaScript code, we first need to grab all of the elements from the DOM.
So we'll do that for each one based on the ID that we set in the HTML, and we'll also make a reference to the body element.
Then we need to listen to the click event on each one of these buttons and run a callback function on each click.
Switching between light and dark mode is pretty straightforward.
We just need to replace the light theme with the dark theme.
One way to do that is to look at the class list on the body, remove the light theme, and then add the dark theme.
That'll work perfectly fine, but we could do this with one line of code using classList replace and replace the light theme with the dark theme.
And that's the better way to go in this case because they're mutually exclusive themes.
And we can do the same thing for our light button, but replace the darkness with light.
And, now, if we go down to the drop down menu, you should be able to switch between light and dark mode.
Now, the Solar theme works a little bit different because instead of being mutually exclusive, it's applied on top of either light or dark mode.
We'll use a conditional statement to see if the body element already contains the solar class, and if so, we'll remove it.
And another cool thing you can do is you can actually change the variables directly by modifying the CSS text in your JavaScript.
It's not essential for this demo, but sometimes you might want to calculate colors directly in your JavaScript, in which case you could modify the CSS text directly.
And as an added touch, we'll change the inner text of the Solarize button based on its state.
Then we'll apply the exact opposite logic on the other side of our conditional statement.
If it doesn't contain the solar class, then we'll go ahead and add it.
So now we can switch between all our themes, but if the user refreshes the page, they're going to lose whatever theme they selected.
Luckily, we can easily cache their selection in the browser using local storage, which is a simple key value store that's built into the browser.
You can access it by simply calling local storage in your script.
And the first thing we'll wanna do when our script runs is get the user's existing theme and then also determine if they are using the Solar theme or not.
If there is an existing theme saved, then we'll go ahead and add that theme to the body of the document.
And if local storage also has a value for the Solar theme, then we'll go ahead and add the Solar theme to the body as well.
And this code will run anytime the page is refreshed or anytime the user visits the website in a different window or browser tab.
And now the question becomes, how do we save these values to local storage?
We can do that by calling set item where the first argument is the key or theme in this case and the second argument is the value or dark, and then apply that same operation to our light theme.
When it comes to the Solar theme, we can actually just remove the is Solar property because when the user is not using Solar, we don't need that property at all.
And when they are using it, we'll just set the property to true.
Now, when we go to the web page and select a theme and then refresh the page, it should still apply that theme.
And you can actually go into the browser console, type in local storage, and it will show you the key value pairs that are saved there.
And if you type in local storage clear, it will erase those values.
We've already done a lot here, but I did promise you one more thing, and that's this rainbow animation when I hover over the logo.
It's really easy to do and can work on any type of image.
Back in our CSS, we'll go ahead and set up a key frames animation called color rotate.
It will animate from a filter property of hue rotate of 0 degrees, which is normal, and then we'll cycle through every color in the color wheel by setting the hue rotate to 360 degrees.
And now, we just need to apply this animation to our logo when we hover over it.
We'll set the animation property to our color rotate key frames and a duration of one second.
We'll have it apply the animation in an infinite loop, and then we'll set the animation direction to rotate, which will rotate the color wheel from clockwise to counterclockwise.
And now our logo has this cool rainbow effect when we hover over it.
I'm gonna go ahead and wrap things up there.
If this video helped you, please like and subscribe.
And let me know what project you'd like to see next in the comments.
Thanks for watching and I will see you in the next one.

Speaker 0: One of my all time favorite development sites is Alligator. Io. So, naturally, I think we should reverse engineer some of its UI. Like all good development sites, it gives us the option to switch between a light and dark mode. And, it even goes a step further to give us Solarize themes as well.

In today's video, you'll learn how to build a feature like this from scratch using CSS variables and and a little bit of JavaScript. And, it's actually a lot easier than you might think. Along the way, you'll also learn a bunch of other cool things, like how to create this triangle shape with CSS, how to create a drop down menu without JavaScript and we'll finish up the video by giving our logo this rainbow like color transition when we hover over it. If you're new here, like and subscribe drive and grab the source code for this project on Fireship IO or GitHub. Let's start by taking a closer look at what we're building today.

We have a nav bar that's based on Flexbox. Box. When you click on themes, it opens a drop down. And I'll show you a cool technique for keeping this drop down open using nothing but CSS. So no JavaScript is required for the drop down itself.

But when you click a button inside, it does use JavaScript to change the CSS variables in the page to update the theme. You'll You'll notice we have an option for light and dark mode and then an option to solarize, which gives us a variation on top of these producing a total of 4 different color schemes. And you'll also notice bit after I select a theme and then refresh the page, that theme is still applied. We do that by caching the user's selection in the browser's local storage. On top of that, we'll look at how we can control shapes in CSS and I'll throw in a variety of different animation techniques as well.

Before we get started, I just want to remind you that we move pretty quickly on mist channel, so feel free to pause the video or slow down the playback speed. And if you want to jump to a specific feature, check out the timestamps in the video description. In our project, we have files for HTML, CSS, and JavaScript, all of which are currently empty. Let's start things off in the HTML to give our website some structure. Hit exclamation mark tab to create the initial HTML boilerplate.

From there, I'm using a custom font that I got from Google, then I set up the style sheet by typing link colon CSS and hitting tab, and then I reference our JavaScript by typing script colon source and hitting tab. Then we'll point that to App. Js, and we'll make sure to use the defer note so the script loads after our HTML. That autocomplete stuff was done with Emmet, which is built into Versus Code. If you're not already using abbreviations like this to autocomplete your HTML you definitely should be.

Next, we'll go down to the body element and give it a class of light. You can think of this as our default theme. Currently, it doesn't do anything, but, eventually, we'll add CSS variables to it that represent the light theme for the site. And then we'll write some JavaScript to swap it out with different classes. Then inside the body, we have a nav bar on the top that has a class of nav bar, and we have a header element below it, which is where our logo will go, and then we have the main content below that, which just contains some dummy text.

Our top navigation bar contains an unordered list that'll be a flexbox container, and then inside that we'll have a few list items, which will be flex items inside that container. And, eventually, we'll add a drop down menu here as well. From there, we'll fill out the header, which contains an image tag and points to our logo PNG file. Feel free to replace that image with anything you want. And below that, we'll use an h one tag for the headline, front end web development fired up.

And then we'll use a paragraph element for a sub headline below that. And then inside the main element, we'll use my favorite flavor of ipsum. But if you don't like this dummy text, there are all kinds of different ipsum generators out there, which you can see on loremipsum.io. Now if we open up our website in the browser, you can see that it's currently pretty ugly. Let's go ahead and jump into the CSS file to change that.

We can start by quickly taking care of the boring things, like setting margin and padding to 0 on the body and then removing the default list style for our navbar. From there, I'll target the a element or the links in the page and tell them to use the current color. By default, HTML links are an ugly blue color with an underline. Instead of that, we'll use current color to tell our links to inherit the color from the nearest parent. This can be really useful when combined with CSS variables as we'll see later.

From there, we'll create our NavBar. We'll give it a height of 70 pixels, a width of a 100%, And for right now, we'll go ahead and set their colors to static values, but eventually we'll come back and change these two variables. Then we'll set up the class that targets the unordered list element in the navbar. We'll make that a flex container, align the items in the center, and then we'll space them evenly across the horizontal axis. And then we'll set the height to a 100%, so it fills the parent navbar.

The end result is a basic nav bar that looks like this. Nothing too fancy, but if you do wanna take things further, I have a video for that. Now our next objective is to design the header and give it that cool triangle shape at the bottom. We'll start by giving it some margin and padding and aligning the text to the center. That gives us a standard rectangle that looks something like this.

What we wanna do is trim out part of this rectangle, so it makes that triangle shape at the bottom. The tool used to do that in CSS is the clip path property. You can think of this as putting a bunch of points around the element that you can move around. We can use the polygon function to add as many points as we want, and then each argument to this function represents a point around that header element. You'll notice that each argument contains 2 percentages.

This represents where the point lives along the x y axis. So in this case, 0 0 would be the top left corner and 100% 100% would be the bottom right corner. But when you use the Clip Path property, just open up your website in Firefox and use the Clip Path tool to play around with it. If you click the icon, it will actually set up the points on the element and then you can drag them around and it will automatically update that property which you can then use in your code if you want. That takes care of our header.

Now we're going to build a drop down menu using only CSS. First, we'll go into our HTML and then inside our navbar, we'll add an additional list item, but this one has a has drop down class on it. Inside that list item, we'll add a link and then an additional unordered list, which represents the drop down. That drop down will have a few drop down items inside it. Then each individual drop down item has its own link.

And for each of those links, we'll provide an ID that represents the theme that we want to switch to. So in this case, an ID of light, dark, and solar. We'll need the IDs to grab these links when we get to the JavaScript in a few minutes. Our drop down menu has a position of absolute and a fixed width of 500 pixels. And we'll set the opacity to 0 by default, making it invisible until it's actually focused.

We also need to set the z index greater than its parent element, which in this case will be 2. That will make it appear on top of the main nav bar that it sits inside of. We'll give it a background and a border and then we'll round out the bottom two corners by targeting them individually. Now, the actual buttons in the drop down are aligned horizontally. So we'll set the display to flex, align the items in the center, then maximize the space around the items inside that row.

To preview it, I'm going to temporarily set the opacity to 1. And now you can see underneath this theme link we have this drop down menu. We can make things look a little nicer by adding a box shadow and then I'll also move the item a little bit to the left so it's more centered around the parent theme link. And, we can do that by translating along the x axis. And, that looks a lot better, but how do we open and close this drop down.

We need to determine when something inside the drop down is focused, and then we'll change the opacity from 0 to 1. A transition on the parent element We'll make the opacity fade in and out when it loses focus. Now remember in the HTML, on that list item, we gave it a class of has drop down. We'll use the pseudo selector focus within to detect when a link inside that drop down has been focused. When that's the case, we'll set the opacity of the drop down to 1.

Now when we go and click on the theme link, it creates focus on that link, which will cause the drop down to fade in. If we click outside of it, it loses focus and fades out. And that's how you build a clickable drop down menu using nothing but CSS. What I'm doing next is just polishing some of the drop down items. I'll have each link take up all of the available space and then I want to display a circle next to each link with the corresponding color for that theme.

There's a few different ways to create circles with CSS, but one way is to target the before pseudo element. This allows you to add an element before the link itself, which in our case will just be an empty string, but we'll give that empty string a border of 2 pixels and a border radius of 50% with an equal width and height, which will give us a perfect circle. Then we'll refine the alignment and margins, and the end result should look like this. And so now that our main UI is done, the question becomes how do we dynamically change the color theme using CSS and JavaScript. Well, the first thing we should do is outline our themes.

We'll target the root element and then we'll define classes for light, dark, and solar. The root element is where I like to define variables for static values that don't change. Things like colors, breakpoints, and so on. For this demo, I have 7 gray colors that are ordered from lightest to darkest. And then we'll throw in blue, purple, and yellow as well.

That gives us our color scheme, but in real life you'll likely have many more colors than this. And a cool tool that you might wanna check out to generate colors automatically is colors.c0. Now that we have the color scheme, we can use them to define variables that represent different elements of the UI. Like our base background will be gray zero. So we're creating a variable that's based on another variable.

And, by the way, if you've never heard of CSS Variables before in your life, make sure to check out 100 seconds of CSS Variables. We can also use our variables to build up more complex values like a linear gradient. So our nav background will be a linear gradient that goes from left to right using the variable gray 1 and the variable gray 3. And then we'll continue doing this for other variables that we plan to use on the UI like the text and the border color for example. Now, when it comes time to create a different theme like our dark theme, We can simply use the same variable names, but give them different values.

Our dark theme will use the background of gray 5 instead of gray 0, mode, but the text will use gray 0 to give contrast against that background. So the takeaway here is that the brand colors always stay the same, but the way they're used changes between the different themes. But you don't necessarily have to do things that way. For example, in our solar theme, we'll override the gray colors directly to give them a more yellow green shade. This allows us to use our existing light and dark themes, but override the base colors to make them appear different.

You just need to make sure to give your colors the same contrast ratio. If we go back to our website, you can see it looks exactly the same as before. Why is that? Well, we haven't actually used our variables yet. The next step is to go into our styles and use the variables that we defined in our themes.

Basically, anything that had a static color before now has a variable value. Another cool trick is that you can animate the change between themes by setting a transition on the background and color properties. And I'll make the background change a little bit faster than the text color to give it sort of a cool offset effect. Now, after changing all the values in your styles, you should be able to go to the body and change the light class to dark and you should see the colors update automatically. And if you include the solar class, it should override the gray scale colors.

And now we're at the point where it's time to implement some JavaScript to allow the user to change the theme dynamically. In our JavaScript code, we first need to grab all of the elements from the DOM. So we'll do that for each one based on the ID that we set in the HTML, and we'll also make a reference to the body element. Then we need to listen to the click event on each one of these buttons and run a callback function on each click. Switching between light and dark mode is pretty straightforward.

We just need to replace the light theme with the dark theme. One way to do that is to look at the class list on the body, remove the light theme, and then add the dark theme. That'll work perfectly fine, but we could do this with one line of code using classList replace and replace the light theme with the dark theme. And that's the better way to go in this case because they're mutually exclusive themes. And we can do the same thing for our light button, but replace the darkness with light.

And, now, if we go down to the drop down menu, you should be able to switch between light and dark mode. Now, the Solar theme works a little bit different because instead of being mutually exclusive, it's applied on top of either light or dark mode. We'll use a conditional statement to see if the body element already contains the solar class, and if so, we'll remove it. And another cool thing you can do is you can actually change the variables directly by modifying the CSS text in your JavaScript. It's not essential for this demo, but sometimes you might want to calculate colors directly in your JavaScript, in which case you could modify the CSS text directly.

And as an added touch, we'll change the inner text of the Solarize button based on its state. Then we'll apply the exact opposite logic on the other side of our conditional statement. If it doesn't contain the solar class, then we'll go ahead and add it. So now we can switch between all our themes, but if the user refreshes the page, they're going to lose whatever theme they selected. Luckily, we can easily cache their selection in the browser using local storage, which is a simple key value store that's built into the browser.

You can access it by simply calling local storage in your script. And the first thing we'll wanna do when our script runs is get the user's existing theme and then also determine if they are using the Solar theme or not. If there is an existing theme saved, then we'll go ahead and add that theme to the body of the document. And if local storage also has a value for the Solar theme, then we'll go ahead and add the Solar theme to the body as well. And this code will run anytime the page is refreshed or anytime the user visits the website in a different window or browser tab.

And now the question becomes, how do we save these values to local storage? We can do that by calling set item where the first argument is the key or theme in this case and the second argument is the value or dark, and then apply that same operation to our light theme. When it comes to the Solar theme, we can actually just remove the is Solar property because when the user is not using Solar, we don't need that property at all. And when they are using it, we'll just set the property to true. Now, when we go to the web page and select a theme and then refresh the page, it should still apply that theme.

And you can actually go into the browser console, type in local storage, and it will show you the key value pairs that are saved there. And if you type in local storage clear, it will erase those values. We've already done a lot here, but I did promise you one more thing, and that's this rainbow animation when I hover over the logo. It's really easy to do and can work on any type of image. Back in our CSS, we'll go ahead and set up a key frames animation called color rotate.

It will animate from a filter property of hue rotate of 0 degrees, which is normal, and then we'll cycle through every color in the color wheel by setting the hue rotate to 360 degrees. And now, we just need to apply this animation to our logo when we hover over it. We'll set the animation property to our color rotate key frames and a duration of one second. We'll have it apply the animation in an infinite loop, and then we'll set the animation direction to rotate, which will rotate the color wheel from clockwise to counterclockwise. And now our logo has this cool rainbow effect when we hover over it.

I'm gonna go ahead and wrap things up there. If this video helped you, please like and subscribe. And let me know what project you'd like to see next in the comments. Thanks for watching and I will see you in the next one.
One of my all time favorite development sites is Alligator. Io. So, naturally, I think we should reverse engineer some of its UI. Like all good development sites, it gives us the option to switch between a light and dark mode. And, it even goes a step further to give us Solarize themes as well. In today's video, you'll learn how to build a feature like this from scratch using CSS variables and and a little bit of JavaScript. And, it's actually a lot easier than you might think. Along the way, you'll also learn a bunch of other cool things, like how to create this triangle shape with CSS, how to create a drop down menu without JavaScript and we'll finish up the video by giving our logo this rainbow like color transition when we hover over it.
technology
animation
graphic design
If you're new here, like and subscribe drive and grab the source code for this project on Fireship IO or GitHub. Let's start by taking a closer look at what we're building today. We have a nav bar that's based on Flexbox. Box. When you click on themes, it opens a drop down. And I'll show you a cool technique for keeping this drop down open using nothing but CSS. So no JavaScript is required for the drop down itself. But when you click a button inside, it does use JavaScript to change the CSS variables in the page to update the theme. You'll You'll notice we have an option for light and dark mode and then an option to solarize, which gives us a variation on top of these producing a total of 4 different color schemes.
And you'll also notice bit after I select a theme and then refresh the page, that theme is still applied. We do that by caching the user's selection in the browser's local storage. On top of that, we'll look at how we can control shapes in CSS and I'll throw in a variety of different animation techniques as well. Before we get started, I just want to remind you that we move pretty quickly on mist channel, so feel free to pause the video or slow down the playback speed. And if you want to jump to a specific feature, check out the timestamps in the video description. In our project, we have files for HTML, CSS, and JavaScript, all of which are currently empty. Let's start things off in the HTML to give our website some structure. Hit exclamation mark tab to create the initial HTML boilerplate.
animation
video gaming
streaming
youtube
acting
From there, I'm using a custom font that I got from Google, then I set up the style sheet by typing link colon CSS and hitting tab, and then I reference our JavaScript by typing script colon source and hitting tab. Then we'll point that to App. Js, and we'll make sure to use the defer note so the script loads after our HTML. That autocomplete stuff was done with Emmet, which is built into Versus Code. If you're not already using abbreviations like this to autocomplete your HTML you definitely should be. Next, we'll go down to the body element and give it a class of light. You can think of this as our default theme. Currently, it doesn't do anything, but, eventually, we'll add CSS variables to it that represent the light theme for the site. And then we'll write some JavaScript to swap it out with different classes. Then inside the body, we have a nav bar on the top that has a class of nav bar, and we have a header element below it, which is where our logo will go, and then we have the main content below that, which just contains some dummy text. Our top navigation bar contains an unordered list that'll be a flexbox container, and then inside that we'll have a few list items, which will be flex items inside that container. And, eventually, we'll add a drop down menu here as well. From there, we'll fill out the header, which contains an image tag and points to our logo PNG file. Feel free to replace that image with anything you want. And below that, we'll use an h one tag for the headline, front end web development fired up. And then we'll use a paragraph element for a sub headline below that. And then inside the main element, we'll use my favorite flavor of ipsum. But if you don't like this dummy text, there are all kinds of different ipsum generators out there, which you can see on loremipsum.io. Now if we open up our website in the browser, you can see that it's currently pretty ugly. Let's go ahead and jump into the CSS file to change that. We can start by quickly taking care of the boring things, like setting margin and padding to 0 on the body and then removing the default list style for our navbar. From there, I'll target the a element or the links in the page and tell them to use the current color. By default, HTML links are an ugly blue color with an underline. Instead of that, we'll use current color to tell our links to inherit the color from the nearest parent. This can be really useful when combined with CSS variables as we'll see later. From there, we'll create our NavBar. We'll give it a height of 70 pixels, a width of a 100%, And for right now, we'll go ahead and set their colors to static values, but eventually we'll come back and change these two variables. Then we'll set up the class that targets the unordered list element in the navbar. We'll make that a flex container, align the items in the center, and then we'll space them evenly across the horizontal axis.
And then we'll set the height to a 100%, so it fills the parent navbar. The end result is a basic nav bar that looks like this. Nothing too fancy, but if you do wanna take things further, I have a video for that. Now our next objective is to design the header and give it that cool triangle shape at the bottom. We'll start by giving it some margin and padding and aligning the text to the center. That gives us a standard rectangle that looks something like this. What we wanna do is trim out part of this rectangle, so it makes that triangle shape at the bottom. The tool used to do that in CSS is the clip path property.
graphic design
visualization
photography
geometry
You can think of this as putting a bunch of points around the element that you can move around. We can use the polygon function to add as many points as we want, and then each argument to this function represents a point around that header element. You'll notice that each argument contains 2 percentages. This represents where the point lives along the x y axis. So in this case, 0 0 would be the top left corner and 100% 100% would be the bottom right corner. But when you use the Clip Path property, just open up your website in Firefox and use the Clip Path tool to play around with it. If you click the icon, it will actually set up the points on the element and then you can drag them around and it will automatically update that property which you can then use in your code if you want. That takes care of our header. Now we're going to build a drop down menu using only CSS. First, we'll go into our HTML and then inside our navbar, we'll add an additional list item, but this one has a has drop down class on it. Inside that list item, we'll add a link and then an additional unordered list, which represents the drop down. That drop down will have a few drop down items inside it. Then each individual drop down item has its own link. And for each of those links, we'll provide an ID that represents the theme that we want to switch to. So in this case, an ID of light, dark, and solar. We'll need the IDs to grab these links when we get to the JavaScript in a few minutes. Our drop down menu has a position of absolute and a fixed width of 500 pixels. And we'll set the opacity to 0 by default, making it invisible until it's actually focused. We also need to set the z index greater than its parent element, which in this case will be 2. That will make it appear on top of the main nav bar that it sits inside of. We'll give it a background and a border and then we'll round out the bottom two corners by targeting them individually. Now, the actual buttons in the drop down are aligned horizontally. So we'll set the display to flex, align the items in the center, then maximize the space around the items inside that row. To preview it, I'm going to temporarily set the opacity to 1. And now you can see underneath this theme link we have this drop down menu. We can make things look a little nicer by adding a box shadow and then I'll also move the item a little bit to the left so it's more centered around the parent theme link. And, we can do that by translating along the x axis. And, that looks a lot better, but how do we open and close this drop down. We need to determine when something inside the drop down is focused, and then we'll change the opacity from 0 to 1. A transition on the parent element We'll make the opacity fade in and out when it loses focus. Now remember in the HTML, on that list item, we gave it a class of has drop down. We'll use the pseudo selector focus within to detect when a link inside that drop down has been focused. When that's the case, we'll set the opacity of the drop down to 1. Now when we go and click on the theme link, it creates focus on that link, which will cause the drop down to fade in. If we click outside of it, it loses focus and fades out. And that's how you build a clickable drop down menu using nothing but CSS. What I'm doing next is just polishing some of the drop down items. I'll have each link take up all of the available space and then I want to display a circle next to each link with the corresponding color for that theme. There's a few different ways to create circles with CSS, but one way is to target the before pseudo element. This allows you to add an element before the link itself, which in our case will just be an empty string, but we'll give that empty string a border of 2 pixels and a border radius of 50% with an equal width and height, which will give us a perfect circle. Then we'll refine the alignment and margins, and the end result should look like this. And so now that our main UI is done, the question becomes how do we dynamically change the color theme using CSS and JavaScript. Well, the first thing we should do is outline our themes. We'll target the root element and then we'll define classes for light, dark, and solar. The root element is where I like to define variables for static values that don't change. Things like colors, breakpoints, and so on. For this demo, I have 7 gray colors that are ordered from lightest to darkest. And then we'll throw in blue, purple, and yellow as well. That gives us our color scheme, but in real life you'll likely have many more colors than this. And a cool tool that you might wanna check out to generate colors automatically is colors.c0. Now that we have the color scheme, we can use them to define variables that represent different elements of the UI. Like our base background will be gray zero. So we're creating a variable that's based on another variable. And, by the way, if you've never heard of CSS Variables before in your life, make sure to check out 100 seconds of CSS Variables. We can also use our variables to build up more complex values like a linear gradient. So our nav background will be a linear gradient that goes from left to right using the variable gray 1 and the variable gray 3. And then we'll continue doing this for other variables that we plan to use on the UI like the text and the border color for example. Now, when it comes time to create a different theme like our dark theme, We can simply use the same variable names, but give them different values. Our dark theme will use the background of gray 5 instead of gray 0, mode, but the text will use gray 0 to give contrast against that background.
So the takeaway here is that the brand colors always stay the same, but the way they're used changes between the different themes. But you don't necessarily have to do things that way. For example, in our solar theme, we'll override the gray colors directly to give them a more yellow green shade.
cosmetics
This allows us to use our existing light and dark themes, but override the base colors to make them appear different. You just need to make sure to give your colors the same contrast ratio. If we go back to our website, you can see it looks exactly the same as before. Why is that? Well, we haven't actually used our variables yet. The next step is to go into our styles and use the variables that we defined in our themes. Basically, anything that had a static color before now has a variable value. Another cool trick is that you can animate the change between themes by setting a transition on the background and color properties. And I'll make the background change a little bit faster than the text color to give it sort of a cool offset effect. Now, after changing all the values in your styles, you should be able to go to the body and change the light class to dark and you should see the colors update automatically. And if you include the solar class, it should override the gray scale colors. And now we're at the point where it's time to implement some JavaScript to allow the user to change the theme dynamically. In our JavaScript code, we first need to grab all of the elements from the DOM. So we'll do that for each one based on the ID that we set in the HTML, and we'll also make a reference to the body element. Then we need to listen to the click event on each one of these buttons and run a callback function on each click. Switching between light and dark mode is pretty straightforward. We just need to replace the light theme with the dark theme. One way to do that is to look at the class list on the body, remove the light theme, and then add the dark theme. That'll work perfectly fine, but we could do this with one line of code using classList replace and replace the light theme with the dark theme. And that's the better way to go in this case because they're mutually exclusive themes. And we can do the same thing for our light button, but replace the darkness with light. And, now, if we go down to the drop down menu, you should be able to switch between light and dark mode. Now, the Solar theme works a little bit different because instead of being mutually exclusive, it's applied on top of either light or dark mode. We'll use a conditional statement to see if the body element already contains the solar class, and if so, we'll remove it. And another cool thing you can do is you can actually change the variables directly by modifying the CSS text in your JavaScript. It's not essential for this demo, but sometimes you might want to calculate colors directly in your JavaScript, in which case you could modify the CSS text directly. And as an added touch, we'll change the inner text of the Solarize button based on its state. Then we'll apply the exact opposite logic on the other side of our conditional statement. If it doesn't contain the solar class, then we'll go ahead and add it. So now we can switch between all our themes, but if the user refreshes the page, they're going to lose whatever theme they selected. Luckily, we can easily cache their selection in the browser using local storage, which is a simple key value store that's built into the browser. You can access it by simply calling local storage in your script. And the first thing we'll wanna do when our script runs is get the user's existing theme and then also determine if they are using the Solar theme or not. If there is an existing theme saved, then we'll go ahead and add that theme to the body of the document. And if local storage also has a value for the Solar theme, then we'll go ahead and add the Solar theme to the body as well. And this code will run anytime the page is refreshed or anytime the user visits the website in a different window or browser tab. And now the question becomes, how do we save these values to local storage? We can do that by calling set item where the first argument is the key or theme in this case and the second argument is the value or dark, and then apply that same operation to our light theme. When it comes to the Solar theme, we can actually just remove the is Solar property because when the user is not using Solar, we don't need that property at all. And when they are using it, we'll just set the property to true. Now, when we go to the web page and select a theme and then refresh the page, it should still apply that theme. And you can actually go into the browser console, type in local storage, and it will show you the key value pairs that are saved there.
And if you type in local storage clear, it will erase those values. We've already done a lot here, but I did promise you one more thing, and that's this rainbow animation when I hover over the logo. It's really easy to do and can work on any type of image. Back in our CSS, we'll go ahead and set up a key frames animation called color rotate. It will animate from a filter property of hue rotate of 0 degrees, which is normal, and then we'll cycle through every color in the color wheel by setting the hue rotate to 360 degrees. And now, we just need to apply this animation to our logo when we hover over it. We'll set the animation property to our color rotate key frames and a duration of one second. We'll have it apply the animation in an infinite loop, and then we'll set the animation direction to rotate, which will rotate the color wheel from clockwise to counterclockwise. And now our logo has this cool rainbow effect when we hover over it. I'm gonna go ahead and wrap things up there. If this video helped you, please like and subscribe. And let me know what project you'd like to see next in the comments. Thanks for watching and I will see you in the next one.
animation
youtube
graphic design
photography
One of my all time favorite development sites is Alligator. Io. So, naturally, I think we should reverse engineer some of its UI. Like all good development sites, it gives us the option to switch between a light and dark mode. And, it even goes a step further to give us Solarize themes as well. In today's video, you'll learn how to build a feature like this from scratch using CSS variables and and a little bit of JavaScript. And, it's actually a lot easier than you might think. Along the way, you'll also learn a bunch of other cool things, like how to create this triangle shape with CSS, how to create a drop down menu without JavaScript and we'll finish up the video by giving our logo this rainbow like color transition when we hover over it. If you're new here, like and subscribe drive and grab the source code for this project on Fireship IO or GitHub. Let's start by taking a closer look at what we're building today. We have a nav bar that's based on Flexbox. Box. When you click on themes, it opens a drop down. And I'll show you a cool technique for keeping this drop down open using nothing but CSS. So no JavaScript is required for the drop down itself. But when you click a button inside, it does use JavaScript to change the CSS variables in the page to update the theme. You'll You'll notice we have an option for light and dark mode and then an option to solarize, which gives us a variation on top of these producing a total of 4 different color schemes. And you'll also notice bit after I select a theme and then refresh the page, that theme is still applied. We do that by caching the user's selection in the browser's local storage. On top of that, we'll look at how we can control shapes in CSS and I'll throw in a variety of different animation techniques as well. Before we get started, I just want to remind you that we move pretty quickly on mist channel, so feel free to pause the video or slow down the playback speed. And if you want to jump to a specific feature, check out the timestamps in the video description. In our project, we have files for HTML, CSS, and JavaScript, all of which are currently empty. Let's start things off in the HTML to give our website some structure. Hit exclamation mark tab to create the initial HTML boilerplate. From there, I'm using a custom font that I got from Google, then I set up the style sheet by typing link colon CSS and hitting tab, and then I reference our JavaScript by typing script colon source and hitting tab. Then we'll point that to App. Js, and we'll make sure to use the defer note so the script loads after our HTML. That autocomplete stuff was done with Emmet, which is built into Versus Code. If you're not already using abbreviations like this to autocomplete your HTML you definitely should be. Next, we'll go down to the body element and give it a class of light. You can think of this as our default theme. Currently, it doesn't do anything, but, eventually, we'll add CSS variables to it that represent the light theme for the site. And then we'll write some JavaScript to swap it out with different classes. Then inside the body, we have a nav bar on the top that has a class of nav bar, and we have a header element below it, which is where our logo will go, and then we have the main content below that, which just contains some dummy text. Our top navigation bar contains an unordered list that'll be a flexbox container, and then inside that we'll have a few list items, which will be flex items inside that container. And, eventually, we'll add a drop down menu here as well. From there, we'll fill out the header, which contains an image tag and points to our logo PNG file. Feel free to replace that image with anything you want. And below that, we'll use an h one tag for the headline, front end web development fired up. And then we'll use a paragraph element for a sub headline below that. And then inside the main element, we'll use my favorite flavor of ipsum. But if you don't like this dummy text, there are all kinds of different ipsum generators out there, which you can see on loremipsum.io. Now if we open up our website in the browser, you can see that it's currently pretty ugly. Let's go ahead and jump into the CSS file to change that. We can start by quickly taking care of the boring things, like setting margin and padding to 0 on the body and then removing the default list style for our navbar. From there, I'll target the a element or the links in the page and tell them to use the current color. By default, HTML links are an ugly blue color with an underline. Instead of that, we'll use current color to tell our links to inherit the color from the nearest parent. This can be really useful when combined with CSS variables as we'll see later. From there, we'll create our NavBar. We'll give it a height of 70 pixels, a width of a 100%, And for right now, we'll go ahead and set their colors to static values, but eventually we'll come back and change these two variables. Then we'll set up the class that targets the unordered list element in the navbar. We'll make that a flex container, align the items in the center, and then we'll space them evenly across the horizontal axis. And then we'll set the height to a 100%, so it fills the parent navbar. The end result is a basic nav bar that looks like this. Nothing too fancy, but if you do wanna take things further, I have a video for that. Now our next objective is to design the header and give it that cool triangle shape at the bottom. We'll start by giving it some margin and padding and aligning the text to the center. That gives us a standard rectangle that looks something like this. What we wanna do is trim out part of this rectangle, so it makes that triangle shape at the bottom. The tool used to do that in CSS is the clip path property. You can think of this as putting a bunch of points around the element that you can move around. We can use the polygon function to add as many points as we want, and then each argument to this function represents a point around that header element. You'll notice that each argument contains 2 percentages. This represents where the point lives along the x y axis. So in this case, 0 0 would be the top left corner and 100% 100% would be the bottom right corner. But when you use the Clip Path property, just open up your website in Firefox and use the Clip Path tool to play around with it. If you click the icon, it will actually set up the points on the element and then you can drag them around and it will automatically update that property which you can then use in your code if you want. That takes care of our header. Now we're going to build a drop down menu using only CSS. First, we'll go into our HTML and then inside our navbar, we'll add an additional list item, but this one has a has drop down class on it. Inside that list item, we'll add a link and then an additional unordered list, which represents the drop down. That drop down will have a few drop down items inside it. Then each individual drop down item has its own link. And for each of those links, we'll provide an ID that represents the theme that we want to switch to. So in this case, an ID of light, dark, and solar. We'll need the IDs to grab these links when we get to the JavaScript in a few minutes. Our drop down menu has a position of absolute and a fixed width of 500 pixels. And we'll set the opacity to 0 by default, making it invisible until it's actually focused. We also need to set the z index greater than its parent element, which in this case will be 2. That will make it appear on top of the main nav bar that it sits inside of. We'll give it a background and a border and then we'll round out the bottom two corners by targeting them individually. Now, the actual buttons in the drop down are aligned horizontally. So we'll set the display to flex, align the items in the center, then maximize the space around the items inside that row. To preview it, I'm going to temporarily set the opacity to 1. And now you can see underneath this theme link we have this drop down menu. We can make things look a little nicer by adding a box shadow and then I'll also move the item a little bit to the left so it's more centered around the parent theme link. And, we can do that by translating along the x axis. And, that looks a lot better, but how do we open and close this drop down. We need to determine when something inside the drop down is focused, and then we'll change the opacity from 0 to 1. A transition on the parent element We'll make the opacity fade in and out when it loses focus. Now remember in the HTML, on that list item, we gave it a class of has drop down. We'll use the pseudo selector focus within to detect when a link inside that drop down has been focused. When that's the case, we'll set the opacity of the drop down to 1. Now when we go and click on the theme link, it creates focus on that link, which will cause the drop down to fade in. If we click outside of it, it loses focus and fades out. And that's how you build a clickable drop down menu using nothing but CSS. What I'm doing next is just polishing some of the drop down items. I'll have each link take up all of the available space and then I want to display a circle next to each link with the corresponding color for that theme. There's a few different ways to create circles with CSS, but one way is to target the before pseudo element. This allows you to add an element before the link itself, which in our case will just be an empty string, but we'll give that empty string a border of 2 pixels and a border radius of 50% with an equal width and height, which will give us a perfect circle. Then we'll refine the alignment and margins, and the end result should look like this. And so now that our main UI is done, the question becomes how do we dynamically change the color theme using CSS and JavaScript. Well, the first thing we should do is outline our themes. We'll target the root element and then we'll define classes for light, dark, and solar. The root element is where I like to define variables for static values that don't change. Things like colors, breakpoints, and so on. For this demo, I have 7 gray colors that are ordered from lightest to darkest. And then we'll throw in blue, purple, and yellow as well. That gives us our color scheme, but in real life you'll likely have many more colors than this. And a cool tool that you might wanna check out to generate colors automatically is colors.c0. Now that we have the color scheme, we can use them to define variables that represent different elements of the UI. Like our base background will be gray zero. So we're creating a variable that's based on another variable. And, by the way, if you've never heard of CSS Variables before in your life, make sure to check out 100 seconds of CSS Variables. We can also use our variables to build up more complex values like a linear gradient. So our nav background will be a linear gradient that goes from left to right using the variable gray 1 and the variable gray 3. And then we'll continue doing this for other variables that we plan to use on the UI like the text and the border color for example. Now, when it comes time to create a different theme like our dark theme, We can simply use the same variable names, but give them different values. Our dark theme will use the background of gray 5 instead of gray 0, mode, but the text will use gray 0 to give contrast against that background. So the takeaway here is that the brand colors always stay the same, but the way they're used changes between the different themes. But you don't necessarily have to do things that way. For example, in our solar theme, we'll override the gray colors directly to give them a more yellow green shade. This allows us to use our existing light and dark themes, but override the base colors to make them appear different. You just need to make sure to give your colors the same contrast ratio. If we go back to our website, you can see it looks exactly the same as before. Why is that? Well, we haven't actually used our variables yet. The next step is to go into our styles and use the variables that we defined in our themes. Basically, anything that had a static color before now has a variable value. Another cool trick is that you can animate the change between themes by setting a transition on the background and color properties. And I'll make the background change a little bit faster than the text color to give it sort of a cool offset effect. Now, after changing all the values in your styles, you should be able to go to the body and change the light class to dark and you should see the colors update automatically. And if you include the solar class, it should override the gray scale colors. And now we're at the point where it's time to implement some JavaScript to allow the user to change the theme dynamically. In our JavaScript code, we first need to grab all of the elements from the DOM. So we'll do that for each one based on the ID that we set in the HTML, and we'll also make a reference to the body element. Then we need to listen to the click event on each one of these buttons and run a callback function on each click. Switching between light and dark mode is pretty straightforward. We just need to replace the light theme with the dark theme. One way to do that is to look at the class list on the body, remove the light theme, and then add the dark theme. That'll work perfectly fine, but we could do this with one line of code using classList replace and replace the light theme with the dark theme. And that's the better way to go in this case because they're mutually exclusive themes. And we can do the same thing for our light button, but replace the darkness with light. And, now, if we go down to the drop down menu, you should be able to switch between light and dark mode. Now, the Solar theme works a little bit different because instead of being mutually exclusive, it's applied on top of either light or dark mode. We'll use a conditional statement to see if the body element already contains the solar class, and if so, we'll remove it. And another cool thing you can do is you can actually change the variables directly by modifying the CSS text in your JavaScript. It's not essential for this demo, but sometimes you might want to calculate colors directly in your JavaScript, in which case you could modify the CSS text directly. And as an added touch, we'll change the inner text of the Solarize button based on its state. Then we'll apply the exact opposite logic on the other side of our conditional statement. If it doesn't contain the solar class, then we'll go ahead and add it. So now we can switch between all our themes, but if the user refreshes the page, they're going to lose whatever theme they selected. Luckily, we can easily cache their selection in the browser using local storage, which is a simple key value store that's built into the browser. You can access it by simply calling local storage in your script. And the first thing we'll wanna do when our script runs is get the user's existing theme and then also determine if they are using the Solar theme or not. If there is an existing theme saved, then we'll go ahead and add that theme to the body of the document. And if local storage also has a value for the Solar theme, then we'll go ahead and add the Solar theme to the body as well. And this code will run anytime the page is refreshed or anytime the user visits the website in a different window or browser tab. And now the question becomes, how do we save these values to local storage? We can do that by calling set item where the first argument is the key or theme in this case and the second argument is the value or dark, and then apply that same operation to our light theme. When it comes to the Solar theme, we can actually just remove the is Solar property because when the user is not using Solar, we don't need that property at all. And when they are using it, we'll just set the property to true. Now, when we go to the web page and select a theme and then refresh the page, it should still apply that theme. And you can actually go into the browser console, type in local storage, and it will show you the key value pairs that are saved there. And if you type in local storage clear, it will erase those values. We've already done a lot here, but I did promise you one more thing, and that's this rainbow animation when I hover over the logo. It's really easy to do and can work on any type of image. Back in our CSS, we'll go ahead and set up a key frames animation called color rotate. It will animate from a filter property of hue rotate of 0 degrees, which is normal, and then we'll cycle through every color in the color wheel by setting the hue rotate to 360 degrees. And now, we just need to apply this animation to our logo when we hover over it. We'll set the animation property to our color rotate key frames and a duration of one second. We'll have it apply the animation in an infinite loop, and then we'll set the animation direction to rotate, which will rotate the color wheel from clockwise to counterclockwise. And now our logo has this cool rainbow effect when we hover over it. I'm gonna go ahead and wrap things up there. If this video helped you, please like and subscribe. And let me know what project you'd like to see next in the comments. Thanks for watching and I will see you in the next one.
One
one
of
of
my
my
all
all
time
time
favorite
favorite
development
development
sites
sites
is
is
Alligator.
alligator
Io.
io
So,
so
naturally,
naturally
I
i
think
think
we
we
should
should
reverse
reverse
engineer
engineer
some
some
of
of
its
its
UI.
ui
Like
like
all
all
good
good
development
development
sites,
sites
it
it
gives
gives
us
us
the
the
option
option
to
to
switch
switch
between
between
a
a
light
light
and
and
dark
dark
mode.
mode
And,
and
it
it
even
even
goes
goes
a
a
step
step
further
further
to
to
give
give
us
us
Solarize
solarize
themes
themes
as
as
well.
well
In
in
today's
today's
video,
video
you'll
you'll
learn
learn
how
how
to
to
build
build
a
a
feature
feature
like
like
this
this
from
from
scratch
scratch
using
using
CSS
css
variables
variables
and
and
and
and
a
a
little
little
bit
bit
of
of
JavaScript.
javascript
And,
and
it's
it's
actually
actually
a
a
lot
lot
easier
easier
than
than
you
you
might
might
think.
think
Along
along
the
the
way,
way
you'll
you'll
also
also
learn
learn
a
a
bunch
bunch
of
of
other
other
cool
cool
things,
things
like
like
how
how
to
to
create
create
this
this
triangle
triangle
shape
shape
with
with
CSS,
css
how
how
to
to
create
create
a
a
drop
drop
down
down
menu
menu
without
without
JavaScript
javascript
and
and
we'll
we'll
finish
finish
up
up
the
the
video
video
by
by
giving
giving
our
our
logo
logo
this
this
rainbow
rainbow
like
like
color
color
transition
transition
when
when
we
we
hover
hover
over
over
it.
it
If
if
you're
you're
new
new
here,
here
like
like
and
and
subscribe
subscribe
drive
drive
and
and
grab
grab
the
the
source
source
code
code
for
for
this
this
project
project
on
on
Fireship
fireship
IO
io
or
or
GitHub.
github
Let's
let's
start
start
by
by
taking
taking
a
a
closer
closer
look
look
at
at
what
what
we're
we're
building
building
today.
today
We
we
have
have
a
a
nav
nav
bar
bar
that's
that's
based
based
on
on
Flexbox.
flexbox
Box.
box
When
when
you
you
click
click
on
on
themes,
themes
it
it
opens
opens
a
a
drop
drop
down.
down
And
and
I'll
i'll
show
show
you
you
a
a
cool
cool
technique
technique
for
for
keeping
keeping
this
this
drop
drop
down
down
open
open
using
using
nothing
nothing
but
but
CSS.
css
So
so
no
no
JavaScript
javascript
is
is
required
required
for
for
the
the
drop
drop
down
down
itself.
itself
But
but
when
when
you
you
click
click
a
a
button
button
inside,
inside
it
it
does
does
use
use
JavaScript
javascript
to
to
change
change
the
the
CSS
css
variables
variables
in
in
the
the
page
page
to
to
update
update
the
the
theme.
theme
You'll
you'll
You'll
you'll
notice
notice
we
we
have
have
an
an
option
option
for
for
light
light
and
and
dark
dark
mode
mode
and
and
then
then
an
an
option
option
to
to
solarize,
solarize
which
which
gives
gives
us
us
a
a
variation
variation
on
on
top
top
of
of
these
these
producing
producing
a
a
total
total
of
of
4
4
different
different
color
color
schemes.
schemes
And
and
you'll
you'll
also
also
notice
notice
bit
bit
after
after
I
i
select
select
a
a
theme
theme
and
and
then
then
refresh
refresh
the
the
page,
page
that
that
theme
theme
is
is
still
still
applied.
applied
We
we
do
do
that
that
by
by
caching
caching
the
the
user's
user's
selection
selection
in
in
the
the
browser's
browser's
local
local
storage.
storage
On
on
top
top
of
of
that,
that
we'll
we'll
look
look
at
at
how
how
we
we
can
can
control
control
shapes
shapes
in
in
CSS
css
and
and
I'll
i'll
throw
throw
in
in
a
a
variety
variety
of
of
different
different
animation
animation
techniques
techniques
as
as
well.
well
Before
before
we
we
get
get
started,
started
I
i
just
just
want
want
to
to
remind
remind
you
you
that
that
we
we
move
move
pretty
pretty
quickly
quickly
on
on
mist
mist
channel,
channel
so
so
feel
feel
free
free
to
to
pause
pause
the
the
video
video
or
or
slow
slow
down
down
the
the
playback
playback
speed.
speed
And
and
if
if
you
you
want
want
to
to
jump
jump
to
to
a
a
specific
specific
feature,
feature
check
check
out
out
the
the
timestamps
timestamps
in
in
the
the
video
video
description.
description
In
in
our
our
project,
project
we
we
have
have
files
files
for
for
HTML,
html
CSS,
css
and
and
JavaScript,
javascript
all
all
of
of
which
which
are
are
currently
currently
empty.
empty
Let's
let's
start
start
things
things
off
off
in
in
the
the
HTML
html
to
to
give
give
our
our
website
website
some
some
structure.
structure
Hit
hit
exclamation
exclamation
mark
mark
tab
tab
to
to
create
create
the
the
initial
initial
HTML
html
boilerplate.
boilerplate
From
from
there,
there
I'm
i'm
using
using
a
a
custom
custom
font
font
that
that
I
i
got
got
from
from
Google,
google
then
then
I
i
set
set
up
up
the
the
style
style
sheet
sheet
by
by
typing
typing
link
link
colon
colon
CSS
css
and
and
hitting
hitting
tab,
tab
and
and
then
then
I
i
reference
reference
our
our
JavaScript
javascript
by
by
typing
typing
script
script
colon
colon
source
source
and
and
hitting
hitting
tab.
tab
Then
then
we'll
we'll
point
point
that
that
to
to
App.
app
Js,
js
and
and
we'll
we'll
make
make
sure
sure
to
to
use
use
the
the
defer
defer
note
note
so
so
the
the
script
script
loads
loads
after
after
our
our
HTML.
html
That
that
autocomplete
autocomplete
stuff
stuff
was
was
done
done
with
with
Emmet,
emmet
which
which
is
is
built
built
into
into
Versus
versus
Code.
code
If
if
you're
you're
not
not
already
already
using
using
abbreviations
abbreviations
like
like
this
this
to
to
autocomplete
autocomplete
your
your
HTML
html
you
you
definitely
definitely
should
should
be.
be
Next,
next
we'll
we'll
go
go
down
down
to
to
the
the
body
body
element
element
and
and
give
give
it
it
a
a
class
class
of
of
light.
light
You
you
can
can
think
think
of
of
this
this
as
as
our
our
default
default
theme.
theme
Currently,
currently
it
it
doesn't
doesn't
do
do
anything,
anything
but,
but
eventually,
eventually
we'll
we'll
add
add
CSS
css
variables
variables
to
to
it
it
that
that
represent
represent
the
the
light
light
theme
theme
for
for
the
the
site.
site
And
and
then
then
we'll
we'll
write
write
some
some
JavaScript
javascript
to
to
swap
swap
it
it
out
out
with
with
different
different
classes.
classes
Then
then
inside
inside
the
the
body,
body
we
we
have
have
a
a
nav
nav
bar
bar
on
on
the
the
top
top
that
that
has
has
a
a
class
class
of
of
nav
nav
bar,
bar
and
and
we
we
have
have
a
a
header
header
element
element
below
below
it,
it
which
which
is
is
where
where
our
our
logo
logo
will
will
go,
go
and
and
then
then
we
we
have
have
the
the
main
main
content
content
below
below
that,
that
which
which
just
just
contains
contains
some
some
dummy
dummy
text.
text
Our
our
top
top
navigation
navigation
bar
bar
contains
contains
an
an
unordered
unordered
list
list
that'll
that'll
be
be
a
a
flexbox
flexbox
container,
container
and
and
then
then
inside
inside
that
that
we'll
we'll
have
have
a
a
few
few
list
list
items,
items
which
which
will
will
be
be
flex
flex
items
items
inside
inside
that
that
container.
container
And,
and
eventually,
eventually
we'll
we'll
add
add
a
a
drop
drop
down
down
menu
menu
here
here
as
as
well.
well
From
from
there,
there
we'll
we'll
fill
fill
out
out
the
the
header,
header
which
which
contains
contains
an
an
image
image
tag
tag
and
and
points
points
to
to
our
our
logo
logo
PNG
png
file.
file
Feel
feel
free
free
to
to
replace
replace
that
that
image
image
with
with
anything
anything
you
you
want.
want
And
and
below
below
that,
that
we'll
we'll
use
use
an
an
h
h
one
one
tag
tag
for
for
the
the
headline,
headline
front
front
end
end
web
web
development
development
fired
fired
up.
up
And
and
then
then
we'll
we'll
use
use
a
a
paragraph
paragraph
element
element
for
for
a
a
sub
sub
headline
headline
below
below
that.
that
And
and
then
then
inside
inside
the
the
main
main
element,
element
we'll
we'll
use
use
my
my
favorite
favorite
flavor
flavor
of
of
ipsum.
ipsum
But
but
if
if
you
you
don't
don't
like
like
this
this
dummy
dummy
text,
text
there
there
are
are
all
all
kinds
kinds
of
of
different
different
ipsum
ipsum
generators
generators
out
out
there,
there
which
which
you
you
can
can
see
see
on
on
loremipsum.io.
loremipsum.io
Now
now
if
if
we
we
open
open
up
up
our
our
website
website
in
in
the
the
browser,
browser
you
you
can
can
see
see
that
that
it's
it's
currently
currently
pretty
pretty
ugly.
ugly
Let's
let's
go
go
ahead
ahead
and
and
jump
jump
into
into
the
the
CSS
css
file
file
to
to
change
change
that.
that
We
we
can
can
start
start
by
by
quickly
quickly
taking
taking
care
care
of
of
the
the
boring
boring
things,
things
like
like
setting
setting
margin
margin
and
and
padding
padding
to
to
0
0
on
on
the
the
body
body
and
and
then
then
removing
removing
the
the
default
default
list
list
style
style
for
for
our
our
navbar.
navbar
From
from
there,
there
I'll
i'll
target
target
the
the
a
a
element
element
or
or
the
the
links
links
in
in
the
the
page
page
and
and
tell
tell
them
them
to
to
use
use
the
the
current
current
color.
color
By
by
default,
default
HTML
html
links
links
are
are
an
an
ugly
ugly
blue
blue
color
color
with
with
an
an
underline.
underline
Instead
instead
of
of
that,
that
we'll
we'll
use
use
current
current
color
color
to
to
tell
tell
our
our
links
links
to
to
inherit
inherit
the
the
color
color
from
from
the
the
nearest
nearest
parent.
parent
This
this
can
can
be
be
really
really
useful
useful
when
when
combined
combined
with
with
CSS
css
variables
variables
as
as
we'll
we'll
see
see
later.
later
From
from
there,
there
we'll
we'll
create
create
our
our
NavBar.
navbar
We'll
we'll
give
give
it
it
a
a
height
height
of
of
70
70
pixels,
pixels
a
a
width
width
of
of
a
a
100%,
100%
And
and
for
for
right
right
now,
now
we'll
we'll
go
go
ahead
ahead
and
and
set
set
their
their
colors
colors
to
to
static
static
values,
values
but
but
eventually
eventually
we'll
we'll
come
come
back
back
and
and
change
change
these
these
two
two
variables.
variables
Then
then
we'll
we'll
set
set
up
up
the
the
class
class
that
that
targets
targets
the
the
unordered
unordered
list
list
element
element
in
in
the
the
navbar.
navbar
We'll
we'll
make
make
that
that
a
a
flex
flex
container,
container
align
align
the
the
items
items
in
in
the
the
center,
center
and
and
then
then
we'll
we'll
space
space
them
them
evenly
evenly
across
across
the
the
horizontal
horizontal
axis.
axis
And
and
then
then
we'll
we'll
set
set
the
the
height
height
to
to
a
a
100%,
100%
so
so
it
it
fills
fills
the
the
parent
parent
navbar.
navbar
The
the
end
end
result
result
is
is
a
a
basic
basic
nav
nav
bar
bar
that
that
looks
looks
like
like
this.
this
Nothing
nothing
too
too
fancy,
fancy
but
but
if
if
you
you
do
do
wanna
wanna
take
take
things
things
further,
further
I
i
have
have
a
a
video
video
for
for
that.
that
Now
now
our
our
next
next
objective
objective
is
is
to
to
design
design
the
the
header
header
and
and
give
give
it
it
that
that
cool
cool
triangle
triangle
shape
shape
at
at
the
the
bottom.
bottom
We'll
we'll
start
start
by
by
giving
giving
it
it
some
some
margin
margin
and
and
padding
padding
and
and
aligning
aligning
the
the
text
text
to
to
the
the
center.
center
That
that
gives
gives
us
us
a
a
standard
standard
rectangle
rectangle
that
that
looks
looks
something
something
like
like
this.
this
What
what
we
we
wanna
wanna
do
do
is
is
trim
trim
out
out
part
part
of
of
this
this
rectangle,
rectangle
so
so
it
it
makes
makes
that
that
triangle
triangle
shape
shape
at
at
the
the
bottom.
bottom
The
the
tool
tool
used
used
to
to
do
do
that
that
in
in
CSS
css
is
is
the
the
clip
clip
path
path
property.
property
You
you
can
can
think
think
of
of
this
this
as
as
putting
putting
a
a
bunch
bunch
of
of
points
points
around
around
the
the
element
element
that
that
you
you
can
can
move
move
around.
around
We
we
can
can
use
use
the
the
polygon
polygon
function
function
to
to
add
add
as
as
many
many
points
points
as
as
we
we
want,
want
and
and
then
then
each
each
argument
argument
to
to
this
this
function
function
represents
represents
a
a
point
point
around
around
that
that
header
header
element.
element
You'll
you'll
notice
notice
that
that
each
each
argument
argument
contains
contains
2
2
percentages.
percentages
This
this
represents
represents
where
where
the
the
point
point
lives
lives
along
along
the
the
x
x
y
y
axis.
axis
So
so
in
in
this
this
case,
case
0
0
0
0
would
would
be
be
the
the
top
top
left
left
corner
corner
and
and
100%
100%
100%
100%
would
would
be
be
the
the
bottom
bottom
right
right
corner.
corner
But
but
when
when
you
you
use
use
the
the
Clip
clip
Path
path
property,
property
just
just
open
open
up
up
your
your
website
website
in
in
Firefox
firefox
and
and
use
use
the
the
Clip
clip
Path
path
tool
tool
to
to
play
play
around
around
with
with
it.
it
If
if
you
you
click
click
the
the
icon,
icon
it
it
will
will
actually
actually
set
set
up
up
the
the
points
points
on
on
the
the
element
element
and
and
then
then
you
you
can
can
drag
drag
them
them
around
around
and
and
it
it
will
will
automatically
automatically
update
update
that
that
property
property
which
which
you
you
can
can
then
then
use
use
in
in
your
your
code
code
if
if
you
you
want.
want
That
that
takes
takes
care
care
of
of
our
our
header.
header
Now
now
we're
we're
going
going
to
to
build
build
a
a
drop
drop
down
down
menu
menu
using
using
only
only
CSS.
css
First,
first
we'll
we'll
go
go
into
into
our
our
HTML
html
and
and
then
then
inside
inside
our
our
navbar,
navbar
we'll
we'll
add
add
an
an
additional
additional
list
list
item,
item
but
but
this
this
one
one
has
has
a
a
has
has
drop
drop
down
down
class
class
on
on
it.
it
Inside
inside
that
that
list
list
item,
item
we'll
we'll
add
add
a
a
link
link
and
and
then
then
an
an
additional
additional
unordered
unordered
list,
list
which
which
represents
represents
the
the
drop
drop
down.
down
That
that
drop
drop
down
down
will
will
have
have
a
a
few
few
drop
drop
down
down
items
items
inside
inside
it.
it
Then
then
each
each
individual
individual
drop
drop
down
down
item
item
has
has
its
its
own
own
link.
link
And
and
for
for
each
each
of
of
those
those
links,
links
we'll
we'll
provide
provide
an
an
ID
id
that
that
represents
represents
the
the
theme
theme
that
that
we
we
want
want
to
to
switch
switch
to.
to
So
so
in
in
this
this
case,
case
an
an
ID
id
of
of
light,
light
dark,
dark
and
and
solar.
solar
We'll
we'll
need
need
the
the
IDs
ids
to
to
grab
grab
these
these
links
links
when
when
we
we
get
get
to
to
the
the
JavaScript
javascript
in
in
a
a
few
few
minutes.
minutes
Our
our
drop
drop
down
down
menu
menu
has
has
a
a
position
position
of
of
absolute
absolute
and
and
a
a
fixed
fixed
width
width
of
of
500
500
pixels.
pixels
And
and
we'll
we'll
set
set
the
the
opacity
opacity
to
to
0
0
by
by
default,
default
making
making
it
it
invisible
invisible
until
until
it's
it's
actually
actually
focused.
focused
We
we
also
also
need
need
to
to
set
set
the
the
z
z
index
index
greater
greater
than
than
its
its
parent
parent
element,
element
which
which
in
in
this
this
case
case
will
will
be
be
2.
2
That
that
will
will
make
make
it
it
appear
appear
on
on
top
top
of
of
the
the
main
main
nav
nav
bar
bar
that
that
it
it
sits
sits
inside
inside
of.
of
We'll
we'll
give
give
it
it
a
a
background
background
and
and
a
a
border
border
and
and
then
then
we'll
we'll
round
round
out
out
the
the
bottom
bottom
two
two
corners
corners
by
by
targeting
targeting
them
them
individually.
individually
Now,
now
the
the
actual
actual
buttons
buttons
in
in
the
the
drop
drop
down
down
are
are
aligned
aligned
horizontally.
horizontally
So
so
we'll
we'll
set
set
the
the
display
display
to
to
flex,
flex
align
align
the
the
items
items
in
in
the
the
center,
center
then
then
maximize
maximize
the
the
space
space
around
around
the
the
items
items
inside
inside
that
that
row.
row
To
to
preview
preview
it,
it
I'm
i'm
going
going
to
to
temporarily
temporarily
set
set
the
the
opacity
opacity
to
to
1.
1
And
and
now
now
you
you
can
can
see
see
underneath
underneath
this
this
theme
theme
link
link
we
we
have
have
this
this
drop
drop
down
down
menu.
menu
We
we
can
can
make
make
things
things
look
look
a
a
little
little
nicer
nicer
by
by
adding
adding
a
a
box
box
shadow
shadow
and
and
then
then
I'll
i'll
also
also
move
move
the
the
item
item
a
a
little
little
bit
bit
to
to
the
the
left
left
so
so
it's
it's
more
more
centered
centered
around
around
the
the
parent
parent
theme
theme
link.
link
And,
and
we
we
can
can
do
do
that
that
by
by
translating
translating
along
along
the
the
x
x
axis.
axis
And,
and
that
that
looks
looks
a
a
lot
lot
better,
better
but
but
how
how
do
do
we
we
open
open
and
and
close
close
this
this
drop
drop
down.
down
We
we
need
need
to
to
determine
determine
when
when
something
something
inside
inside
the
the
drop
drop
down
down
is
is
focused,
focused
and
and
then
then
we'll
we'll
change
change
the
the
opacity
opacity
from
from
0
0
to
to
1.
1
A
a
transition
transition
on
on
the
the
parent
parent
element
element
We'll
we'll
make
make
the
the
opacity
opacity
fade
fade
in
in
and
and
out
out
when
when
it
it
loses
loses
focus.
focus
Now
now
remember
remember
in
in
the
the
HTML,
html
on
on
that
that
list
list
item,
item
we
we
gave
gave
it
it
a
a
class
class
of
of
has
has
drop
drop
down.
down
We'll
we'll
use
use
the
the
pseudo
pseudo
selector
selector
focus
focus
within
within
to
to
detect
detect
when
when
a
a
link
link
inside
inside
that
that
drop
drop
down
down
has
has
been
been
focused.
focused
When
when
that's
that's
the
the
case,
case
we'll
we'll
set
set
the
the
opacity
opacity
of
of
the
the
drop
drop
down
down
to
to
1.
1
Now
now
when
when
we
we
go
go
and
and
click
click
on
on
the
the
theme
theme
link,
link
it
it
creates
creates
focus
focus
on
on
that
that
link,
link
which
which
will
will
cause
cause
the
the
drop
drop
down
down
to
to
fade
fade
in.
in
If
if
we
we
click
click
outside
outside
of
of
it,
it
it
it
loses
loses
focus
focus
and
and
fades
fades
out.
out
And
and
that's
that's
how
how
you
you
build
build
a
a
clickable
clickable
drop
drop
down
down
menu
menu
using
using
nothing
nothing
but
but
CSS.
css
What
what
I'm
i'm
doing
doing
next
next
is
is
just
just
polishing
polishing
some
some
of
of
the
the
drop
drop
down
down
items.
items
I'll
i'll
have
have
each
each
link
link
take
take
up
up
all
all
of
of
the
the
available
available
space
space
and
and
then
then
I
i
want
want
to
to
display
display
a
a
circle
circle
next
next
to
to
each
each
link
link
with
with
the
the
corresponding
corresponding
color
color
for
for
that
that
theme.
theme
There's
there's
a
a
few
few
different
different
ways
ways
to
to
create
create
circles
circles
with
with
CSS,
css
but
but
one
one
way
way
is
is
to
to
target
target
the
the
before
before
pseudo
pseudo
element.
element
This
this
allows
allows
you
you
to
to
add
add
an
an
element
element
before
before
the
the
link
link
itself,
itself
which
which
in
in
our
our
case
case
will
will
just
just
be
be
an
an
empty
empty
string,
string
but
but
we'll
we'll
give
give
that
that
empty
empty
string
string
a
a
border
border
of
of
2
2
pixels
pixels
and
and
a
a
border
border
radius
radius
of
of
50%
50%
with
with
an
an
equal
equal
width
width
and
and
height,
height
which
which
will
will
give
give
us
us
a
a
perfect
perfect
circle.
circle
Then
then
we'll
we'll
refine
refine
the
the
alignment
alignment
and
and
margins,
margins
and
and
the
the
end
end
result
result
should
should
look
look
like
like
this.
this
And
and
so
so
now
now
that
that
our
our
main
main
UI
ui
is
is
done,
done
the
the
question
question
becomes
becomes
how
how
do
do
we
we
dynamically
dynamically
change
change
the
the
color
color
theme
theme
using
using
CSS
css
and
and
JavaScript.
javascript
Well,
well
the
the
first
first
thing
thing
we
we
should
should
do
do
is
is
outline
outline
our
our
themes.
themes
We'll
we'll
target
target
the
the
root
root
element
element
and
and
then
then
we'll
we'll
define
define
classes
classes
for
for
light,
light
dark,
dark
and
and
solar.
solar
The
the
root
root
element
element
is
is
where
where
I
i
like
like
to
to
define
define
variables
variables
for
for
static
static
values
values
that
that
don't
don't
change.
change
Things
things
like
like
colors,
colors
breakpoints,
breakpoints
and
and
so
so
on.
on
For
for
this
this
demo,
demo
I
i
have
have
7
7
gray
gray
colors
colors
that
that
are
are
ordered
ordered
from
from
lightest
lightest
to
to
darkest.
darkest
And
and
then
then
we'll
we'll
throw
throw
in
in
blue,
blue
purple,
purple
and
and
yellow
yellow
as
as
well.
well
That
that
gives
gives
us
us
our
our
color
color
scheme,
scheme
but
but
in
in
real
real
life
life
you'll
you'll
likely
likely
have
have
many
many
more
more
colors
colors
than
than
this.
this
And
and
a
a
cool
cool
tool
tool
that
that
you
you
might
might
wanna
wanna
check
check
out
out
to
to
generate
generate
colors
colors
automatically
automatically
is
is
colors.c0.
colors.c0
Now
now
that
that
we
we
have
have
the
the
color
color
scheme,
scheme
we
we
can
can
use
use
them
them
to
to
define
define
variables
variables
that
that
represent
represent
different
different
elements
elements
of
of
the
the
UI.
ui
Like
like
our
our
base
base
background
background
will
will
be
be
gray
gray
zero.
zero
So
so
we're
we're
creating
creating
a
a
variable
variable
that's
that's
based
based
on
on
another
another
variable.
variable
And,
and
by
by
the
the
way,
way
if
if
you've
you've
never
never
heard
heard
of
of
CSS
css
Variables
variables
before
before
in
in
your
your
life,
life
make
make
sure
sure
to
to
check
check
out
out
100
100
seconds
seconds
of
of
CSS
css
Variables.
variables
We
we
can
can
also
also
use
use
our
our
variables
variables
to
to
build
build
up
up
more
more
complex
complex
values
values
like
like
a
a
linear
linear
gradient.
gradient
So
so
our
our
nav
nav
background
background
will
will
be
be
a
a
linear
linear
gradient
gradient
that
that
goes
goes
from
from
left
left
to
to
right
right
using
using
the
the
variable
variable
gray
gray
1
1
and
and
the
the
variable
variable
gray
gray
3.
3
And
and
then
then
we'll
we'll
continue
continue
doing
doing
this
this
for
for
other
other
variables
variables
that
that
we
we
plan
plan
to
to
use
use
on
on
the
the
UI
ui
like
like
the
the
text
text
and
and
the
the
border
border
color
color
for
for
example.
example
Now,
now
when
when
it
it
comes
comes
time
time
to
to
create
create
a
a
different
different
theme
theme
like
like
our
our
dark
dark
theme,
theme
We
we
can
can
simply
simply
use
use
the
the
same
same
variable
variable
names,
names
but
but
give
give
them
them
different
different
values.
values
Our
our
dark
dark
theme
theme
will
will
use
use
the
the
background
background
of
of
gray
gray
5
5
instead
instead
of
of
gray
gray
0,
0
mode,
mode
but
but
the
the
text
text
will
will
use
use
gray
gray
0
0
to
to
give
give
contrast
contrast
against
against
that
that
background.
background
So
so
the
the
takeaway
takeaway
here
here
is
is
that
that
the
the
brand
brand
colors
colors
always
always
stay
stay
the
the
same,
same
but
but
the
the
way
way
they're
they're
used
used
changes
changes
between
between
the
the
different
different
themes.
themes
But
but
you
you
don't
don't
necessarily
necessarily
have
have
to
to
do
do
things
things
that
that
way.
way
For
for
example,
example
in
in
our
our
solar
solar
theme,
theme
we'll
we'll
override
override
the
the
gray
gray
colors
colors
directly
directly
to
to
give
give
them
them
a
a
more
more
yellow
yellow
green
green
shade.
shade
This
this
allows
allows
us
us
to
to
use
use
our
our
existing
existing
light
light
and
and
dark
dark
themes,
themes
but
but
override
override
the
the
base
base
colors
colors
to
to
make
make
them
them
appear
appear
different.
different
You
you
just
just
need
need
to
to
make
make
sure
sure
to
to
give
give
your
your
colors
colors
the
the
same
same
contrast
contrast
ratio.
ratio
If
if
we
we
go
go
back
back
to
to
our
our
website,
website
you
you
can
can
see
see
it
it
looks
looks
exactly
exactly
the
the
same
same
as
as
before.
before
Why
why
is
is
that?
that
Well,
well
we
we
haven't
haven't
actually
actually
used
used
our
our
variables
variables
yet.
yet
The
the
next
next
step
step
is
is
to
to
go
go
into
into
our
our
styles
styles
and
and
use
use
the
the
variables
variables
that
that
we
we
defined
defined
in
in
our
our
themes.
themes
Basically,
basically
anything
anything
that
that
had
had
a
a
static
static
color
color
before
before
now
now
has
has
a
a
variable
variable
value.
value
Another
another
cool
cool
trick
trick
is
is
that
that
you
you
can
can
animate
animate
the
the
change
change
between
between
themes
themes
by
by
setting
setting
a
a
transition
transition
on
on
the
the
background
background
and
and
color
color
properties.
properties
And
and
I'll
i'll
make
make
the
the
background
background
change
change
a
a
little
little
bit
bit
faster
faster
than
than
the
the
text
text
color
color
to
to
give
give
it
it
sort
sort
of
of
a
a
cool
cool
offset
offset
effect.
effect
Now,
now
after
after
changing
changing
all
all
the
the
values
values
in
in
your
your
styles,
styles
you
you
should
should
be
be
able
able
to
to
go
go
to
to
the
the
body
body
and
and
change
change
the
the
light
light
class
class
to
to
dark
dark
and
and
you
you
should
should
see
see
the
the
colors
colors
update
update
automatically.
automatically
And
and
if
if
you
you
include
include
the
the
solar
solar
class,
class
it
it
should
should
override
override
the
the
gray
gray
scale
scale
colors.
colors
And
and
now
now
we're
we're
at
at
the
the
point
point
where
where
it's
it's
time
time
to
to
implement
implement
some
some
JavaScript
javascript
to
to
allow
allow
the
the
user
user
to
to
change
change
the
the
theme
theme
dynamically.
dynamically
In
in
our
our
JavaScript
javascript
code,
code
we
we
first
first
need
need
to
to
grab
grab
all
all
of
of
the
the
elements
elements
from
from
the
the
DOM.
dom
So
so
we'll
we'll
do
do
that
that
for
for
each
each
one
one
based
based
on
on
the
the
ID
id
that
that
we
we
set
set
in
in
the
the
HTML,
html
and
and
we'll
we'll
also
also
make
make
a
a
reference
reference
to
to
the
the
body
body
element.
element
Then
then
we
we
need
need
to
to
listen
listen
to
to
the
the
click
click
event
event
on
on
each
each
one
one
of
of
these
these
buttons
buttons
and
and
run
run
a
a
callback
callback
function
function
on
on
each
each
click.
click
Switching
switching
between
between
light
light
and
and
dark
dark
mode
mode
is
is
pretty
pretty
straightforward.
straightforward
We
we
just
just
need
need
to
to
replace
replace
the
the
light
light
theme
theme
with
with
the
the
dark
dark
theme.
theme
One
one
way
way
to
to
do
do
that
that
is
is
to
to
look
look
at
at
the
the
class
class
list
list
on
on
the
the
body,
body
remove
remove
the
the
light
light
theme,
theme
and
and
then
then
add
add
the
the
dark
dark
theme.
theme
That'll
that'll
work
work
perfectly
perfectly
fine,
fine
but
but
we
we
could
could
do
do
this
this
with
with
one
one
line
line
of
of
code
code
using
using
classList
classlist
replace
replace
and
and
replace
replace
the
the
light
light
theme
theme
with
with
the
the
dark
dark
theme.
theme
And
and
that's
that's
the
the
better
better
way
way
to
to
go
go
in
in
this
this
case
case
because
because
they're
they're
mutually
mutually
exclusive
exclusive
themes.
themes
And
and
we
we
can
can
do
do
the
the
same
same
thing
thing
for
for
our
our
light
light
button,
button
but
but
replace
replace
the
the
darkness
darkness
with
with
light.
light
And,
and
now,
now
if
if
we
we
go
go
down
down
to
to
the
the
drop
drop
down
down
menu,
menu
you
you
should
should
be
be
able
able
to
to
switch
switch
between
between
light
light
and
and
dark
dark
mode.
mode
Now,
now
the
the
Solar
solar
theme
theme
works
works
a
a
little
little
bit
bit
different
different
because
because
instead
instead
of
of
being
being
mutually
mutually
exclusive,
exclusive
it's
it's
applied
applied
on
on
top
top
of
of
either
either
light
light
or
or
dark
dark
mode.
mode
We'll
we'll
use
use
a
a
conditional
conditional
statement
statement
to
to
see
see
if
if
the
the
body
body
element
element
already
already
contains
contains
the
the
solar
solar
class,
class
and
and
if
if
so,
so
we'll
we'll
remove
remove
it.
it
And
and
another
another
cool
cool
thing
thing
you
you
can
can
do
do
is
is
you
you
can
can
actually
actually
change
change
the
the
variables
variables
directly
directly
by
by
modifying
modifying
the
the
CSS
css
text
text
in
in
your
your
JavaScript.
javascript
It's
it's
not
not
essential
essential
for
for
this
this
demo,
demo
but
but
sometimes
sometimes
you
you
might
might
want
want
to
to
calculate
calculate
colors
colors
directly
directly
in
in
your
your
JavaScript,
javascript
in
in
which
which
case
case
you
you
could
could
modify
modify
the
the
CSS
css
text
text
directly.
directly
And
and
as
as
an
an
added
added
touch,
touch
we'll
we'll
change
change
the
the
inner
inner
text
text
of
of
the
the
Solarize
solarize
button
button
based
based
on
on
its
its
state.
state
Then
then
we'll
we'll
apply
apply
the
the
exact
exact
opposite
opposite
logic
logic
on
on
the
the
other
other
side
side
of
of
our
our
conditional
conditional
statement.
statement
If
if
it
it
doesn't
doesn't
contain
contain
the
the
solar
solar
class,
class
then
then
we'll
we'll
go
go
ahead
ahead
and
and
add
add
it.
it
So
so
now
now
we
we
can
can
switch
switch
between
between
all
all
our
our
themes,
themes
but
but
if
if
the
the
user
user
refreshes
refreshes
the
the
page,
page
they're
they're
going
going
to
to
lose
lose
whatever
whatever
theme
theme
they
they
selected.
selected
Luckily,
luckily
we
we
can
can
easily
easily
cache
cache
their
their
selection
selection
in
in
the
the
browser
browser
using
using
local
local
storage,
storage
which
which
is
is
a
a
simple
simple
key
key
value
value
store
store
that's
that's
built
built
into
into
the
the
browser.
browser
You
you
can
can
access
access
it
it
by
by
simply
simply
calling
calling
local
local
storage
storage
in
in
your
your
script.
script
And
and
the
the
first
first
thing
thing
we'll
we'll
wanna
wanna
do
do
when
when
our
our
script
script
runs
runs
is
is
get
get
the
the
user's
user's
existing
existing
theme
theme
and
and
then
then
also
also
determine
determine
if
if
they
they
are
are
using
using
the
the
Solar
solar
theme
theme
or
or
not.
not
If
if
there
there
is
is
an
an
existing
existing
theme
theme
saved,
saved
then
then
we'll
we'll
go
go
ahead
ahead
and
and
add
add
that
that
theme
theme
to
to
the
the
body
body
of
of
the
the
document.
document
And
and
if
if
local
local
storage
storage
also
also
has
has
a
a
value
value
for
for
the
the
Solar
solar
theme,
theme
then
then
we'll
we'll
go
go
ahead
ahead
and
and
add
add
the
the
Solar
solar
theme
theme
to
to
the
the
body
body
as
as
well.
well
And
and
this
this
code
code
will
will
run
run
anytime
anytime
the
the
page
page
is
is
refreshed
refreshed
or
or
anytime
anytime
the
the
user
user
visits
visits
the
the
website
website
in
in
a
a
different
different
window
window
or
or
browser
browser
tab.
tab
And
and
now
now
the
the
question
question
becomes,
becomes
how
how
do
do
we
we
save
save
these
these
values
values
to
to
local
local
storage?
storage
We
we
can
can
do
do
that
that
by
by
calling
calling
set
set
item
item
where
where
the
the
first
first
argument
argument
is
is
the
the
key
key
or
or
theme
theme
in
in
this
this
case
case
and
and
the
the
second
second
argument
argument
is
is
the
the
value
value
or
or
dark,
dark
and
and
then
then
apply
apply
that
that
same
same
operation
operation
to
to
our
our
light
light
theme.
theme
When
when
it
it
comes
comes
to
to
the
the
Solar
solar
theme,
theme
we
we
can
can
actually
actually
just
just
remove
remove
the
the
is
is
Solar
solar
property
property
because
because
when
when
the
the
user
user
is
is
not
not
using
using
Solar,
solar
we
we
don't
don't
need
need
that
that
property
property
at
at
all.
all
And
and
when
when
they
they
are
are
using
using
it,
it
we'll
we'll
just
just
set
set
the
the
property
property
to
to
true.
true
Now,
now
when
when
we
we
go
go
to
to
the
the
web
web
page
page
and
and
select
select
a
a
theme
theme
and
and
then
then
refresh
refresh
the
the
page,
page
it
it
should
should
still
still
apply
apply
that
that
theme.
theme
And
and
you
you
can
can
actually
actually
go
go
into
into
the
the
browser
browser
console,
console
type
type
in
in
local
local
storage,
storage
and
and
it
it
will
will
show
show
you
you
the
the
key
key
value
value
pairs
pairs
that
that
are
are
saved
saved
there.
there
And
and
if
if
you
you
type
type
in
in
local
local
storage
storage
clear,
clear
it
it
will
will
erase
erase
those
those
values.
values
We've
we've
already
already
done
done
a
a
lot
lot
here,
here
but
but
I
i
did
did
promise
promise
you
you
one
one
more
more
thing,
thing
and
and
that's
that's
this
this
rainbow
rainbow
animation
animation
when
when
I
i
hover
hover
over
over
the
the
logo.
logo
It's
it's
really
really
easy
easy
to
to
do
do
and
and
can
can
work
work
on
on
any
any
type
type
of
of
image.
image
Back
back
in
in
our
our
CSS,
css
we'll
we'll
go
go
ahead
ahead
and
and
set
set
up
up
a
a
key
key
frames
frames
animation
animation
called
called
color
color
rotate.
rotate
It
it
will
will
animate
animate
from
from
a
a
filter
filter
property
property
of
of
hue
hue
rotate
rotate
of
of
0
0
degrees,
degrees
which
which
is
is
normal,
normal
and
and
then
then
we'll
we'll
cycle
cycle
through
through
every
every
color
color
in
in
the
the
color
color
wheel
wheel
by
by
setting
setting
the
the
hue
hue
rotate
rotate
to
to
360
360
degrees.
degrees
And
and
now,
now
we
we
just
just
need
need
to
to
apply
apply
this
this
animation
animation
to
to
our
our
logo
logo
when
when
we
we
hover
hover
over
over
it.
it
We'll
we'll
set
set
the
the
animation
animation
property
property
to
to
our
our
color
color
rotate
rotate
key
key
frames
frames
and
and
a
a
duration
duration
of
of
one
one
second.
second
We'll
we'll
have
have
it
it
apply
apply
the
the
animation
animation
in
in
an
an
infinite
infinite
loop,
loop
and
and
then
then
we'll
we'll
set
set
the
the
animation
animation
direction
direction
to
to
rotate,
rotate
which
which
will
will
rotate
rotate
the
the
color
color
wheel
wheel
from
from
clockwise
clockwise
to
to
counterclockwise.
counterclockwise
And
and
now
now
our
our
logo
logo
has
has
this
this
cool
cool
rainbow
rainbow
effect
effect
when
when
we
we
hover
hover
over
over
it.
it
I'm
i'm
gonna
gonna
go
go
ahead
ahead
and
and
wrap
wrap
things
things
up
up
there.
there
If
if
this
this
video
video
helped
helped
you,
you
please
please
like
like
and
and
subscribe.
subscribe
And
and
let
let
me
me
know
know
what
what
project
project
you'd
you'd
like
like
to
to
see
see
next
next
in
in
the
the
comments.
comments
Thanks
thanks
for
for
watching
watching
and
and
I
i
will
will
see
see
you
you
in
in
the
the
next
next
one.
one
success
The speakers discuss how to use CSS variables and JavaScript to create a header, body, and main content for a website. They also demonstrate how to use the werentipsum.io tool to design the header and create a triangle shape at the bottom. The speaker explains how to use the clip path property and tool to update a header, create a drop down menu, and use the tool to update a header and create a drop down menu using nothing but CSS. They also explain how to use the colors and variables to create a desired pattern and how to override the colors and themes in a website. Finally, they provide a link to a code that automatically changes the colors and themes.
CSS Theme Switcher by Reverse-Engineering Alligator.io
One of my all time favorite development sites is Alligator. Io. So, naturally, I think we should reverse engineer some of its UI. Like all good development sites, it gives us the option to switch between a light and dark mode. And, it even goes a step further to give us Solarize themes as well. In today's video, you'll learn how to build a feature like this from scratch using CSS variables and and a little bit of JavaScript. And, it's actually a lot easier than you might think. Along the way, you'll also learn a bunch of other cool things, like how to create this triangle shape with CSS, how to create a drop down menu without JavaScript and we'll finish up the video by giving our logo this rainbow like color transition when we hover over it. If you're new here, like and subscribe drive and grab the source code for this project on Fireship IO or GitHub. Let's start by taking a closer look at what we're building today. We have a nav bar that's based on Flexbox. Box. When you click on themes, it opens a drop down. And I'll show you a cool technique for keeping this drop down open using nothing but CSS. So no JavaScript is required for the drop down itself. But when you click a button inside, it does use JavaScript to change the CSS variables in the page to update the theme. You'll You'll notice we have an option for light and dark mode and then an option to solarize, which gives us a variation on top of these producing a total of 4 different color schemes. And you'll also notice bit after I select a theme and then refresh the page, that theme is still applied. We do that by caching the user's selection in the browser's local storage. On top of that, we'll look at how we can control shapes in CSS and I'll throw in a variety of different animation techniques as well. Before we get started, I just want to remind you that we move pretty quickly on mist channel, so feel free to pause the video or slow down the playback speed. And if you want to jump to a specific feature, check out the timestamps in the video description. In our project, we have files for HTML, CSS, and JavaScript, all of which are currently empty. Let's start things off in the HTML to give our website some structure. Hit exclamation mark tab to create the initial HTML boilerplate. From there, I'm using a custom font that I got from Google, then I set up the style sheet by typing link colon CSS and hitting tab, and then I reference our JavaScript by typing script colon source and hitting tab. Then we'll point that to App. Js, and we'll make sure to use the defer note so the script loads after our HTML. That autocomplete stuff was done with Emmet, which is built into Versus Code. If you're not already using abbreviations like this to autocomplete your HTML you definitely should be. Next, we'll go down to the body element and give it a class of light. You can think of this as our default theme. Currently, it doesn't do anything, but, eventually, we'll add CSS variables to it that represent the light theme for the site. And then we'll write some JavaScript to swap it out with different classes. Then inside the body, we have a nav bar on the top that has a class of nav bar, and we have a header element below it, which is where our logo will go, and then we have the main content below that, which just contains some dummy text. Our top navigation bar contains an unordered list that'll be a flexbox container, and then inside that we'll have a few list items, which will be flex items inside that container. And, eventually, we'll add a drop down menu here as well. From there, we'll fill out the header, which contains an image tag and points to our logo PNG file. Feel free to replace that image with anything you want. And below that, we'll use an h one tag for the headline, front end web development fired up. And then we'll use a paragraph element for a sub headline below that. And then inside the main element, we'll use my favorite flavor of ipsum. But if you don't like this dummy text, there are all kinds of different ipsum generators out there, which you can see on loremipsum.io. Now if we open up our website in the browser, you can see that it's currently pretty ugly. Let's go ahead and jump into the CSS file to change that. We can start by quickly taking care of the boring things, like setting margin and padding to 0 on the body and then removing the default list style for our navbar. From there, I'll target the a element or the links in the page and tell them to use the current color. By default, HTML links are an ugly blue color with an underline. Instead of that, we'll use current color to tell our links to inherit the color from the nearest parent. This can be really useful when combined with CSS variables as we'll see later. From there, we'll create our NavBar. We'll give it a height of 70 pixels, a width of a 100%, And for right now, we'll go ahead and set their colors to static values, but eventually we'll come back and change these two variables. Then we'll set up the class that targets the unordered list element in the navbar. We'll make that a flex container, align the items in the center, and then we'll space them evenly across the horizontal axis. And then we'll set the height to a 100%, so it fills the parent navbar. The end result is a basic nav bar that looks like this. Nothing too fancy, but if you do wanna take things further, I have a video for that. Now our next objective is to design the header and give it that cool triangle shape at the bottom. We'll start by giving it some margin and padding and aligning the text to the center. That gives us a standard rectangle that looks something like this. What we wanna do is trim out part of this rectangle, so it makes that triangle shape at the bottom. The tool used to do that in CSS is the clip path property. You can think of this as putting a bunch of points around the element that you can move around. We can use the polygon function to add as many points as we want, and then each argument to this function represents a point around that header element. You'll notice that each argument contains 2 percentages. This represents where the point lives along the x y axis. So in this case, 0 0 would be the top left corner and 100% 100% would be the bottom right corner. But when you use the Clip Path property, just open up your website in Firefox and use the Clip Path tool to play around with it. If you click the icon, it will actually set up the points on the element and then you can drag them around and it will automatically update that property which you can then use in your code if you want. That takes care of our header. Now we're going to build a drop down menu using only CSS. First, we'll go into our HTML and then inside our navbar, we'll add an additional list item, but this one has a has drop down class on it. Inside that list item, we'll add a link and then an additional unordered list, which represents the drop down. That drop down will have a few drop down items inside it. Then each individual drop down item has its own link. And for each of those links, we'll provide an ID that represents the theme that we want to switch to. So in this case, an ID of light, dark, and solar. We'll need the IDs to grab these links when we get to the JavaScript in a few minutes. Our drop down menu has a position of absolute and a fixed width of 500 pixels. And we'll set the opacity to 0 by default, making it invisible until it's actually focused. We also need to set the z index greater than its parent element, which in this case will be 2. That will make it appear on top of the main nav bar that it sits inside of. We'll give it a background and a border and then we'll round out the bottom two corners by targeting them individually. Now, the actual buttons in the drop down are aligned horizontally. So we'll set the display to flex, align the items in the center, then maximize the space around the items inside that row. To preview it, I'm going to temporarily set the opacity to 1. And now you can see underneath this theme link we have this drop down menu. We can make things look a little nicer by adding a box shadow and then I'll also move the item a little bit to the left so it's more centered around the parent theme link. And, we can do that by translating along the x axis. And, that looks a lot better, but how do we open and close this drop down. We need to determine when something inside the drop down is focused, and then we'll change the opacity from 0 to 1. A transition on the parent element We'll make the opacity fade in and out when it loses focus. Now remember in the HTML, on that list item, we gave it a class of has drop down. We'll use the pseudo selector focus within to detect when a link inside that drop down has been focused. When that's the case, we'll set the opacity of the drop down to 1. Now when we go and click on the theme link, it creates focus on that link, which will cause the drop down to fade in. If we click outside of it, it loses focus and fades out. And that's how you build a clickable drop down menu using nothing but CSS. What I'm doing next is just polishing some of the drop down items. I'll have each link take up all of the available space and then I want to display a circle next to each link with the corresponding color for that theme. There's a few different ways to create circles with CSS, but one way is to target the before pseudo element. This allows you to add an element before the link itself, which in our case will just be an empty string, but we'll give that empty string a border of 2 pixels and a border radius of 50% with an equal width and height, which will give us a perfect circle. Then we'll refine the alignment and margins, and the end result should look like this. And so now that our main UI is done, the question becomes how do we dynamically change the color theme using CSS and JavaScript. Well, the first thing we should do is outline our themes. We'll target the root element and then we'll define classes for light, dark, and solar. The root element is where I like to define variables for static values that don't change. Things like colors, breakpoints, and so on. For this demo, I have 7 gray colors that are ordered from lightest to darkest. And then we'll throw in blue, purple, and yellow as well. That gives us our color scheme, but in real life you'll likely have many more colors than this. And a cool tool that you might wanna check out to generate colors automatically is colors.c0. Now that we have the color scheme, we can use them to define variables that represent different elements of the UI. Like our base background will be gray zero. So we're creating a variable that's based on another variable. And, by the way, if you've never heard of CSS Variables before in your life, make sure to check out 100 seconds of CSS Variables. We can also use our variables to build up more complex values like a linear gradient. So our nav background will be a linear gradient that goes from left to right using the variable gray 1 and the variable gray 3. And then we'll continue doing this for other variables that we plan to use on the UI like the text and the border color for example. Now, when it comes time to create a different theme like our dark theme, We can simply use the same variable names, but give them different values. Our dark theme will use the background of gray 5 instead of gray 0, mode, but the text will use gray 0 to give contrast against that background. So the takeaway here is that the brand colors always stay the same, but the way they're used changes between the different themes. But you don't necessarily have to do things that way. For example, in our solar theme, we'll override the gray colors directly to give them a more yellow green shade. This allows us to use our existing light and dark themes, but override the base colors to make them appear different. You just need to make sure to give your colors the same contrast ratio. If we go back to our website, you can see it looks exactly the same as before. Why is that? Well, we haven't actually used our variables yet. The next step is to go into our styles and use the variables that we defined in our themes. Basically, anything that had a static color before now has a variable value. Another cool trick is that you can animate the change between themes by setting a transition on the background and color properties. And I'll make the background change a little bit faster than the text color to give it sort of a cool offset effect. Now, after changing all the values in your styles, you should be able to go to the body and change the light class to dark and you should see the colors update automatically. And if you include the solar class, it should override the gray scale colors. And now we're at the point where it's time to implement some JavaScript to allow the user to change the theme dynamically. In our JavaScript code, we first need to grab all of the elements from the DOM. So we'll do that for each one based on the ID that we set in the HTML, and we'll also make a reference to the body element. Then we need to listen to the click event on each one of these buttons and run a callback function on each click. Switching between light and dark mode is pretty straightforward. We just need to replace the light theme with the dark theme. One way to do that is to look at the class list on the body, remove the light theme, and then add the dark theme. That'll work perfectly fine, but we could do this with one line of code using classList replace and replace the light theme with the dark theme. And that's the better way to go in this case because they're mutually exclusive themes. And we can do the same thing for our light button, but replace the darkness with light. And, now, if we go down to the drop down menu, you should be able to switch between light and dark mode. Now, the Solar theme works a little bit different because instead of being mutually exclusive, it's applied on top of either light or dark mode. We'll use a conditional statement to see if the body element already contains the solar class, and if so, we'll remove it. And another cool thing you can do is you can actually change the variables directly by modifying the CSS text in your JavaScript. It's not essential for this demo, but sometimes you might want to calculate colors directly in your JavaScript, in which case you could modify the CSS text directly. And as an added touch, we'll change the inner text of the Solarize button based on its state. Then we'll apply the exact opposite logic on the other side of our conditional statement. If it doesn't contain the solar class, then we'll go ahead and add it. So now we can switch between all our themes, but if the user refreshes the page, they're going to lose whatever theme they selected. Luckily, we can easily cache their selection in the browser using local storage, which is a simple key value store that's built into the browser. You can access it by simply calling local storage in your script. And the first thing we'll wanna do when our script runs is get the user's existing theme and then also determine if they are using the Solar theme or not. If there is an existing theme saved, then we'll go ahead and add that theme to the body of the document. And if local storage also has a value for the Solar theme, then we'll go ahead and add the Solar theme to the body as well. And this code will run anytime the page is refreshed or anytime the user visits the website in a different window or browser tab. And now the question becomes, how do we save these values to local storage? We can do that by calling set item where the first argument is the key or theme in this case and the second argument is the value or dark, and then apply that same operation to our light theme. When it comes to the Solar theme, we can actually just remove the is Solar property because when the user is not using Solar, we don't need that property at all. And when they are using it, we'll just set the property to true. Now, when we go to the web page and select a theme and then refresh the page, it should still apply that theme. And you can actually go into the browser console, type in local storage, and it will show you the key value pairs that are saved there. And if you type in local storage clear, it will erase those values. We've already done a lot here, but I did promise you one more thing, and that's this rainbow animation when I hover over the logo. It's really easy to do and can work on any type of image. Back in our CSS, we'll go ahead and set up a key frames animation called color rotate. It will animate from a filter property of hue rotate of 0 degrees, which is normal, and then we'll cycle through every color in the color wheel by setting the hue rotate to 360 degrees. And now, we just need to apply this animation to our logo when we hover over it. We'll set the animation property to our color rotate key frames and a duration of one second. We'll have it apply the animation in an infinite loop, and then we'll set the animation direction to rotate, which will rotate the color wheel from clockwise to counterclockwise. And now our logo has this cool rainbow effect when we hover over it. I'm gonna go ahead and wrap things up there. If this video helped you, please like and subscribe. And let me know what project you'd like to see next in the comments. Thanks for watching and I will see you in the next one.
The speakers discuss how to use CSS variables and JavaScript to create a header, body, and main content for a website. They also demonstrate how to use the werentipsum.io tool to design the header and create a triangle shape at the bottom. The speaker explains how to use the clip path property and tool to update a header, create a drop down menu, and use the tool to update a header and create a drop down menu using nothing but CSS. They also explain how to use the colors and variables to create a desired pattern and how to override the colors and themes in a website. Finally, they provide a link to a code that automatically changes the colors and themes.

        [INST]
        You are youtuber called Fireship you make engaging high-intensity and entertaining coding tutorials and tech news. 
        you covers a wide range of topics relevant to programmers, aiming to help them learn and improve their skills quickly.
        
        Given the title of the video : CSS Theme Switcher by Reverse-Engineering Alligator.io 
        and a small summary : The speakers discuss how to use CSS variables and JavaScript to create a header, body, and main content for a website. They also demonstrate how to use the werentipsum.io tool to design the header and create a triangle shape at the bottom. The speaker explains how to use the clip path property and tool to update a header, create a drop down menu, and use the tool to update a header and create a drop down menu using nothing but CSS. They also explain how to use the colors and variables to create a desired pattern and how to override the colors and themes in a website. Finally, they provide a link to a code that automatically changes the colors and themes.
        [/INST]
        
        Generate the video : One of my all time favorite development sites is Alligator. Io. So, naturally, I think we should reverse engineer some of its UI. Like all good development sites, it gives us the option to switch between a light and dark mode. And, it even goes a step further to give us Solarize themes as well. In today's video, you'll learn how to build a feature like this from scratch using CSS variables and and a little bit of JavaScript. And, it's actually a lot easier than you might think. Along the way, you'll also learn a bunch of other cool things, like how to create this triangle shape with CSS, how to create a drop down menu without JavaScript and we'll finish up the video by giving our logo this rainbow like color transition when we hover over it. If you're new here, like and subscribe drive and grab the source code for this project on Fireship IO or GitHub. Let's start by taking a closer look at what we're building today. We have a nav bar that's based on Flexbox. Box. When you click on themes, it opens a drop down. And I'll show you a cool technique for keeping this drop down open using nothing but CSS. So no JavaScript is required for the drop down itself. But when you click a button inside, it does use JavaScript to change the CSS variables in the page to update the theme. You'll You'll notice we have an option for light and dark mode and then an option to solarize, which gives us a variation on top of these producing a total of 4 different color schemes. And you'll also notice bit after I select a theme and then refresh the page, that theme is still applied. We do that by caching the user's selection in the browser's local storage. On top of that, we'll look at how we can control shapes in CSS and I'll throw in a variety of different animation techniques as well. Before we get started, I just want to remind you that we move pretty quickly on mist channel, so feel free to pause the video or slow down the playback speed. And if you want to jump to a specific feature, check out the timestamps in the video description. In our project, we have files for HTML, CSS, and JavaScript, all of which are currently empty. Let's start things off in the HTML to give our website some structure. Hit exclamation mark tab to create the initial HTML boilerplate. From there, I'm using a custom font that I got from Google, then I set up the style sheet by typing link colon CSS and hitting tab, and then I reference our JavaScript by typing script colon source and hitting tab. Then we'll point that to App. Js, and we'll make sure to use the defer note so the script loads after our HTML. That autocomplete stuff was done with Emmet, which is built into Versus Code. If you're not already using abbreviations like this to autocomplete your HTML you definitely should be. Next, we'll go down to the body element and give it a class of light. You can think of this as our default theme. Currently, it doesn't do anything, but, eventually, we'll add CSS variables to it that represent the light theme for the site. And then we'll write some JavaScript to swap it out with different classes. Then inside the body, we have a nav bar on the top that has a class of nav bar, and we have a header element below it, which is where our logo will go, and then we have the main content below that, which just contains some dummy text. Our top navigation bar contains an unordered list that'll be a flexbox container, and then inside that we'll have a few list items, which will be flex items inside that container. And, eventually, we'll add a drop down menu here as well. From there, we'll fill out the header, which contains an image tag and points to our logo PNG file. Feel free to replace that image with anything you want. And below that, we'll use an h one tag for the headline, front end web development fired up. And then we'll use a paragraph element for a sub headline below that. And then inside the main element, we'll use my favorite flavor of ipsum. But if you don't like this dummy text, there are all kinds of different ipsum generators out there, which you can see on loremipsum.io. Now if we open up our website in the browser, you can see that it's currently pretty ugly. Let's go ahead and jump into the CSS file to change that. We can start by quickly taking care of the boring things, like setting margin and padding to 0 on the body and then removing the default list style for our navbar. From there, I'll target the a element or the links in the page and tell them to use the current color. By default, HTML links are an ugly blue color with an underline. Instead of that, we'll use current color to tell our links to inherit the color from the nearest parent. This can be really useful when combined with CSS variables as we'll see later. From there, we'll create our NavBar. We'll give it a height of 70 pixels, a width of a 100%, And for right now, we'll go ahead and set their colors to static values, but eventually we'll come back and change these two variables. Then we'll set up the class that targets the unordered list element in the navbar. We'll make that a flex container, align the items in the center, and then we'll space them evenly across the horizontal axis. And then we'll set the height to a 100%, so it fills the parent navbar. The end result is a basic nav bar that looks like this. Nothing too fancy, but if you do wanna take things further, I have a video for that. Now our next objective is to design the header and give it that cool triangle shape at the bottom. We'll start by giving it some margin and padding and aligning the text to the center. That gives us a standard rectangle that looks something like this. What we wanna do is trim out part of this rectangle, so it makes that triangle shape at the bottom. The tool used to do that in CSS is the clip path property. You can think of this as putting a bunch of points around the element that you can move around. We can use the polygon function to add as many points as we want, and then each argument to this function represents a point around that header element. You'll notice that each argument contains 2 percentages. This represents where the point lives along the x y axis. So in this case, 0 0 would be the top left corner and 100% 100% would be the bottom right corner. But when you use the Clip Path property, just open up your website in Firefox and use the Clip Path tool to play around with it. If you click the icon, it will actually set up the points on the element and then you can drag them around and it will automatically update that property which you can then use in your code if you want. That takes care of our header. Now we're going to build a drop down menu using only CSS. First, we'll go into our HTML and then inside our navbar, we'll add an additional list item, but this one has a has drop down class on it. Inside that list item, we'll add a link and then an additional unordered list, which represents the drop down. That drop down will have a few drop down items inside it. Then each individual drop down item has its own link. And for each of those links, we'll provide an ID that represents the theme that we want to switch to. So in this case, an ID of light, dark, and solar. We'll need the IDs to grab these links when we get to the JavaScript in a few minutes. Our drop down menu has a position of absolute and a fixed width of 500 pixels. And we'll set the opacity to 0 by default, making it invisible until it's actually focused. We also need to set the z index greater than its parent element, which in this case will be 2. That will make it appear on top of the main nav bar that it sits inside of. We'll give it a background and a border and then we'll round out the bottom two corners by targeting them individually. Now, the actual buttons in the drop down are aligned horizontally. So we'll set the display to flex, align the items in the center, then maximize the space around the items inside that row. To preview it, I'm going to temporarily set the opacity to 1. And now you can see underneath this theme link we have this drop down menu. We can make things look a little nicer by adding a box shadow and then I'll also move the item a little bit to the left so it's more centered around the parent theme link. And, we can do that by translating along the x axis. And, that looks a lot better, but how do we open and close this drop down. We need to determine when something inside the drop down is focused, and then we'll change the opacity from 0 to 1. A transition on the parent element We'll make the opacity fade in and out when it loses focus. Now remember in the HTML, on that list item, we gave it a class of has drop down. We'll use the pseudo selector focus within to detect when a link inside that drop down has been focused. When that's the case, we'll set the opacity of the drop down to 1. Now when we go and click on the theme link, it creates focus on that link, which will cause the drop down to fade in. If we click outside of it, it loses focus and fades out. And that's how you build a clickable drop down menu using nothing but CSS. What I'm doing next is just polishing some of the drop down items. I'll have each link take up all of the available space and then I want to display a circle next to each link with the corresponding color for that theme. There's a few different ways to create circles with CSS, but one way is to target the before pseudo element. This allows you to add an element before the link itself, which in our case will just be an empty string, but we'll give that empty string a border of 2 pixels and a border radius of 50% with an equal width and height, which will give us a perfect circle. Then we'll refine the alignment and margins, and the end result should look like this. And so now that our main UI is done, the question becomes how do we dynamically change the color theme using CSS and JavaScript. Well, the first thing we should do is outline our themes. We'll target the root element and then we'll define classes for light, dark, and solar. The root element is where I like to define variables for static values that don't change. Things like colors, breakpoints, and so on. For this demo, I have 7 gray colors that are ordered from lightest to darkest. And then we'll throw in blue, purple, and yellow as well. That gives us our color scheme, but in real life you'll likely have many more colors than this. And a cool tool that you might wanna check out to generate colors automatically is colors.c0. Now that we have the color scheme, we can use them to define variables that represent different elements of the UI. Like our base background will be gray zero. So we're creating a variable that's based on another variable. And, by the way, if you've never heard of CSS Variables before in your life, make sure to check out 100 seconds of CSS Variables. We can also use our variables to build up more complex values like a linear gradient. So our nav background will be a linear gradient that goes from left to right using the variable gray 1 and the variable gray 3. And then we'll continue doing this for other variables that we plan to use on the UI like the text and the border color for example. Now, when it comes time to create a different theme like our dark theme, We can simply use the same variable names, but give them different values. Our dark theme will use the background of gray 5 instead of gray 0, mode, but the text will use gray 0 to give contrast against that background. So the takeaway here is that the brand colors always stay the same, but the way they're used changes between the different themes. But you don't necessarily have to do things that way. For example, in our solar theme, we'll override the gray colors directly to give them a more yellow green shade. This allows us to use our existing light and dark themes, but override the base colors to make them appear different. You just need to make sure to give your colors the same contrast ratio. If we go back to our website, you can see it looks exactly the same as before. Why is that? Well, we haven't actually used our variables yet. The next step is to go into our styles and use the variables that we defined in our themes. Basically, anything that had a static color before now has a variable value. Another cool trick is that you can animate the change between themes by setting a transition on the background and color properties. And I'll make the background change a little bit faster than the text color to give it sort of a cool offset effect. Now, after changing all the values in your styles, you should be able to go to the body and change the light class to dark and you should see the colors update automatically. And if you include the solar class, it should override the gray scale colors. And now we're at the point where it's time to implement some JavaScript to allow the user to change the theme dynamically. In our JavaScript code, we first need to grab all of the elements from the DOM. So we'll do that for each one based on the ID that we set in the HTML, and we'll also make a reference to the body element. Then we need to listen to the click event on each one of these buttons and run a callback function on each click. Switching between light and dark mode is pretty straightforward. We just need to replace the light theme with the dark theme. One way to do that is to look at the class list on the body, remove the light theme, and then add the dark theme. That'll work perfectly fine, but we could do this with one line of code using classList replace and replace the light theme with the dark theme. And that's the better way to go in this case because they're mutually exclusive themes. And we can do the same thing for our light button, but replace the darkness with light. And, now, if we go down to the drop down menu, you should be able to switch between light and dark mode. Now, the Solar theme works a little bit different because instead of being mutually exclusive, it's applied on top of either light or dark mode. We'll use a conditional statement to see if the body element already contains the solar class, and if so, we'll remove it. And another cool thing you can do is you can actually change the variables directly by modifying the CSS text in your JavaScript. It's not essential for this demo, but sometimes you might want to calculate colors directly in your JavaScript, in which case you could modify the CSS text directly. And as an added touch, we'll change the inner text of the Solarize button based on its state. Then we'll apply the exact opposite logic on the other side of our conditional statement. If it doesn't contain the solar class, then we'll go ahead and add it. So now we can switch between all our themes, but if the user refreshes the page, they're going to lose whatever theme they selected. Luckily, we can easily cache their selection in the browser using local storage, which is a simple key value store that's built into the browser. You can access it by simply calling local storage in your script. And the first thing we'll wanna do when our script runs is get the user's existing theme and then also determine if they are using the Solar theme or not. If there is an existing theme saved, then we'll go ahead and add that theme to the body of the document. And if local storage also has a value for the Solar theme, then we'll go ahead and add the Solar theme to the body as well. And this code will run anytime the page is refreshed or anytime the user visits the website in a different window or browser tab. And now the question becomes, how do we save these values to local storage? We can do that by calling set item where the first argument is the key or theme in this case and the second argument is the value or dark, and then apply that same operation to our light theme. When it comes to the Solar theme, we can actually just remove the is Solar property because when the user is not using Solar, we don't need that property at all. And when they are using it, we'll just set the property to true. Now, when we go to the web page and select a theme and then refresh the page, it should still apply that theme. And you can actually go into the browser console, type in local storage, and it will show you the key value pairs that are saved there. And if you type in local storage clear, it will erase those values. We've already done a lot here, but I did promise you one more thing, and that's this rainbow animation when I hover over the logo. It's really easy to do and can work on any type of image. Back in our CSS, we'll go ahead and set up a key frames animation called color rotate. It will animate from a filter property of hue rotate of 0 degrees, which is normal, and then we'll cycle through every color in the color wheel by setting the hue rotate to 360 degrees. And now, we just need to apply this animation to our logo when we hover over it. We'll set the animation property to our color rotate key frames and a duration of one second. We'll have it apply the animation in an infinite loop, and then we'll set the animation direction to rotate, which will rotate the color wheel from clockwise to counterclockwise. And now our logo has this cool rainbow effect when we hover over it. I'm gonna go ahead and wrap things up there. If this video helped you, please like and subscribe. And let me know what project you'd like to see next in the comments. Thanks for watching and I will see you in the next one.
        