Spaces:
Running
Running
File size: 2,100 Bytes
225fa9a | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 | class ThemeToggle extends HTMLElement {
connectedCallback() {
this.attachShadow({ mode: 'open' });
this.shadowRoot.innerHTML = `
<style>
button {
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
}
.dark-icon, .light-icon {
transition: opacity 0.3s ease, transform 0.3s ease;
}
.dark .dark-icon {
opacity: 1;
transform: rotate(0deg);
}
.dark .light-icon {
opacity: 0;
transform: rotate(-90deg);
}
.light .light-icon {
opacity: 1;
transform: rotate(0deg);
}
.light .dark-icon {
opacity: 0;
transform: rotate(90deg);
}
</style>
<button class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white p-2 rounded-full">
<span class="light-icon absolute">
<i data-feather="sun"></i>
</span>
<span class="dark-icon absolute">
<i data-feather="moon"></i>
</span>
</button>
`;
const button = this.shadowRoot.querySelector('button');
button.addEventListener('click', this.toggleTheme.bind(this));
}
toggleTheme() {
const html = document.documentElement;
if (html.classList.contains('dark')) {
html.classList.remove('dark');
html.classList.add('light');
localStorage.setItem('theme', 'light');
} else {
html.classList.remove('light');
html.classList.add('dark');
localStorage.setItem('theme', 'dark');
}
feather.replace();
}
}
customElements.define('theme-toggle', ThemeToggle); |