Facebook SDK

Create Dark and Light Mode Toggle Switch with CSS and JavaScript

Hello Coders, In this article we are going to learn how to create a Dark Mode theme and Light Mode theme toggle switch using HTML CSS and JavaScript.

Why Dark Mode?

Many users today love the websites which supports dark mode. Even the android recently introduced dark mode. Light Mode actually was painful for eyes, Turning everything to dark mode allows users to read or interact with our websites or applications more easier. 

Dark mode is now the most important feature that every website should have to provide best user experience. So in this tutorial we are going to learn how to create a switch which toggles between light mode to dark mode. Users can either choose the website's light mode or dark mode based on their requirements.

What are CSS Variables ?

In this project we will be using CSS variables. CSS variables can be used to hold a value if it is being used in the website more repeatedly. For example, if we are using a hex value of a color and it is being used 100 times in our website. Remembering and typing the hex code 100 times will be every tedious and difficult. So, we will create css variable which holds the hex code of that color, and we can use that variable wherever we want without having to remember the hex color code.

One more use case of css variables is, For example consider twitter, What if twitter one day decides that they need to change their main colors to all red. They need to change all the colors right by searching and finding them. Instead if we create variables and use them throughout the website. If there is a need of changing colors all we have to do is change the value of the variable. That's it.

You may also like : 

I have provided a step by step video tutorial as well as all the source code of this project which you can download by clicking on the download button at the bottom of this article.

Light Mode to Dark Mode Toggle Switch using CSS and JavaScript | Video Tutorial

In the video tutorial, I have shown how to build Light to Dark Mode switch toggle step by step. If you are complete beginner, Watch the video above to build this JavaScript project.

Light Mode to Dark Mode Toggle Switch using CSS and JavaScript | Source Code

Here are the HTML CSS and JavaScript Source Code of this project. Start with html and then design the project with css and make it working with JavaScript.

How do I create Dark Mode Theme in HTML? Free HTML Source Code
Create an index.html file. Add the basic structure of html by adding html, head, title, body tags. We will be using two icons i.e Sun Icon and moon icon from the font awesome. I have provided the import code of font awesome cdn below between head tag. Copy the below HTML codes.

How do I design Dark Mode theme in CSS? Free CSS Source Code
Create a styles.css file and link the css file to our html document. We will be using a custom font from the google fonts that is Nunito Font. I have provided the import code of this font below in the css code. Copy the below CSS Codes.

How do I create Light Mode to Dark Mode theme toggle switch in JavaScript? Free JavaScript Source Code
Create and script.js file and also link this javascript  file to our html document. Below is the JavaScript Code for this project.

This is what it should look after completing building this project.

Create Dark and Light Mode Toggle Switch with CSS and JavaScript

Download Source code of Light Mode to Dark Mode toggle switch using html css and JavaScript.

Download Code Files

Post a Comment

Previous Post Next Post