Script not work after adding transition to layout

[pliant brook]

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

[remote yoke]

Script not work after adding transition to layout

[pliant brook]

---

Based on the information provided in the knowledge sources, I can help you understand why your script is not working after adding transitions to your layout and suggest a solution.

The issue you're experiencing is related to how scripts behave with view transitions in Astro. When you add view transitions to an existing Astro project, some scripts may no longer re-run after page navigation as they did with full-page browser refreshes.

Here are a few key points to consider:

1. Script re-execution: Inline scripts (like yours) have the potential to be re-executed during a user's visit to a site if they exist on a page that is visited multiple times. However, with view transitions, some scripts may not re-run after page navigation as expected.

2. Event listeners: To ensure your script runs at the proper time in the navigation cycle, you should use the appropriate event listeners.

3. data-astro-rerun attribute: You've correctly added this attribute to your script, which forces inline scripts to re-execute after every transition.

To fix your issue, you need to make a few adjustments to your script:

1. Remove the DOMContentLoaded event listener, as it won't fire during client-side navigation.
2. Move the initialization code outside of any event listener to ensure it runs immediately.
3. Keep the astro:page-load event listener for the toggle functionality.

Here's the modified script that should work with view transitions:

<button id="theme-toggle" class="btn p-2">
    <svg id="theme-icon" width="24" height="24">
        <use xlink:href="#icon-day"></use>
    </svg>
</button>

<script is:inline data-astro-rerun>
    function toggleTheme() {
        const body = document.body;
        const currentTheme = body.getAttribute('data-bs-theme') || 'dark';
        const newTheme = currentTheme === 'light' ? 'dark' : 'light';

body.setAttribute('data-bs-theme', newTheme);
localStorage.setItem('theme', newTheme);
updateIcon(newTheme);
}

function updateIcon(theme) {
    const icon = document.getElementById('theme-icon');
    const iconUse = icon.querySelector('use');
    iconUse.setAttribute('xlink:href', theme === 'dark' ? '#icon-night' : '#icon-day');
}

// Initialize theme
const savedTheme = localStorage.getItem('theme') || 'dark';
document.body.setAttribute('data-bs-theme', savedTheme);
updateIcon(savedTheme);

document.addEventListener('astro:page-load', () => {
    document.getElementById('theme-toggle').addEventListener('click', toggleTheme);
});

</script>

This modified script should work correctly with view transitions. The initialization code runs immediately, setting the initial theme, and the toggle functionality is set up after each page load.

For more information on script behavior with view transitions in Astro, you can refer to the [Script behavior with view transitions](<https://docs.astro.build/en/guides/view-transitions/#script-behavior-with-view-transitions>) section in the Astro documentation.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------