animated light and dark mode using html css

Light and Dark Mode Using HTML, CSS, and JavaScript

by

Hi Guys, I am back with another fantastic project in this project I used HTML, CSS, and a bit of JavaScript. This project is a Toggle Dark and Light Mode.

NOTE: To stay informed about my exciting new projects, join our WhatsApp and Telegram community and be part of the conversation.”

Join Our WhatsApp Community
Join Our Telegram Channel

I also share a complete source code with my readers and followers it is free of cost, not any subscription to get the source code of this project. You can download these code files and use them as you want for free.

Recently I created a Mobile Icon Navigation Menu using HTML, CSS, and a little bit of JavaScript. I also share this source code in the blog post here you can check this Mobile App Icon Menu.

Toggle Dark and Light Mode

Dark and Light mode is a feature that allows users to switch between two different color schemes or themes on a website, application, or device.

Dark mode presents a darker color palette, typically with black or dark gray backgrounds and lighter text, which can be easier on the eyes, especially in low-light conditions. It also reduces the emission of blue light, which is known to affect sleep patterns and cause eye strain.

animated light and dark mode using html css

Light mode, on the other hand, features a brighter color scheme with a light or white background and darker text. This mode is often the default setting for most websites and applications.

The toggle switch allows users to switch between these two modes based on their preferences or specific needs. It provides flexibility and customization options to enhance the user experience and accommodate individual preferences for readability and visual comfort.

About This Project

The Coding Pakistan blog website embarked on this project with a noble aim: to provide cost-free assistance to students who are delving into the realm of programming languages and learning the ropes of web development technologies.

This initiative encompasses a wide range of valuable resources, covering essential languages such as HTML, CSS, JavaScript, and advanced frameworks like React.js and Next.js.

Created byCoding Pakistan
Languages HTML / CSS & JavaScript
Source CodeGitHub
PreviewTake Preview

How To Create a Toggle Dark and Light Mode HTML, CSS & JavaScript

There are some steps to create this type of Toggle Dark and Light Mode using HTML, CSS, and JavaScript that are given below.

  1. The first step is to create one folder.
  2. Open this folder in Vs Code Editor and create three files HTML, CSS, and JavaScript
  3. Make sure the HTML file extension is (.html), the CSS file extension will be (.css) and the JavaScript file extension is (.js)
  4. After creating files, you link a CSS file with an HTML file with the help of this line code. (<link rel=”stylesheet” href=”style.css”>)
  5. Also, link the JavaScript file with the HTML file using this line of code <script src=”script.js”></script>
  6. The last step is copying and pasting the given code into your files.

Toggle Dark and Light Mode – Source Code

HTML FILE

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Created by codingpakistan.com -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Animated Light and Dark Mode</title>
    <link rel="stylesheet" href="stylce.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
</head>
<body>
    <i class="bi bi-sun-fill" id="toggle"></i>
</body>
<script src="script.js"></script>
</html>

CSS FILE

body{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #499cfe;
    color: #fff;
}
i{
    position: absolute;
    font-size: 100px;
    cursor: pointer;
}

JavaScript FILE

const toggle=document.getElementById('toggle');
const body=document.querySelector('body')
toggle.addEventListener('click',function(){
    this.classList.toggle('bi-moon-fill')
    if(this.classList.toggle('bi-sun-fill')){
        body.style.background="#499cfe"
        body.style.color="white"
        body.style.transition="2s"
    }
    else{
        body.style.background="#1d1664"
        body.style.color="yellow"
        body.style.transition="2s"
    }
})

You Might Like This

Video Tutorial – Animated Light and Dark Mode

If you’re having trouble understanding this code and want to learn more about it, please watch this video and consider subscribing to this YouTube channel for similar videos in the future.

Leave a Comment