Skip to content

Astro View Transitions and Dark Mode

THE AHA STACK MASTERCLASS

Launching May 27th

View Transitions in Astro are amazing, you can see them at work on this blog by clicking a menu item, for example - very smooth transition to other pages of the site, it’s great.

It’s a static site, but navigation feels smooth like in a single-page application.

I noticed a problem when I implemented dark mode in a new theme. Previously I just used the OS default, now I also have a new toggle to choose the mode you prefer.

But, problem: since it was loading the state from session storage in the browser, going to another page re-set that preference to light mode.

I had to use the astro:after-swap event, to call the function that gets the dark mode preference from the session storage also when the page is swapped with a new one in a view transition.

Here’s a link to the docs: https://docs.astro.build/en/guides/view-transitions/#astroafter-swap

<script is:inline>
  const setDarkMode = () => {
    if (typeof window !== "undefined") {
      const isSystemColorSchemeDark = window.matchMedia(
        "(prefers-color-scheme: dark)"
      ).matches
      const storageTheme = sessionStorage.getItem("theme")
      if (!storageTheme && isSystemColorSchemeDark) {
        document.documentElement.classList.add("dark")
        document.head.children.namedItem("theme-color").content = "#262626"
      } else if (storageTheme === "dark") {
        document.documentElement.classList.add("dark")
        document.head.children.namedItem("theme-color").content = "#262626"
      } else {
        // we already server render light theme
        document.head.children.namedItem("theme-color").content = "#ffffff"
      }
    }
  }

  // Runs on initial navigation
  setDarkMode()

  // Runs on view transitions navigation
  document.addEventListener('astro:after-swap', setDarkMode)
</script>

I wrote 20 books to help you become a better developer:

  • Astro Handbook
  • HTML Handbook
  • Next.js Pages Router Handbook
  • Alpine.js Handbook
  • HTMX Handbook
  • TypeScript Handbook
  • React Handbook
  • SQL Handbook
  • Git Cheat Sheet
  • Laravel Handbook
  • Express Handbook
  • Swift Handbook
  • Go Handbook
  • PHP Handbook
  • Python Handbook
  • Linux Commands Handbook
  • C Handbook
  • JavaScript Handbook
  • CSS Handbook
  • Node.js Handbook
...download them all now!

Related posts that talk about astro: