feat: Allow user to reset the website's color scheme to use the preferred device color scheme

[ruridge]

Is your feature request related to a problem? Please describe.

I find it frustrating when websites don't allow me reset to the preferred device color scheme without manually deleting a local storage token.

Describe the solution you'd like to see

Add a third option to the theme toggle to allow users to manually reset the color scheme

Describe alternate solutions

Alternatively the color scheme toggle could be removed and we could fall back to just using the preferred color scheme set on the device.

Additional information

I know the docs say not to but I've already opened a PR addressing this: #846 hope that's okay! 😅

[ruridge]

I'm sorry, I just noticed this conflicts with the toggle button approach merged in the other day. Unfortunately toggle probably doesn't make sense with three options.

A third solution might look something like what the mdn docs site does with a select: ref: https://developer.mozilla.org/en-US/

[juliusmarminge]

I'm sorry, I just noticed this conflicts with the toggle button approach merged in the other day. Unfortunately toggle probably doesn't make sense with three options.

A third solution might look something like what the mdn docs site does with a select:

ref: https://developer.mozilla.org/en-US/

Yea dropdown is probably the way here.

[c-ehrlich]

If you decide to implement this, take a look at the language switcher that was recently added. Maybe you can use the same Headless UI component to get a11y "for free".

[ruridge]

That sounds good! I'm going to base this on what Julius did with language switcher using headless UI. I'll raise another PR with this implementations

[CFKeef]

@ruridge Are you still working on this?

[ruridge]

@CFKeef I had a go at this but failed to find a solution that didn't add a flash of unstyled content when using the React select component to implement the color picker: https://github.com/ruridge/create-t3-app/tree/ternary-theme-select

I think the only way to get this working without the flash would be using a plain astro component and a vanilla JS script using is:inline

Feel free to pick it up if you'd like, theme toggles that get out of sync with the system preferred color scheme are the bane of my late night browsing 👁

[CFKeef]

Yeah I was looking at your impl and used the language select as a base but I have some weird behavior with my icons I need to figure out :sob: I'll link my branch if you want to take a look/collab on it

I do have the functionality you are expecting except it'll flash the system icon before using localstorage if you have a cookie set