Easy Guide To Dark Mode Toggle Using HTML, CSS and JavaScript.
Published: 2021-05-24 08:36:22



In this post, I'll show you how to use HTML, CSS, and a little JavaScript to add a light to dark mode toggle. I'll walk you through the entire coding process, including how I use a checkbox and a label tag to construct the layout of the elements in HTML. Then I write all of the functionality for monitoring when the input is tested, and its status in JavaScript. Finally, I use CSS to add styling transition effects and a::before pseudo-element to reflect the toggle.

**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.

[![root.png](https://i.postimg.cc/RZ4X3JWC/root.png)](https://postimg.cc/xcpKhCGB)

I then added a different class for the dark mode.

[![dark-mode.png](https://i.postimg.cc/cCGfVPY1/dark-mode.png)](https://postimg.cc/gX4whSN1)

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`. The `label` will be for the `input`, so under the for, write the same name as the `id` and `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. 

[![tog.png](https://i.postimg.cc/C54n95SJ/tog.png)](https://postimg.cc/wR7Bm6ts)

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.

**Step 2: The JavaScript Code**

The next step will be to change the colour of the website, for that, follow a few steps. In your JavaScript, you will monitor if the `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.

**Setting up JavaScript Variables**

First create a variable that will reference this `input type of checkbox`.

[![variable.png](https://i.postimg.cc/mrFzB8TP/variable.png)](https://postimg.cc/GBdhjP8R)

**JavaScript add EventListener**

Afterwards add a click `eventListener` to the `input`. 

[![listener.png](https://i.postimg.cc/8PKjvq5F/listener.png)](https://postimg.cc/3dG85f27)

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.

[![checkmode.png](https://i.postimg.cc/prVLhZMY/checkmode.png)](https://postimg.cc/MM4Sg1Tv)

**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 `darkModeOff`.

[![dark.png](https://i.postimg.cc/Zn0hzDhg/dark.png)](https://postimg.cc/n98Wv2rY)

If the `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 `dark-mode`.

[![on.png](https://i.postimg.cc/bN2K0nYQ/on.png)](https://postimg.cc/vcbqbcVB)

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 `remove` the `dark-mode` class.

[![off.png](https://i.postimg.cc/XYStsvXt/off.png)](https://postimg.cc/YhRX9M6x)

If the `checkbox` is checked, add the `darkModeOn` function, and if it is unchecked, which is the else state, add the `darkModeOff` function.

[![if.png](https://i.postimg.cc/6679Sy5Q/if.png)](https://postimg.cc/Th6M52b8)

The hardest part is over! All that's left is to add the CSS styling to the checkbox.

![giphy](https://i.giphy.com/media/l3q2Z6S6n38zjPswo/giphy.gif)

**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 `font-weight` of `700` for the dark mode text. Also, use one of the colour variables to set the dark mode text colour. 

[![css1.png](https://i.postimg.cc/nLcx1LPp/css1.png)](https://postimg.cc/WdKxNsVH)
**Creating the ball class in the HTML**

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 `label`.

[![label.png](https://i.postimg.cc/3x95WTJ6/label.png)](https://postimg.cc/68711FZL)

**Styling the label**

First, reference the `label` class. Set a particular `width` and `height`, next set a `border-radius` of `30px`, and use one of the colour variables to set the `background colour`, then set the `position` to `absolute`. Finally, you'll want the `cursor` to be a `pointer` so that it looks interactive.

[![css2.png](https://i.postimg.cc/yd2zByY8/css2.png)](https://postimg.cc/Ppb7QZwg)

**Styling the ball**

Add that toggle; you will reference the class of `ball`. And again, set a particular `width` and `height` for this, set the `background colour` using one of the colour variables, `position` it to be `absolute`, set a `border-radius` of `50%`, set a `margin-top` and `left` positioning. Also, add a `cursor` `pointer` to this. Finally, add a `transition` because you will add an animation here as well.

[![ball.png](https://i.postimg.cc/BQGdg6jk/ball.png)](https://postimg.cc/t72SR9tN)

**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 `absolute`, `display` `inline-block`, `width` to `90px`, and finally fix the `left` and `top` positioning.

[![before.png](https://i.postimg.cc/KYVWgvX9/before.png)](https://postimg.cc/PLWygH5Z)

**Toggle animation**

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 `transform`, therefore `translate` it in the  `X `direction by `3em`.

[![checked.png](https://i.postimg.cc/FF0674TZ/checked.png)](https://postimg.cc/145BjLhn)

Finally reference the `checkbox id` and set it to `display none`. 

[![final.png](https://i.postimg.cc/qvDb9M7k/final.png)](https://postimg.cc/dhdjCFdX)

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.

{% codepen https://codepen.io/brian-dot-hub/pen/dyvpbRE %}