Bug Dark Mode add <ClientRouter />

[alisanoelia]

Astro Info

Astro                    v5.1.2
Node                     v20.16.0
System                   Linux (x64)
Package Manager          bun
Output                   static
Adapter                  none
Integrations             @astrojs/tailwind

If this issue only occurs in one browser, which browser is a problem?

All browser

Describe the Bug

When I add <ClientRouter /> for animations, there are errors when loading the theme on different pages, and the button to change the theme is also disabled.

Everything works correctly if I don't use <ClientRouter />.

What's the expected result?

Animations without bugs

Link to Minimal Reproducible Example

https://stackblitz.com/~/github.com/alisanoelia/error-clientrouter

Participation

• I am willing to submit a pull request for this issue.

[martrapp]

Hi @alisanoelia 👋🏼,

without the client Router, the script inside the ToggleTheme component is executed on every full page load.
The ClientRouter replaces full page loads with soft navigation. To ensure that the script is still executed on each navigation, you have to wrap it in an astro:page-load listener like this

<script>
import "astro:transitions/client"
document.addEventListener("astro:page-load",()=>{
	document.getElementById('theme-selector')?.addEventListener('click', () => {
		if (localStorage.theme === 'dark') {
			localStorage.theme = 'light'
			document.documentElement.classList.remove('dark')
		} else {
			localStorage.theme = 'dark'
			document.documentElement.classList.add('dark')
		}
	})
})
</script>

https://docs.astro.build/en/guides/view-transitions/#astropage-load

The import statement at the start of the script is normally not necessary, but i added it due to open bug #12804.

For your other script in the Layout.astro file, you should be aware of
https://docs.astro.build/en/guides/view-transitions/#data-astro-rerun