Dark theme flashes

[iamhectorsosa]

Hello, Astro community:

I have a question. I've build this sample app for Documentation sites -> https://astrofordocs.vercel.app. It works just as expected. I was pushing to see how far could I go without writing any JavaScript at all.

I'm having issues when opening the DevTools and toggling through light and dark theme preferences, I notice a light theme flash when loading pages. Is this normal? Could someone please take a look at the repo https://github.com/ekqk/astrofordocs and let me know if they spot anything unusual? The flash doesn't happen when navigating without the DevTools.

It happens using Chrome, Arc and Safari.

Thanks

[delucis]

Hi @ekqt! Just took a quick look and don’t see any flash in Chrome, Firefox or Safari, on macOS. Template looks great!

[delucis]

Oh, sorry, I missed this sentence:

The flash doesn't happen when navigating without the DevTools.

Not sure exactly why that’s happening, but I guess it doesn’t matter too much? If it’s a behaviour you only see when using DevTools then that won’t really impact users.

[iamhectorsosa]

Thanks for taking a look at it @delucis

It doesn't seem to impact Users, but I do wonder if slow connection Users would see those flashes. I wanted to test performance with DevTools and that's how I encountered this issue.

I really enjoyed testing Astro for the first time building this template. We shared our thoughts here -> webscope.io/blog

[delucis]

That’s cool! Feel free to share in the #showcase channel in Astro’s Discord server if you like: https://astro.build/chat

If you want to check how it looks with a slow connection, maybe throttling the network speed in dev tools would be enough?