Add view transitions when switching themes

[nanwy]

Describe the feature in detail (code, mocks, or screenshots encouraged)

Skeleton v3 doc is powered by Astro, and Astro but-ins View Transitions. This means we can use that feature directly：https://docs.astro.build/en/guides/view-transitions/. like this:

What type of pull request would this be?

New Feature

Provide relevant links or additional information.

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

[Niceadam]

I just implemented this. The circle growing animation like the one in the screenshot didn't end up looking very good so I added a line sweep instead

screen.webm

@endigo9740 Should I move forward with a pull request or skip this feature?

[endigo9740]

@Niceadam no, we're leaving these types of features until the site design is closer to finalized. Feel free to note how you achieved this here or link to a repo that showcases the process though. My plan is to revisit documentation after we complete our current pass through components.

[Niceadam]

Alright, leaving the changes here, modify to taste. The new inline script for sites/next.skeleton.dev/src/components/docs/ThemeSwitch.astro:

<script is:inline>
    const elemSelect = document.getElementById('themesList');
    const lsTheme = localStorage.getItem('theme') || 'cerberus';
    
    // Init
    elemSelect.value = lsTheme;
    document.body.dataset.theme = lsTheme;
    
    // Change Theme
    function changeTheme(event) {
        const selectedTheme = event.target.value;
        document.body.dataset.theme = selectedTheme;
        localStorage.setItem('theme', selectedTheme);
    }
    
    // Change Handler
    async function onChangeHandler(event) {
    if (!document.startViewTransition || window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
        changeTheme(event);
        return;
    }
    
    await document.startViewTransition(() => {
         changeTheme(event);
    }).ready
    
    const { top, left, width, height } = event.target.getBoundingClientRect();
    const x = left + width / 2;
    const y = top + height / 2;
    const right = window.innerWidth - left;
    const bottom = window.innerHeight - top;
    const maxRadius = Math.hypot(
      Math.max(left, right),
      Math.max(top, bottom),
    );

    document.documentElement.animate(
      {
        clipPath: [
          `inset(0px 100% 0px 0px)`,
          `inset(0)`,
        ],
      },
      {
        duration: 500,
        easing: 'ease-in-out',
        pseudoElement: '::view-transition-new(root)',
      }
    );
	}

    // Listeners
    elemSelect.addEventListener('change', onChangeHandler);
</script>

and add this in app.css

::view-transition-old(root),
::view-transition-new(root) {
	animation: none;
	mix-blend-mode: normal;
}

[endigo9740]

@Hugos68 this will be something to look into: https://bsky.app/profile/astro.build/post/3m36c2ryy3f2a

I'm not so concerned with theme transitions, but rather just overall page transitions. We can always refine from there.

Let me know if this will overlap with our other doc plans.

[endigo9740]

Note that we technically have support for this as part of today's doc updates. So let's revisit soon.