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 justd-icons package.
Sometimes, using the CLI is the way to go, so make sure you install the necessary dependencies for the components you want to use.
And then, add the following code the component where you want to use the theme switcher.