components/theme-toggle.js

class ThemeToggle extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        .toggle-container {
          display: flex;
          align-items: center;
          gap: 8px;
        }
        .toggle-switch {
          position: relative;
          display: inline-block;
          width: 60px;
          height: 30px;
        }
        .toggle-switch input {
          opacity: 0;
          width: 0;
          height: 0;
        }
        .slider {
          position: absolute;
          cursor: pointer;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background: linear-gradient(to right, #141414, #333);
          transition: .4s;
          border-radius: 34px;
        }
        .slider:before {
          position: absolute;
          content: "";
          height: 22px;
          width: 22px;
          left: 4px;
          bottom: 4px;
          background-color: white;
          transition: .4s;
          border-radius: 50%;
        }
        input:checked + .slider {
          background: linear-gradient(to right, #e50914, #b20710);
        }
        input:checked + .slider:before {
          transform: translateX(30px);
        }
        .icon {
          font-size: 1.2rem;
          color: #e50914;
        }
        .dark .icon {
          color: #fff;
        }
      </style>
      <div class="toggle-container">
        <label class="toggle-switch">
          <input type="checkbox" id="theme-toggle">
          <span class="slider"></span>
        </label>
        <span class="icon">🎬</span>
      </div>
    `;

    const toggle = this.shadowRoot.getElementById('theme-toggle');
    toggle.addEventListener('change', () => {
      document.body.classList.toggle('dark');
      localStorage.setItem('theme', document.body.classList.contains('dark') ? 'dark' : 'light');
    });

    if (localStorage.getItem('theme') === 'dark') {
      document.body.classList.add('dark');
      toggle.checked = true;
    }
  }
}
customElements.define('theme-toggle', ThemeToggle);