Dark mode on React Native
Dark mode darkens background colours and provides a more comfortable viewing experience in low light. This is essential for many visually impaired people since a light background colour can be painful or even impossible to look at for an extended period of time. But also people who have problems with their concentration, for example due to a brain disorder, benefit greatly from dark mode.
Met React Native weet je dat donkere modus geactiveerd is wanneer de Appearance.getColorScheme() methode de waarde "dark" teruggeeft.
Bij het definiëren van een ThemeProvider kun je een ander thema instellen wanneer donkere modus geactiveerd is.
import { useColorScheme } from 'react-native';
import { ThemeProvider } from 'styled-components';
const darkTheme = {
primary: "#f967e9",
};
const lighTheme = {
primary: "#cc00b9"
};
const App: React.FC = () => {
const scheme = useColorScheme();
return (
<ThemeProvider theme={scheme === 'dark' ? darkTheme : lightTheme}>
{props.children}
</ThemeProvider>
);
}
export default App;