The useColorScheme hook in React allows you to access the color scheme preference of a device, typically light or dark mode, so that you can dynamically update your application's styles to match the preferred color scheme.

Supported color schemes

• light (default) - The user prefers a light color theme.
• dark - The user has explicitly set a preference for dark mode.
• null - The user has not indicated a preferred color theme.

*Example: Simple replace the code in AppPro.tsx with the following code and run the app.

import React, { useState } from 'react'
import { View, Text, StyleSheet, TouchableOpacity } from 'react-native'
 
function AppPro():JSX.Element{
 
    const [mode, setMode] = useState<'light' | 'dark'>('light')
    const [bgColor, setBgColor] = useState('#fff')
 
    const switchMode = () => {
        if (mode === 'light') {
            setMode('dark')
            setBgColor('#333')
        } else {
            setMode('light')
            setBgColor('#fff')
        }
    }
 
    return(
        <View style={[styles.container, { backgroundColor: bgColor }]}>
            <Text style={mode === 'light' ? styles.blackText : styles.whiteText}>
                Hello World!
            </Text>
            <TouchableOpacity onPress={switchMode} style={styles.button}>
                <Text style={mode === 'light' ? styles.blackText : styles.whiteText}>
                    Switch Mode
                </Text>
            </TouchableOpacity>
        </View>
    )
}
 
const styles = StyleSheet.create({
    container:{
        flex:1,
        alignItems:'center',
        justifyContent:'center'
    },
    whiteText:{
        color:'#FFFFFF'
    },
    blackText:{
        color:'#000000'
    },
    button: {
        padding: 10,
        backgroundColor: '#ccc',
        marginTop: 20
    }
})
 
export default AppPro

Don't confuse with the code above. It's just an example to show you how to use the useColorScheme hook in React. We will learn how to use it in our project soon.

The useColorScheme React hook provides and subscribes to color scheme updates from the Appearance module.

The useColorScheme hook is imported from the react-native library and is used to determine the current color scheme of the device. This hook returns either 'light' or 'dark' depending on the device's current color scheme setting.

import {Appearance} from 'react-native';

The Appearance module exposes information about the user's appearance preferences, such as their preferred color scheme (light or dark).

Developer notes

Example

You can use the Appearance module to determine if the user prefers a dark color scheme:

const colorScheme = Appearance.getColorScheme();
if (colorScheme === 'dark') {
  // Use dark color scheme
}

Although the color scheme is available immediately, this may change (e.g. scheduled color scheme change at sunrise or sunset). Any rendering logic or styles that depend on the user preferred color scheme should try to call this function on every render, rather than caching the value. For example, you may use the useColorScheme React hook as it provides and subscribes to color scheme updates, or you may use inline styles rather than setting a value in a StyleSheet.

Reference

Methods

getColorScheme()

static getColorScheme(): 'light' | 'dark' | null;

Indicates the current user preferred color scheme. The value may be updated later, either through direct user action (e.g. theme selection in device settings) or on a schedule (e.g. light and dark themes that follow the day/night cycle).

Supported color schemes:

• light: The user prefers a light color theme.
• dark: The user prefers a dark color theme.
• null: The user has not indicated a preferred color theme.

See also: useColorScheme hook.

Note: getColorScheme() will always return light when debugging with Chrome.

addChangeListener()

static addChangeListener(
  listener: (preferences: {colorScheme: 'light' | 'dark' | null}) => void,
): NativeEventSubscription;

Add an event handler that is fired when appearance preferences change.