Begrip: useColorScheme

De useColorScheme hook kan gebruikt worden om het voorkeursthema van de gebruiker uit te lezen.

De hook geeft een string terug die één van onderstaande waarden heeft:

• light: De gebruiker verkiest een licht thema
• dark: De gebruiker verkiest een donker thema
• null: De gebruiker heeft geen voorkeur opgegeven. Normaliter is dit enkel het geval op oudere toestellen waar deze optie nog niet beschikbaar was.

import {useColorScheme} from 'react-native'

const Foo: FunctionComponent = () => {
    const colorScheme = useColorScheme()

    if (colorScheme === 'light') {
        return <>{/* A light styled component */}</>
    } else if (colorScheme === 'dark') {
        return <>{/* A dark styled component */}</>
    } else if (colorsScheme === null) {
        return <>{/* A component styled in the app's prefered theme */}</>
    }
}