Detect iPhone iOS Dark Mode w/ React Native

Question

I know this is possible using Swift:

override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
    if traitCollection.userInterfaceStyle == .light {
        print("Light mode")
    } else {
        print("Dark mode")
    }
}

However, is there a way of doing this with JavaScript ?

Answer 1

You don't need react-native-dark-mode since 0.62.2. You can use

import { Appearance } from 'react-native'
...
Appearance.getColorScheme() === 'dark'

Here's a commit that adds it: https://github.com/facebook/react-native/commit/63fa3f21c5ab308def450bffb22054241a8842ef

Answer 2

Yes...

https://www.npmjs.com/package/react-native-dark-mode

OR

https://github.com/codemotionapps/react-native-dark-mode

import { useDarkMode } from 'react-native-dark-mode'

function Component() {
  const isDarkMode = useDarkMode()
  return <View style={{ backgroundColor: isDarkMode ? 'black' : 'white' }} />
}