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;
}