Learn How To Make Dark Mode On Website | Dark Mode, Dark Theme Website Design Using HTML CSS and JavaScript Step by Step

❤️ SUBSCRIBE: https://goo.gl/tTFmPb

Watch This video to make website design:
👉 https://www.youtube.com/watch?v=NWViu1EPFN0

Download Icons:
https://drive.google.com/file/d/1luGpVOJhekRCZ479DWn9-pfmx4GuR1oj/view?usp=sharing

In this video we will create light mode and dark mode switching option on website using HTML CSS and JavaScript. We will use CSS variables to change theme color from one place. after that we will add JavaScript that will change the theme color by clicking on icon, it will also change the icon from moon icon to the sun icon. after watching this video you can convert any website into dark mode or night mode or dark theme website.

Part 2: https://youtu.be/2j_kBqpFK-g

———————————————————-

❤️ Complete website Using HTML and CSS
✔️ 8 Complete website step by step
✔️ Source Code Download
✔️ 76 Lectures, 12 Hours Video
✔️ Course Completion certificate
👉 https://easytutorialspro.com/go/course/

————————————-
Recommended Videos:

HTML and CSS For Beginners
► https://www.youtube.com/watch?v=GAZVvpjxYQY

Login and Register with Database connectivity:
► https://www.youtube.com/watch?v=NXAHkqiIepc

Make Contact form using HTML CSS PHP
► https://www.youtube.com/watch?v=Iv93yjdvkWI

Make Form With Password hide and display toggle:
► https://www.youtube.com/watch?v=NomcZddqBfs

Make login and registration form with Transition:
► https://www.youtube.com/watch?v=L5WWrGMsnpw

Make a full website using HTML and CSS
► https://www.youtube.com/watch?v=lBfshkPlMW8

————————————-
Best hosting up to 60% off (coupon- EASYTUTORIALS)
👉 https://easytutorialspro.com/go/hostgator/

Affordable hosting up to 91% (coupon- EASYTUTORIALS)
👉 https://easytutorialspro.com/go/hostinger/

My recommended tools and tutorials
👉 https://easytutorialspro.com/
————————————-

◼️ Source code link is shared in community post for all my coding videos exclusively for channel members (only channel members can see)
Join Channel Membership:
► https://www.youtube.com/channel/UCkjoHfkLEy7ZT4bA2myJ8xA/join

————————————-
image credit:
http://pexels.com/
https://www.pexels.com/

————————————-
Like – Follow & Subscribe us:

◼️ YouTube: https://goo.gl/tTFmPb
◼️ Facebook: https://goo.gl/qv7tEQ
◼️ Twitter: https://twitter.com/ItsAvinashKr
◼️ Instagram: https://instagram.com/iamavinashkr/

source

20 Comments

  9. I've made a script running dark and light mode using a font-awesome icons

    FOR HTML

    <i class="fas fa-moon" id="icon"></i>
    <i class="fas fa-sun" id="icon2"></i>

    SCRIPT

    <script>
    var icon = document.getElementById("icon");
    var icon2 = document.getElementById("icon2");
    icon2.style.display = 'none';

    icon.onclick = function(){
    document.body.classList.toggle("dark-theme")
    if(document.body.classList.contains("dark-theme")){
    icon.style.display = 'none';
    icon2.style.display = 'inline-block';
    }
    }
    icon2.onclick = function(){
    document.body.classList.toggle("dark-theme")
    icon2.style.display = 'none';
    icon.style.display = 'inline-block';

    }
    </script>

Leave A Reply

Please enter your comment!
Please enter your name here