Dark Mode Toggle Using HTML CSS & JavaScript | codeitwise

 In this article, we are going to learn to design and create dark mode toggle using HTML, CSS and JavaScript.

Most of the websites you come across nowadays have this dark mode toggle option. So as a web developer you must know and practice creating this dark mode toggle. So that's what we are going to do today, we will create a basic dark toggle mode page using HTML CSS and JavaScript. This is one of the web development projects that you must consider doing. Its going to be a awesome projects so lets start. Below is the screenshot of the completed project i.e., that's how our project is going to look like. 

Preview:

For this project I will suggest you to use VS Code as it is free, built on open source and a powerful source code editor that runs on Windows, Linus and macOs. There are hundreds of extensions that makes vs code a all-in-one editor. There are also lots of features which will help you while writing a code. If you do not have VS Code Installed on your system then you may find this article helpful -

📌 A Step By Step Guide on How to install vs code in windows 

Create three new files for html css and javascript seperately and link them all in html file. HTML is the skeleton of our website, css adds design to the contents of HTML file and JavaScript adds the functionality in our clock.

Now lets code dark mode toggle using HTML CSS and JavaScript.

HTML Code(index.html)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link href="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap-switch-button@1.1.0/css/bootstrap-switch-button.min.css"
        rel="stylesheet">
    <script
        src="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap-switch-button@1.1.0/dist/bootstrap-switch-button.min.js"></script>
    <link rel="stylesheet" href="style.css">
    <title>dark mode demo</title>
</head>

<body>
    <h1>codeitwise</h1>
    <p>
        Dark Mode Toggle using Html CSS & Javascript
    </p>
    <h3 id="DarkModetext">Dark Mode is</h3>
    <input id="switch-trigger" type="checkbox" data-toggle="switchbutton">
    <button class="btn btn-success" onclick="clickApiOn()">Turn On</button>
    <button class="btn btn-danger" onclick="clickApiOff()">Turn Off</button>
    <script src="script.js"></script>
    
</body>

</html>

CSS Code (style.css)

body {
    padding: 25px;
    background-color: white;
    color: black;
    font-size: 25px;
}

.dark-mode {
    background-color: black;
    color: white;
}

.light-mode {
    background-color: white;
    color: black;
}

JavaScript Code (script.js)

function clickApiOn() {
    var element = document.body;
    var content = document.getElementById("DarkModetext");
    element.className = "dark-mode";
    document.getElementById('switch-trigger').switchButton('on');
}
function clickApiOff() {
    var element = document.body;
    var content = document.getElementById("DarkModetext");
    element.className = "light-mode";
    document.getElementById('switch-trigger').switchButton('off');
}

More like this

• Simple Calculator

• Digital Stop Watch

• Digital Clock 

• Age Calculator 

• Text to Speech AI 

More web development projects