如何在深色模式和浅色模式之间更改文本颜色

Question

I have a basic text like this in my react native app

<Text style={{color:"#000000"}}>Text on IOS</Text>

What i want to do is to switch color to white when the phone gets switched to dark mode for IOS and switch it back to black if mode changed again to light and first how to active that if possible without restarting the app and without affecting android. second how to detect that the mode has been switched to dark or light.

Answer 1

React-native now has hook useColorScheme which you can use to track theme changes

import { useColorScheme } from 'react-native';

const App = () => {
  const scheme = useColorScheme();
  return (<Text style={{ color: scheme === 'dark' ? 'white' : 'black'}}>Hello World</Text>);
};

If you do not use hooks and functional components, you can use Appearance class and listen for changes yourself:

import { Appearance } from 'react-native';
...
// get current scheme
Appearance.getColorScheme()

// listen for changes
Appearance.addChangeListener(({ colorScheme }) => console.log(colorScheme);

Answer 2

Try to use a global variable for setting theme. Create a common file and get the styles from there using global variable.