-
Notifications
You must be signed in to change notification settings - Fork 628
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
Implement dark mode via light-dark()
fn
#8559
Conversation
looks like I might have to double check that the PostCSS plugin is working correctly (see Percy), but this should still be available for review. I hope I didn't forget any pages... also, do we require a user override button to ship this or can we ship this without one? |
I would expect a color scheme toggle button to be included with this PR. This would allow users who don't want this change to simply switch back to the light theme. |
☔ The latest upstream changes (presumably 16b9eab) made this pull request unmergeable. Please resolve the merge conflicts. |
☔ The latest upstream changes (presumably 748e265) made this pull request unmergeable. Please resolve the merge conflicts. |
I've implemented a simple dark mode toggle that can switch between light, dark, and system. Feel free to cherry-pick or modify it as needed if you find it helpful in any way. eth3lbert@0dc59e4 |
This implements a dark mode for the user interface, based on the system theme setting. The `color-scheme` CSS attribute could eventually be overridden if the user does not want to use the system setting.
@eth3lbert thanks! I've cherry-picked the UI from your commit, but simplified the implementation a little bit :) edit: I've also set the default to the "light" color scheme for now in case we find any issues with the dark mode. |
Co-authored-by: eth3lbert <[email protected]>
That's great! Adding an icon as a visual cue to the dropdown menu is a much better implementation. I love this! I've tested it locally on the landing page without any issues. |
This implements a dark mode for the user interface, based on the system theme setting. The
color-scheme
CSS attribute could eventually be overridden if the user does not want to use the system setting.Examples