JavaScript Toggle Dark Mode Tutorial

Introduction

• Demo: Clicking an icon toggles background between dark and light mode.

Project Setup

• Files Created: index.html, styles.css, script.js
• Link: CSS and JS files linked in HTML.

HTML

• Created a title: JavaScript Toggle Dark Mode.
• Used Bootstrap icons (link provided in the video description).
• Icon Used: Sun (search and copy from Bootstrap Icons).
• Code Snippet:

  <i id="toggle-icon" class="bi-brightness-high"></i>
  

CSS Styling

• Body:
  • margin: 0;
  • padding: 0;
  • font-family: Arial;
• Icon (i tag):
  • font-size: 15px;
  • cursor: pointer;
  • position: absolute; top: 15px; left: 15px; transform: translate(-15%, -15%);
• Heading (h1 tag):
  • text-align: center;
  • font-size: 3em;

JavaScript

• Variables:
  • const toggle = document.getElementById('toggle-icon');
  • const body = document.querySelector('body');
• Event Listener: Added click event listener to icon.
  • Toggles between two icons and background colors.
• If-Else Conditions:
  • If bi-brightness-high is the class, change to bi-moon icon and switch to dark mode.
  • Else, revert to light mode.
• Code Snippet:

  toggle.addEventListener('click', function() {
    if (toggle.classList.contains('bi-brightness-high')) {
      toggle.classList.remove('bi-brightness-high');
      toggle.classList.add('bi-moon');
      body.style.backgroundColor = 'black';
      body.style.color = 'white';
    } else {
      toggle.classList.remove('bi-moon');
      toggle.classList.add('bi-brightness-high');
      body.style.backgroundColor = 'white';
      body.style.color = 'black';
    }
    body.style.transition = 'all 2s';
  });
  

Conclusion

• Summary: The tutorial covers toggling dark and light modes using JavaScript.
• Main Steps: Setting up HTML, CSS, and JS, adding event listeners, and implementing If-Else logic for toggle.

Final Remarks

• Encouragement: Follow along and practice to get comfortable with toggling techniques.
• Future Projects: Stay tuned for more JavaScript projects.