fix theme icons

This commit is contained in:
ld3zian 2025-01-18 15:07:43 -07:00
parent 618901a871
commit ea9a00470c

View file

@ -6,7 +6,7 @@
aria-label="Toggle theme" aria-label="Toggle theme"
> >
<svg <svg
class="w-5 h-5 absolute transition-transform duration-500" class="w-5 h-5 absolute transition-transform duration-500 opacity-0"
data-theme-icon="light" data-theme-icon="light"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24" viewBox="0 0 24 24"
@ -27,7 +27,7 @@
<line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line> <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
</svg> </svg>
<svg <svg
class="w-5 h-5 absolute transition-transform duration-500" class="w-5 h-5 absolute transition-transform duration-500 opacity-0"
data-theme-icon="dark" data-theme-icon="dark"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24" viewBox="0 0 24 24"
@ -53,11 +53,11 @@
const darkIcon = document.querySelector('[data-theme-icon="dark"]'); const darkIcon = document.querySelector('[data-theme-icon="dark"]');
if (theme === 'light') { if (theme === 'light') {
lightIcon?.classList.remove('translate-y-full'); lightIcon?.classList.remove('opacity-0');
darkIcon?.classList.add('translate-y-full'); darkIcon?.classList.add('opacity-0');
} else { } else {
lightIcon?.classList.add('translate-y-full'); lightIcon?.classList.add('opacity-0');
darkIcon?.classList.remove('translate-y-full'); darkIcon?.classList.remove('opacity-0');
} }
}; };