55 lines
1.6 KiB
Text
55 lines
1.6 KiB
Text
|
---
|
||
|
|
// DarkModeToggle component - toggles between light and dark mode
|
||
|
|
---
|
||
|
|
|
||
|
|
<button
|
||
|
|
id="darkModeToggle"
|
||
|
|
type="button"
|
||
|
|
class="flex items-center justify-center w-8 h-8 rounded-lg cursor-pointer text-neutral-600 dark:text-neutral-300 hover:text-neutral-900 dark:hover:text-white hover:bg-neutral-100 dark:hover:bg-neutral-800 transition-colors"
|
||
|
|
aria-label="Toggle dark mode"
|
||
|
|
>
|
||
|
|
<svg
|
||
|
|
class="w-5 h-5 dark:hidden"
|
||
|
|
id="sunIcon"
|
||
|
|
fill="none"
|
||
|
|
stroke-linecap="round"
|
||
|
|
stroke-linejoin="round"
|
||
|
|
stroke-width="2"
|
||
|
|
viewBox="0 0 24 24"
|
||
|
|
stroke="currentColor"
|
||
|
|
>
|
||
|
|
<path
|
||
|
|
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>
|
||
|
|
</svg>
|
||
|
|
<svg
|
||
|
|
class="hidden w-5 h-5 dark:block"
|
||
|
|
id="moonIcon"
|
||
|
|
fill="none"
|
||
|
|
stroke-linecap="round"
|
||
|
|
stroke-linejoin="round"
|
||
|
|
stroke-width="2"
|
||
|
|
viewBox="0 0 24 24"
|
||
|
|
stroke="currentColor"
|
||
|
|
>
|
||
|
|
<path
|
||
|
|
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"
|
||
|
|
></path>
|
||
|
|
</svg>
|
||
|
|
</button>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
function setupDarkModeToggle() {
|
||
|
|
const toggle = document.getElementById('darkModeToggle');
|
||
|
|
|
||
|
|
toggle?.addEventListener('click', () => {
|
||
|
|
document.documentElement.classList.toggle('dark');
|
||
|
|
const isDark = document.documentElement.classList.contains('dark');
|
||
|
|
localStorage.setItem('theme', isDark ? 'dark' : 'light');
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
// Run on page load and on Astro navigation
|
||
|
|
setupDarkModeToggle();
|
||
|
|
document.addEventListener('astro:after-swap', setupDarkModeToggle);
|
||
|
|
</script>
|