Is there any way to know that device mode is dark or light? in react native-CodePudding

I want to change the app color by mode of device whether if it is dark or light.

But I don't know how to check that my device is in dark mode or in light mode.

Please advice something.

CodePudding user response：

You can do this with the Appearance module, via

import { Appearance } from 'react-native';

const colorScheme = Appearance.getColorScheme();
if (colorScheme === 'dark') {
  // Use dark color scheme
}

You can also check whether the user has changed those settings by adding a listener like such:

static addChangeListener(listener)

Look here for the documentation.

CodePudding user response：

Use the useColorScheme hook in React Native to check the device's color scheme. This hook will return either 'dark' or 'light', depending on the device's current color scheme.

Here's an example of how you might use it in your code:

import { useColorScheme } from 'react-native';

function MyComponent() {
  const colorScheme = useColorScheme();

  if (colorScheme === 'dark') {
    // Do something for dark mode
  } else {
    // Do something for light mode
  }
}

This way, you can detect whether the device is currently in dark mode or light mode and change your app's behavior accordingly. Keep in mind that this feature is only available on devices running iOS 13 or later, or Android 10 or later.