Dark Mode not working in Astro 2
elgud opened this issue · comments
Has there been any attempt to port this package to Astro v2?
It is just that dark mode isn't working properly. The font colours change, but the background stays white resulting in text that has been turned to white disappearing.
This can been seen clearly on the online preview.
Clarification: it works fine on chrome and brave. It does not work on safari.
I wonder why not.
Further information: it is just the home page that does not work on safari. All other pages work fine.
If you refresh the home page on safari after toggling, it works.
Strange.
Hey @elgud! Hmmm, that is definitely a weird one! It's indeed only something that occurs on Safari and on the homepage. Even if you resize the page, or resize the developer tools window, the dark mode kicks in without having to refresh the page.
I'll have to debug this one once I get some time to look at it. Thanks for posting and providing more information on it! 🙂
Hey @elgud, after debugging it a bit, it seems to be stemming from the Feature.astro component's ::after pseudo element in the Accessible Astro Starter. If I remove that, the darkmode toggle on the homepage will work in Safari. Setting an isolation: isolate; on the .feature class solves it, but it botches the layout. For now, the quickest solution for you would be to remove the ::after styles from the component. I'll have to dig a little deeper into why this is happening at all when using a pseudo element in Safari and what would be an elegant solution to it.
Hey @elgud, thanks for your patience, this is now fixed in the latest patch for the Accessible Astro Starter: https://github.com/markteekman/accessible-astro-starter/releases/tag/v2.0.2 😄