-
Notifications
You must be signed in to change notification settings - Fork 1
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Adds a theme toggle component #21
Conversation
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
56777f3
to
391b5af
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This looks nice. *chefs kiss*
880e7ed
to
f012325
Compare
f012325
to
f5a0a61
Compare
updates tailwind to use arbitrary variants
f5a0a61
to
8ce163f
Compare
@jkulton I made changes to address the PR feedback. I've converted it to use tailwind instead of css modules since that's the way we're currently styling all things. It now check if the user prefers reduced motion and, if so, turns off the transitions and animations. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thanks for the accessibility-mindedness, this looks great! 🙇 Just one small suggestion.
Co-authored-by: Jon Kulton <6694167+jkulton@users.noreply.github.com>
Description
Adds a theme toggle component to the header. The logic works like:
Screenshots
Light mode:
![image](https://user-images.githubusercontent.com/1746134/177056986-de06dc0a-e409-43c0-81b3-ac8d4a22d1c5.png)
Dark mode:
![image](https://user-images.githubusercontent.com/1746134/177056992-ed49d8ec-d6f9-4f04-933a-81d5e851f29b.png)
Condensed header, dark mode:
![image](https://user-images.githubusercontent.com/1746134/177057003-1557576f-bdf0-4f7e-80df-ea5df5f93938.png)