mercury/src/components/ThemeSwitcher.astro
2025-05-01 16:53:18 +08:00

22 lines
No EOL
661 B
Text

---
---
<button class="theme-switcher" id="theme-switcher">
Toggle Theme
</button>
<script>
const themeSwitcher = document.getElementById('theme-switcher');
const root = document.documentElement;
// Check for saved theme preference or default to dark
const savedTheme = localStorage.getItem('theme') || 'dark';
root.setAttribute('data-theme', savedTheme);
themeSwitcher?.addEventListener('click', () => {
const currentTheme = root.getAttribute('data-theme');
const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
root.setAttribute('data-theme', newTheme);
localStorage.setItem('theme', newTheme);
});
</script>