Spaces:
Running
Running
| class ThemeToggle extends HTMLElement { | |
| connectedCallback() { | |
| this.attachShadow({ mode: 'open' }); | |
| this.shadowRoot.innerHTML = ` | |
| <style> | |
| .toggle-container { | |
| position: fixed; | |
| top: 1rem; | |
| right: 1rem; | |
| z-index: 1000; | |
| } | |
| .toggle-btn { | |
| background: var(--tw-gradient-to); | |
| border: none; | |
| border-radius: 50%; | |
| width: 2.5rem; | |
| height: 2.5rem; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); | |
| } | |
| .toggle-btn:hover { | |
| transform: scale(1.1); | |
| } | |
| .toggle-btn:focus { | |
| outline: none; | |
| ring: 2px solid rgba(59, 130, 246, 0.5); | |
| } | |
| .icon { | |
| width: 1.25rem; | |
| height: 1.25rem; | |
| color: white; | |
| } | |
| </style> | |
| <div class="toggle-container"> | |
| <button class="toggle-btn bg-gray-800 dark:bg-yellow-400"> | |
| <span class="icon"> | |
| <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path id="sun-icon" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" /> | |
| <path id="moon-icon" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" style="display: none;" /> | |
| </svg> | |
| </span> | |
| </button> | |
| </div> | |
| `; | |
| this.button = this.shadowRoot.querySelector('.toggle-btn'); | |
| this.sunIcon = this.shadowRoot.querySelector('#sun-icon'); | |
| this.moonIcon = this.shadowRoot.querySelector('#moon-icon'); | |
| this.button.addEventListener('click', () => this.toggleTheme()); | |
| this.initTheme(); | |
| } | |
| initTheme() { | |
| const savedTheme = localStorage.getItem('theme') || 'light'; | |
| document.documentElement.setAttribute('data-theme', savedTheme); | |
| this.updateUI(savedTheme); | |
| } | |
| toggleTheme() { | |
| const currentTheme = document.documentElement.getAttribute('data-theme'); | |
| const newTheme = currentTheme === 'dark' ? 'light' : 'dark'; | |
| document.documentElement.setAttribute('data-theme', newTheme); | |
| localStorage.setItem('theme', newTheme); | |
| this.updateUI(newTheme); | |
| } | |
| updateUI(theme) { | |
| if (theme === 'dark') { | |
| this.sunIcon.style.display = 'none'; | |
| this.moonIcon.style.display = 'block'; | |
| } else { | |
| this.sunIcon.style.display = 'block'; | |
| this.moonIcon.style.display = 'none'; | |
| } | |
| } | |
| } | |
| customElements.define('custom-theme-toggle', ThemeToggle); |