Fix ThemeToggle component

[atriple]

What kind of changes does this PR include?

• Minor fixes (broken links, typos, css, etc.)

Description

• Fix disappearing theme button when transitioning to different page. (In demo website, try to navigate Home <-> About page)
• Improve dark-light icons to load better by using dark modifier instead of aria-pressed attribute.

[netlify]

✅ Deploy Preview for astro-theme-cactus ready!

Name	Link
🔨 Latest commit	6538ce0
🔍 Latest deploy log	https://app.netlify.com/sites/astro-theme-cactus/deploys/651d88a12caa450008edada9
😎 Deploy Preview	https://deploy-preview-139--astro-theme-cactus.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[chrismwilliams]

Hi @atriple thank you for taking the time to do this and bringing it to my attention, I hadn't noticed this was happening.

The issue with the icon disappearing is an Astro bug involving persistence, and only after adding named transitions does the issue appear.

For some reason the two unrelated elements break persistence set in the Header, hence why your fix works by having to continually set const button = ... with every function invocation.

Until it's fixed, I've reverted the theme to not using View Transitions as this will trip people up in various instances, and left a message in the README to your request as a current solution.

Thanks again

[vedxp]

Hi @atriple thank you for taking the time to do this and bringing it to my attention, I hadn't noticed this was happening.

The issue with the icon disappearing is an Astro bug involving persistence, and only after adding named transitions does the issue appear.

For some reason the two unrelated elements break persistence set in the Header, hence why your fix works by having to continually set const button = ... with every function invocation.

Until it's fixed, I've reverted the theme to not using View Transitions as this will trip people up in various instances, and left a message in the README to your request as a current solution.

Thanks again

We might use transition:persist directive on the Header component instead, for fixing the issue.

src/components/layout/Header.astro:

<header
	id="main-header"
	class="group relative mb-28 flex items-center sm:ps-[4.5rem]"
	transition:persist
>
</header>

[chrismwilliams]

Thanks, and that's what I thought but unfortunately when this issue was created, persist was included. It worked until you then added a named transition on an unrelated element.

I've since changed the Toggle to a web component and removed the inline code, but it was those inconsistencies which meant that I just removed view-transitions as a default.

[vedxp]

Thanks, and that's what I thought but unfortunately when this issue was created, persist was included. It worked until you then added a named transition on an unrelated element.

I've since changed the Toggle to a web component and removed the inline code, but it was those inconsistencies which meant that I just removed view-transitions as a default.

In that case, the latter approach works just fine. Thanks for clearing that up!