surjithctly / astro-color-scheme

Astro Color Scheme is a fully headless dark mode theme toggle for Astro.

Hi Github 👋

I'm Surjith. A freelance Web Designer & Developer from Kerala, India. I design and develop websites, landing pages and applications for startups and enterprises.

Contact me on Twitter or Send an Email

astro-color-scheme's Issues

[Bug]: clicking on the svg won't switch the theme

Hey there.
Using your playground https://stackblitz.com/edit/github-jpfnv9-ep5z59?file=src%2Fpages%2Findex.astro you will notice that if you start clicking exclusively on the icon, and not on the button, the theme won't switch.

Check the video:

Screenity.video.-.Mar.30.2024.mp4

That's because using e.target will give you the exact element the user has clicked on which might not be the button and, consequently, you'll lose the correct value of the value attribute you set.
You need to use e.currentTarget

system should listen to matchMedia changes

With system selected, having the prefers-color-scheme value change should also trigger an update of this package:

const match = window.matchMedia('(prefers-color-scheme:dark)');

match.addEventListener('change', (e) => {
  if (e.matches) {
    /* set theme to dark */
  } else {
    /* set theme to light */
  }
});

Multiple instance of ThemeSwitch in a page

Thanks for this easy to use theme toggle.

Currently it only support one instance of this component. Is there a way to use multiple instance of it together?

Change current page restart input state on switcher

Hi, i have this issue when use two pages "/" and "/en" for the same content but in English, when checkbox strategy it's used the check ☑ mark will always reload and change the state, causing a desync on the value of the box and the current theme.

<ThemeSwitch strategy="checkbox" defaultTheme="system"> <div class="flex py-2"> <input type="checkbox" id="switch" name="switch" /> <label for="switch"></label> </div> </ThemeSwitch>
I am using Astro, so can I use the transition:persist? Could you give some example?

edit: when i change the page, the local storage value remains, but the theme actually doesn't sync, I can make some screens if you like