Astro
Wanna make your Astro project slick with dark mode? Here’s the playbook for getting that moody vibe on lock.
Inline Scripts
Astro supports inline scripts, so we can get localStorage and set the theme.
<script is:inline>
const getThemePreference = () => {
if (typeof localStorage !== 'undefined' && localStorage.getItem('theme')) {
return localStorage.getItem('theme')
}
return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
}
const isDark = getThemePreference() === 'dark'
document.documentElement.classList[isDark ? 'add' : 'remove']('dark')
if (typeof localStorage !== 'undefined') {
const observer = new MutationObserver(() => {
const isDark = document.documentElement.classList.contains('dark')
localStorage.setItem('theme', isDark ? 'dark' : 'light')
})
observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] })
}
</script>
Theme Switcher
First, install the hq-icons
package.
npm i hq-icons
And then, add the following code the component where you want to use the theme switcher.