-
Notifications
You must be signed in to change notification settings - Fork 384
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
Add dark mode support in twenty twenty-one theme #6874
Add dark mode support in twenty twenty-one theme #6874
Conversation
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.
The dark mode toggle is now rendered on AMP pages when Twenty Twenty-One theme is activated. The color mode preference is persisted across visits.
There's a minor difference between AMP and non-AMP versions: the mode toggle is not hidden/shown on scroll:
tt1-dark-mode-toggle.mp4
I don't think it's a blocker but if it's something relatively easy to achieve, it'd be nice to have.
@thelovekesh It seems that the unit tests need to be updated. Can you have a look into that? |
@delawski Updated the test cases. |
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.
@westonruter I think this is now ready for your review.
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 a lot for working on this. Great that this includes not only dark mode support for Twenty Twenty-One but also updating the style sanitizer so other themes can implement dark mode.
Co-authored-by: thelovekesh <lovekesh.kumar@rtcamp.com>
Summary
Fixes #6783
AMP.toggleTheme
component$class_names[]
so that dark mode class used byAMP.toggleTheme
can be prevented from being tree-shaken.See recorded screencast
c2011e824f.mp4
Checklist