#How to toggle dark/light modes using the Starlog theme?

1 messages · Page 1 of 1 (latest)

alpine yew
#

I'm using the Starlog theme (https://github.com/withastro/astro/tree/main/examples/starlog) to build a changelog. I haven't been able to find any documentation for this theme specifically, and as I'm still new to Astro I'm having trouble figuring out how to put the pieces together from the general Astro documentation to apply to my own project with Starlog.

The readme for the Starlog theme says it supports dark and light modes. From what I can tell in the boilerplate code for the Starlog theme, styles for dark/light modes are automatically determined using media queries for prefers-color-scheme. I'd like to add a toggle that the user can use to select light/dark mode right at the top of the page, just like it appears in Astro Starlight. However, I'm having trouble understanding how I can configure this within the Starlog theme. Is anyone able to advise?

Thanks in advance!

GitHub
astro/examples/starlog at main · withastro/astro

The web framework for content-driven websites. ⭐️ Star to support our work! - withastro/astro

graceful trellis
alpine yew
#

Hey, I did try following this which actually worked for toggling light/dark, but when you click on a post, it returns to light and the toggle no longer works (nothing happens when you click). I may have done something weird in my CSS though trying to get it to work. I've actually just started over from scratch to see if I could figure something else out, so I'll try going through these steps again from a clean slate

graceful trellis
#

Are you using view transitions?

#

If you need further assistance feel free to post back here, ill keep an eye out

alpine yew
#

Okay, thanks!

alpine yew
#

@graceful trellis I was able to follow these steps and add the toggle for light/dark modes, but I'm still having the issue where the toggle doesn't work after navigating away by clicking on a post. Do you have any idea what could be causing this?

Screenshot_2024-05-18_at_1.25.39_PM.png
graceful trellis
#

Hmmm interesting, is it always after navigating to a post? Or does it stop working simply after the first toggle of on then back off?

alpine yew
#

Ooh okay I'll check that out! Looks promising! It's after navigating to a post, you can toggle as many times as you want from the home page. Will follow up if I can't figure it out from the thread you shared. Thank you so much 🙂

alpine yew
#

It seems to be working! I had to add a bit to that solution to get it to work for me but it definitely got me on the right track. Everything is working as expected now so this should be resolved! Thank you again for the resources and following up 🙂