Step 1: HTML & CSS code
I already have all of the website's code in place, as well as some styling. I declared all of the colour variables for the light mode under root in the CSS.
I then added a different class for the dark mode.
Afterwards, I added a toggle to the page that, when it's clicked, applies the dark mode class to the body.
To do that, first, go to the HTML code, and under the
div tag with the class of
toggle, add a new
div and set the class to
dark mode; basically, this is the dark and light mode container. Under that class, create an
input type checkbox and set the class and id to
checkbox to reference the
input. Then add a
label will be for the
input, so under the for, write the same name as the
class for the
input so that when you click on the
checkbox to activate it, you can also click on the
label to activate it. This will be an added advantage in your code.
Afterwards, you'll need to add some styling to this, but for now, get the functionality first then you can add some styling to it so that it looks a little bit better. So right now, you have an
input and a
label and your
dark-mode identified in the CSS as a different class.
checkbox is tapped, and if it is, you want to check which state the
checkbox is in. If the
checkbox is checked, the dark mode should turn on, and if it is not checked, the light mode should be visible.
First create a variable that will reference this
input type of checkbox.
Afterwards add a click
eventListener to the
When it is clicked, the
checkbox should basically check its own status to know if it's checked or unchecked, then create a function for that called
checkMode. The function will check which state the checkbox is in. If it is checked, the
dark-mode class will be enabled, and if it's unchecked, the
dark-mode class will be removed. For that, use a conditional statement.
Creating the dark mode on and off functions.
First, you will create functions to add the
dark-mode class. If it is checked, create a function and call it
darkModeOn, and if it is unchecked, create a function and call it
input is checked, assign the
dark-mode class to the
body, to overrule the root's light colour styles. This will
add a class to the
body, and the name of the class is
The off function is almost similar. For the function of
darkModeOff again, you want to reference that body, but in this case, you want to
checkbox is checked, add the
darkModeOn function, and if it is unchecked, which is the else state, add the
The hardest part is over! All that's left is to add the CSS styling to the checkbox.
Step 3: CSS styling
First, reference the
darkmode class which basically houses the entire checkbox.
Styling the darkmode container
The first step will be to write the
display flex, then
align items to the
centre. Afterwards, apply a
font size of
16px and a
700 for the dark mode text. Also, use one of the colour variables to set the dark mode text colour.
The next step will be to add some styling to the
label. In the
label tag, you want a toggle that looks like it is moving backwards and forwards. So create a
div and add a ball class; this will represent the actual toggle that will move backwards and forwards. For that
label, add a class of
Styling the label
First, reference the
label class. Set a particular
height, next set a
30px, and use one of the colour variables to set the
background colour, then set the
absolute. Finally, you'll want the
cursor to be a
pointer so that it looks interactive.
Styling the ball
Add that toggle; you will reference the class of
ball. And again, set a particular
height for this, set the
background colour using one of the colour variables,
position it to be
absolute, set a
50%, set a
left positioning. Also, add a
pointer to this. Finally, add a
transition because you will add an animation here as well.
Adding text before the toggle icon
Now add a before property to show the Dark mode text. So you will use the
label class then add a
before property. The content of it will be Dark mode. Set the
position to be
90px, and finally fix the
So now you want to verify the state of the
checkbox and apply some styling to the toggle. Use the
checkbox id so that you can verify when it is checked. When it is checked, you want it to affect the sibling element, so use the tilde sign then reference the
ball class. You now want this element to
translate it in the
Finally reference the
checkbox id and set it to
And that's it! You've created a light and dark mode switch that works perfectly. It's easy and fast. I hope you found this tutorial useful. Feel free to comment and explore what types of tutorials or examples you'd like to see more of.