svg color change example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>SVG Theme Toggle</title>
  <style>
    body {
      margin: 2rem;
      font-family: sans-serif;
      transition: background-color 0.3s, color 0.3s;
    }

    .theme-light {
      background-color: white;
      color: black;
    }

    .theme-dark {
      background-color: #121212;
      color: white;
    }

    .icon {
      width: 50px;
      height: 25px;
      color: inherit;
    }

    #theme-toggle {
      display: none;
    }

    .toggle-label {
      display: inline-block;
      cursor: pointer;
      padding: 0.5rem 1rem;
      background-color: #ccc;
      border-radius: 0.5rem;
      user-select: none;
      margin-bottom: 1rem;
    }

    #theme-toggle:checked + .theme-wrapper {
      --theme: dark;
    }

    .theme-wrapper {
      --theme: light;
    }

    .theme-wrapper {
      all: unset;
      display: block;
    }

    .theme-wrapper[style*="--theme: dark"] {
      background-color: #121212;
      color: white;
    }

    .theme-wrapper[style*="--theme: light"] {
      background-color: white;
      color: black;
    }

    .theme-wrapper[style*="--theme: dark"] .icon {
      color: white;
    }

    .theme-wrapper[style*="--theme: light"] .icon {
      color: black;
    }
  </style>
</head>
<body>
  <input type="checkbox" id="theme-toggle" />

  <label for="theme-toggle" class="toggle-label">Toggle Theme</label>

  <div class="theme-wrapper" id="theme-container" style="--theme: light">
    <h1>SVG Fill Color with Manual Toggle</h1>

    <div class="icon">
      <svg width="50" height="25" viewBox="0 0 50 25" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
        <path d="M0,0 L50,0 L25,25 Z" />
      </svg>
    </div>

    <p>Click the toggle button above to switch between light and dark themes.</p>
  </div>

  <script>
    const toggle = document.getElementById('theme-toggle');
    const container = document.getElementById('theme-container');

    toggle.addEventListener('change', () => {
      container.style.setProperty('--theme', toggle.checked ? 'dark' : 'light');
    });
  </script>
</body>
</html>