Skip to main content
Logo Appt Light

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;

Feedback?

Let us know!