Skip to content
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

Merged
merged 1 commit into from
Dec 12, 2019

Conversation

lex111
Copy link
Contributor

@lex111 lex111 commented Dec 11, 2019

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

  1. Open website (clear local storage just in case) in new tab
  2. Change the theme in your OS settings
  3. Make sure that on the website (in the previously opened tab) the theme has also changed. For example, if a dark theme was selected on the OS, then exactly this theme should be selected on the website.

@lex111 lex111 requested a review from endiliey December 11, 2019 19:55
@facebook-github-bot facebook-github-bot added the CLA Signed Signed Facebook CLA label Dec 11, 2019

var preferDarkQuery = '(prefers-color-scheme: dark)';
var mql = window.matchMedia(preferDarkQuery);
var supportsColorSchemeQuery = mql.media === preferDarkQuery;
Copy link
Contributor Author

@lex111 lex111 Dec 11, 2019

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 🙄

@docusaurus-bot
Copy link
Contributor

Deploy preview for docusaurus-2 ready!

Built with commit f4e220b

https://deploy-preview-2117--docusaurus-2.netlify.com

@docusaurus-bot
Copy link
Contributor

Deploy preview for docusaurus-preview ready!

Built with commit f4e220b

https://deploy-preview-2117--docusaurus-preview.netlify.com

Copy link
Contributor

@yangshun yangshun left a 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) {
Copy link
Contributor

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

@yangshun yangshun merged commit 26a3d72 into facebook:master Dec 12, 2019
@endiliey endiliey added the pr: new feature This PR adds a new API or behavior. label Dec 13, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
CLA Signed Signed Facebook CLA pr: new feature This PR adds a new API or behavior.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants