markmarionne/powershell-ai-coder-buddy

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        }10        .toggle-switch {11          position: relative;12          display: inline-block;13          width: 60px;14          height: 34px;15          margin: 0 0.5rem;16        }17        .toggle-switch input {18          opacity: 0;19          width: 0;20          height: 0;21        }22        .slider {23          position: absolute;24          cursor: pointer;25          top: 0;26          left: 0;27          right: 0;28          bottom: 0;29          background-color: #ccc;30          transition: .4s;31          border-radius: 34px;32        }33        .slider:before {34          position: absolute;35          content: "";36          height: 26px;37          width: 26px;38          left: 4px;39          bottom: 4px;40          background-color: white;41          transition: .4s;42          border-radius: 50%;43        }44        input:checked + .slider {45          background-color: #3b82f6;46        }47        input:checked + .slider:before {48          transform: translateX(26px);49        }50        .icon {51          width: 20px;52          height: 20px;53        }54      </style>55      <div class="toggle-container">56        <i data-feather="sun" class="icon text-yellow-400"></i>57        <label class="toggle-switch">58          <input type="checkbox">59          <span class="slider"></span>60        </label>61        <i data-feather="moon" class="icon text-blue-200"></i>62      </div>63    `;64 65    const toggle = this.shadowRoot.querySelector('input');66    toggle.addEventListener('change', this.toggleDarkMode.bind(this));67 68    // Initialize based on user preference69    if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {70      toggle.checked = true;71      document.documentElement.classList.add('dark');72    }73 74    feather.replace();75  }76 77  toggleDarkMode(e) {78    if (e.target.checked) {79      document.documentElement.classList.add('dark');80      localStorage.setItem('darkMode', 'enabled');81    } else {82      document.documentElement.classList.remove('dark');83      localStorage.setItem('darkMode', 'disabled');84    }85  }86}87 88customElements.define('dark-mode-toggle', DarkModeToggle);