Dark mode html code with icon - Printable Version

Code:
<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Dark Mode Toggle</title>

  <style>

    :root {

      --bg-color: #ffffff;

      --text-color: #000000;

    }



    body {

      background-color: var(--bg-color);

      color: var(--text-color);

      margin: 0;

      font-family: Arial, sans-serif;

      transition: background-color 0.3s, color 0.3s;

    }



    .dark-mode {

      --bg-color: #121212;

      --text-color: #ffffff;

    }



    .toggle-icon {

      position: fixed;

      top: 20px;

      right: 20px;

      cursor: pointer;

      font-size: 24px;

      background: var(--bg-color);

      border: 2px solid var(--text-color);

      border-radius: 50%;

      padding: 10px;

      transition: background 0.3s, border-color 0.3s;

    }



    .toggle-icon:hover {

      background: var(--text-color);

      color: var(--bg-color);

    }

  </style>

</head>

<body>

  <div class="toggle-icon" id="darkModeToggle" title="Toggle Dark Mode">?</div>



  <script>

    const toggleIcon = document.getElementById('darkModeToggle');

    toggleIcon.addEventListener('click', () => {

      document.body.classList.toggle('dark-mode');

      // Change the icon based on mode

      toggleIcon.textContent = document.body.classList.contains('dark-mode') ? '☀️' : '?';

    });

  </script>

</body>

</html>