Astro View Transitions and Dark Mode
View Transitions in Astro are amazing, you can see them at work on this blog by clicking a menu item, for example - very smooth transition to other pages of the site, it’s great.
It’s a static site, but navigation feels smooth like in a single-page application.
I noticed a problem when I implemented dark mode in a new theme. Previously I just used the OS default, now I also have a new toggle to choose the mode you prefer.
But, problem: since it was loading the state from session storage in the browser, going to another page re-set that preference to light mode.
I had to use the astro:after-swap
event, to call the function that gets the dark mode preference from the session storage also when the page is swapped with a new one in a view transition.
Here’s a link to the docs: https://docs.astro.build/en/guides/view-transitions/#astroafter-swap
<script is:inline>
const setDarkMode = () => {
if (typeof window !== "undefined") {
const isSystemColorSchemeDark = window.matchMedia(
"(prefers-color-scheme: dark)"
).matches
const storageTheme = sessionStorage.getItem("theme")
if (!storageTheme && isSystemColorSchemeDark) {
document.documentElement.classList.add("dark")
document.head.children.namedItem("theme-color").content = "#262626"
} else if (storageTheme === "dark") {
document.documentElement.classList.add("dark")
document.head.children.namedItem("theme-color").content = "#262626"
} else {
// we already server render light theme
document.head.children.namedItem("theme-color").content = "#ffffff"
}
}
}
// Runs on initial navigation
setDarkMode()
// Runs on view transitions navigation
document.addEventListener('astro:after-swap', setDarkMode)
</script>
THE VALLEY OF CODE
THE WEB DEVELOPER's MANUAL
You might be interested in those things I do:
- Learn to code in THE VALLEY OF CODE, your your web development manual
- Find a ton of Web Development projects to learn modern tech stacks in practice in THE VALLEY OF CODE PRO
- I wrote 16 books for beginner software developers, DOWNLOAD THEM NOW
- Every year I organize a hands-on cohort course coding BOOTCAMP to teach you how to build a complex, modern Web Application in practice (next edition February-March-April-May 2024)
- Learn how to start a solopreneur business on the Internet with SOLO LAB (next edition in 2024)
- Find me on X