-
-
Notifications
You must be signed in to change notification settings - Fork 8.5k
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
feat(v2): auto switch theme depending on the system theme #2117
Conversation
|
||
var preferDarkQuery = '(prefers-color-scheme: dark)'; | ||
var mql = window.matchMedia(preferDarkQuery); | ||
var supportsColorSchemeQuery = mql.media === preferDarkQuery; |
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.
I removed this redundant check, slightly simplified the code 🙄
Deploy preview for docusaurus-2 ready! Built with commit f4e220b |
Deploy preview for docusaurus-preview ready! Built with commit f4e220b |
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.
Awesome feature, thank :D
} | ||
|
||
var darkQuery = window.matchMedia('(prefers-color-scheme: dark)'); | ||
darkQuery.addListener(function(e) { |
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.
TIL about listening to a media query
Motivation
We can change the theme on the website depending on the installed system theme in real time. That is, when a user changes the theme in their OS, it changes on the website (if at that moment a tab with the website is open!)
Important point - if the user has already selected a theme on website, we do not switch theme when system theme has been changed.
Have you read the Contributing Guidelines on pull requests?
Yes
Test Plan