Morph Backward animation flickering

[spring crescent]

I am using the following code to switch themes, yet I on articles list page (where I list out all blog posts) the morph animaiton works to go forward to their respective pages but to came backward, there is a flickering going on when I am on a dark mode.

<script is:inline>
    const themeToggler = () => {
        if (localStorage.theme === "dark" || (!("theme" in localStorage) && window.matchMedia("(prefers-color-scheme: dark)").matches)) {
            document.documentElement.classList.add("dark")
        } else {
            document.documentElement.classList.remove("dark")
        }
    }

    themeToggler()
    document.addEventListener("astro:after-swap", themeToggler)
</script>

[long slate]

Hi @spring crescent. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

---

The flickering issue you're experiencing when navigating back to the articles list page in dark mode might be due to the timing of when the theme is being applied. In your current setup, the theme is applied after the astro:after-swap event, which occurs immediately after the new page replaces the old one. This could potentially cause a brief flash of the light theme before the dark theme is applied.

To prevent this, you can try checking for the theme earlier in the navigation process. For instance, you can create a function that will run in response to the astro:after-swap event. This function should check the browser’s localStorage for the dark theme and apply it immediately after the new page has replaced the old one, before the DOM elements are painted to the screen.

Here's an example of how you can do this:

<script is:inline>
  function applyTheme() {
    localStorage.theme === 'dark'
      ? document.documentElement.classList.add("dark")
      : document.documentElement.classList.remove("dark");
  }

  document.addEventListener('astro:after-swap', applyTheme);
  applyTheme();
</script>

This script will ensure that every page change that uses the <ViewTransitions /> router for client-side navigation will be able to detect theme: dark from the browser’s localStorage and update the current page accordingly before the page is rendered for the viewer, potentially eliminating the flickering issue.

For more information, you can refer to the Astro documentation on adding view transitions (https://docs.astro.build/en/tutorials/add-view-transitions/#update-scripts).

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: