search

guilhermerodz / input-otp

One time passcode Input. Accessible & unstyled.
https://input-otp.rodz.dev
MIT License
2.35k stars 47 forks source link

fix(www): themes toggle #34

Open emiliosheinz opened 5 months ago

emiliosheinz commented 5 months ago

Theme changes were only being applied when made from the system; however, when attempting to change it from the application header, the changes were not reflecting within the app.

Before:

https://github.com/guilhermerodz/input-otp/assets/103655828/c11738d0-5365-4659-9b63-17d5d19d34df

After

https://github.com/guilhermerodz/input-otp/assets/103655828/5e0db7df-8b8e-47ba-bfe1-66d2b0729756

vercel[bot] commented 5 months ago

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
rodz-input-otp ✅ Ready (Inspect) Visit Preview 💬 Add feedback Mar 14, 2024 11:54pm
guilhermerodz commented 5 months ago

hi @emiliosheinz now the system's prefers-color-scheme stopped working

https://github.com/guilhermerodz/input-otp/assets/10366880/cb06fb5d-62f6-4edc-b81f-041a40ef2c0d

emiliosheinz commented 5 months ago

@guilhermerodz thank you for noticing. Weird that in my second video, when I change my system theme, it successfully changes the website theme. I'll look into that shortly but any thoughts are welcome.

emiliosheinz commented 5 months ago

@guilhermerodz, I have tested it locally, and based on my understanding, it is working as expected. The implementation I have employed ensures that the selection made on the website will always take precedence. In essence:

  1. If users select Light or Dark on the website's header it will take precedence over what is selected on the System (aka prefers-colors-scheme or OS theme).
  2. If users select System on the website's header but have no preferred color scheme it will fallback to what is set on the OS.
  3. If users select system on the website's header and have a preferred color scheme, the preferred color scheme will be applied, no matter what's the theme applied to the OS.

IMO having the preferred color scheme taking precedence over what is selected on the website will make the feature confusing for users since they might have a prefer color scheme set and when they try to change the theme on the header nothing will happen.

Basically, in your example the preferred color scheme didn't work because Dark was selected. To have your preferred color scheme applied you need to select System.

Video showcasing what I explained above:

https://github.com/guilhermerodz/input-otp/assets/103655828/80913ead-c0e2-44d4-a281-a7c5ed796317

Please, let me know your thoughts or concerns about this approach.

guilhermerodz commented 5 months ago

The theme isn't updating when there's no prefers-color-scheme, or if there's prefers-color-scheme:dark

https://github.com/guilhermerodz/input-otp/assets/10366880/e978194c-4fc7-4ec4-828e-23d20ba0485f

I still haven't debugged deeply to understand what's happening

emiliosheinz commented 5 months ago

@guilhermerodz Sorry for asking but are you sure you are testing the right branch? 😅

I'm asking because the behavior you described in your previous message and video is exactly what I'm fixing with this PR. When testing the theme toggle on https://input-otp.rodz.dev/ the behavior is exactly as in your video, but when trying the same thing on the branch with the fixes I applied it works as expected. Could you please double check and let me know the results?

Sorry if I'm missing something really obvious here. Thanks!

See the proof below:

https://github.com/guilhermerodz/input-otp/assets/103655828/5755439d-63f0-4377-ae5b-9fa50dec5eae

emiliosheinz commented 3 months ago

@guilhermerodz Did you have the chance of circling back to this? I would love to hear your thoughts.