Skip to content

Conversation

@turnrye
Copy link
Contributor

@turnrye turnrye commented May 10, 2019

Summary

Android Q is raising Dark Mode to prominence across the ecosystem. One of the expectations is to be able to respond to the system-wide dark theme setting. I've followed their documentation, added the flag to the InfoModule, and then presented this value to the RN user space via an Android-specific Platform value nightMode. There are rumors that similar functionality may come soon for iOS, and we may want to consider refactoring the JS side at that point for consistency between the two platforms.

Changelog

[Android] [Added] - Add ability to check what system preference is set for dark mode

Test Plan

I added Platform.nightMode to a sample app and saw it get "yes" and "no" based off of whether I'd selected light theme or dark theme on the Q beta.

@facebook-github-bot facebook-github-bot added the CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. label May 10, 2019
@react-native-bot react-native-bot added Platform: Android Android applications. Type: Enhancement A new feature or enhancement of an existing feature. labels May 10, 2019
@gengjiawen
Copy link
Contributor

Also need to update docs, Can you post a PR to https://github.com/facebook/react-native-website too.

@turnrye
Copy link
Contributor Author

turnrye commented May 10, 2019

@gengjiawen thank you! Submitted (and referenced above).

@gengjiawen
Copy link
Contributor

@turnrye Can you rebase this PR, seems Circle CI not triggered.

@necolas
Copy link
Contributor

necolas commented May 13, 2019

Multiple platforms (web, macOS) already support dark modes too. The web API is a new media-query prefers-color-scheme that is partially supported at the moment - https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme.

If we were to follow that path, we'd have an API more like Platform.colorScheme === 'dark' (or light or none). That could leave the door open for additional values like high-contrast etc.

@mmmulani
Copy link
Contributor

we should have a listener pattern here instead, since dark/night mode can change on the fly, which should cause a re-render.

@cpojer
Copy link
Contributor

cpojer commented May 13, 2019

We had a conversation about this at FB and the conclusion seems to be that this shouldn't be part of Platform because it isn't tied to the platform but rather a user setting that can change at anytime, unlike Platform.

My suggestion would be to make this a third-party native module first, and consider it for inclusion to React Native later.

@cpojer cpojer closed this May 13, 2019
@necolas
Copy link
Contributor

necolas commented May 13, 2019

My suggestion would be to make this a third-party native module first, and consider it for inclusion to React Native later.

This is going to be a very common feature to support, including at FB, so it might be worth getting ahead of the API design churn and suggesting something ourselves soon.

@cpojer
Copy link
Contributor

cpojer commented May 13, 2019

I'm fine considering this for inclusion into core if people agree but we should discuss a proposal in https://github.com/react-native-community/discussions-and-proposals first.

@turnrye
Copy link
Contributor Author

turnrye commented May 13, 2019

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. Platform: Android Android applications. Type: Enhancement A new feature or enhancement of an existing feature.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

7 participants