Open emiliosheinz opened 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 |
hi @emiliosheinz now the system's prefers-color-scheme stopped working
https://github.com/guilhermerodz/input-otp/assets/10366880/cb06fb5d-62f6-4edc-b81f-041a40ef2c0d
@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.
@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:
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.
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
@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
@guilhermerodz Did you have the chance of circling back to this? I would love to hear your thoughts.
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