Login at ShediWeb Forum

Shedi · 01-09-2025, 02:05 AM

Here's an HTML code snippet for implementing a dark mode toggle with an icon:

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>

Features:
Light & Dark Mode: The background and text colors switch between light and dark modes.
Toggle Icon: Displays a moon ? icon for dark mode and a sun ☀️ icon for light mode.
CSS Variables: Used for easy theme management.
Smooth Transition: Animations for a seamless mode switch.
How to Use:

Copy and paste the code into an index.html file.
Open it in a browser, and you'll see a clickable icon at the top right to toggle dark mode.