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.
With React Native, you can detect dark mode by checking if the Appearance.getColorScheme()
method returns dark
.
When defining a ThemeProvider
you can return a different theme when dark mode is active.
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;