firasx/algorithm-playground

1class DarkModeToggle extends HTMLElement {2  connectedCallback() {3    this.attachShadow({ mode: 'open' });4    this.shadowRoot.innerHTML = `5      <style>6        .toggle-container {7          display: flex;8          align-items: center;9          gap: 0.5rem;10        }11        .toggle {12          position: relative;13          width: 50px;14          height: 24px;15          border-radius: 12px;16          background: var(--toggle-bg, #4b5563);17          cursor: pointer;18          transition: background 0.3s;19        }20        .toggle-knob {21          position: absolute;22          top: 2px;23          left: 2px;24          width: 20px;25          height: 20px;26          border-radius: 50%;27          background: white;28          transition: transform 0.3s;29        }30        .dark .toggle-knob {31          transform: translateX(26px);32        }33        .icon {34          width: 18px;35          height: 18px;36          color: currentColor;37        }38      </style>39      <div class="toggle-container">40        <i data-feather="moon" class="icon"></i>41        <div class="toggle" id="toggle">42          <div class="toggle-knob"></div>43        </div>44        <i data-feather="sun" class="icon"></i>45      </div>46    `;47 48    this.toggle = this.shadowRoot.getElementById('toggle');49    this.toggle.addEventListener('click', this.toggleDarkMode.bind(this));50    this.loadDarkModePreference();51    feather.replace();52  }53 54  toggleDarkMode() {55    document.documentElement.classList.toggle('dark');56    const isDark = document.documentElement.classList.contains('dark');57    localStorage.setItem('darkMode', isDark);58    this.updateToggleState(isDark);59  }60 61  loadDarkModePreference() {62    const darkMode = localStorage.getItem('darkMode') === 'true' || 63                    (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches);64    if (darkMode) {65      document.documentElement.classList.add('dark');66    }67    this.updateToggleState(darkMode);68  }69 70  updateToggleState(isDark) {71    const knob = this.shadowRoot.querySelector('.toggle-knob');72    const toggle = this.shadowRoot.querySelector('.toggle');73    if (isDark) {74      toggle.classList.add('dark');75      toggle.style.setProperty('--toggle-bg', '#7e22ce');76    } else {77      toggle.classList.remove('dark');78      toggle.style.setProperty('--toggle-bg', '#4b5563');79    }80  }81}82customElements.define('darkmode-toggle', DarkModeToggle);