feat: Color scheme dropdown #1230
Conversation
AugustinSorel
requested review from
juliusmarminge,
nexxeln,
t3dotgg and
c-ehrlich
as code owners
|
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
Hey t3-oss/translators! This PR contains changes to your language. Please review the changes ❤️. THEMETEST.ASTRO: |
github-actions
bot
added
the
📚 documentation
|
Running Lighthouse audit... |
CleanShot.2023-02-20.at.22.44.36.mp4 |
|
|
||
| const themesOptions = [ | ||
| { | ||
| name: "os default", |
There was a problem hiding this comment.
| name: "os default", | |
| name: "System", |
To me, System sounds more in line with what others do, e.g.:
AugustinSorel
requested review from
bai and
juliusmarminge
and removed request for
bai
There was a problem hiding this comment.
Still some unexpected behaviors:
-
The icon shouldn't change when i change my system preferences, it should be on the system icon as long as i haven't changed it.
-
If i have changed it, the theme shouldn't change even if i change the system preferences.
demo showcasing these faults:
CleanShot.2023-02-23.at.18.37.45.mp4
| useLayoutEffect(() => { | ||
| const theme = localStorage.getItem("theme") as ThemesNames; | ||
| setSelectedTheme(theme || "system"); | ||
|
|
||
| window | ||
| .matchMedia("(prefers-color-scheme: dark)") | ||
| .addEventListener("change", (e) => { | ||
| if (e.matches) { | ||
| findThemeByName("dark")?.clickHandler(); | ||
| setSelectedTheme("dark"); | ||
| } else { | ||
| setSelectedTheme("light"); | ||
| findThemeByName("light")?.clickHandler(); | ||
| } | ||
| }); | ||
| }, []); |
There was a problem hiding this comment.
this event listener should only run when the system option is selected, we should also have a cleanup function
|
Closing as stale so that others don't feel blocked to pick it up |
Closes #
✅ Checklist
Changelog
fixing this issue: #847
This pr changed the old theme toggle to a drop down with 3 options (os default, light and dark)
Screenshots
💯