Fix light theme flash on blog navigation

[LuckeeDev]

The PR adds a script inside ThemeToggle.astro which runs on the astro:after-swap-event, which means before the swapped page is rendered, and removes the is:inline directive from the BaseLayout script, so that it only runs on the first render. This approach is suggested here. It avoids flashes in the theme, which quickly turned to light and then back to dark when navigating to a blog post page.

Closes #3.

[netlify[bot]]

✅ Deploy Preview for dante-astro-theme ready!

Name	Link
🔨 Latest commit	ae99e66d8b1e6355f2b01db61be43a0c8907140a
🔍 Latest deploy log	https://app.netlify.com/sites/dante-astro-theme/deploys/65ad82f33cd28b000962c113
😎 Deploy Preview	https://deploy-preview-4--dante-astro-theme.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.

[astab]

@LuckeeDev thank you for noticing and fixing the issue.

[h-enk]

Does not fix this for me — hitting refresh on the homepage for example?

[LuckeeDev]

Maybe the script in the head of the document should be is:inline as it was initially, so that the page waits for the script to execute before rendering on the first load.

[h-enk]

Using is:inline on the script (fetching the theme from local storage) fixed the repeated refresh flickering for me.

Only thing remaining is the flickering on initial load — clear browser, and hit refresh on the homepage — looks like the theme should also be set initially

In addition, I now also noted that prefers-color-scheme is not respected.

Here's a working example of how I implemented color mode for the Hyas' Doks theme based on Bootstrap's example