How to change text color between dark mode and light mode

1
votes

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.

2
iosreact-native

2 Answers

0
votes

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);
-1
votes

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