Astro

Wanna make your Astro project slick with dark mode? Here’s the playbook for getting that moody vibe on lock.

If you are using Tailwind v4, please refer to the 2.x documentation. This documentation assumes you are using Tailwind v3.

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.