useDarkScheme React hook – simple hook for detecting dark scheme in native settings

useDarkScheme.js

import {useState, useEffect, useRef} from "react"

export default function () {
    const {current} = useRef(matchMedia("(prefers-color-scheme: dark)"));
    const [match, setMatches] = useState(current.matches);

    useEffect(() => {
        const updateMatch = () => {
             setMatch(current.matches);
        };

        current.addEventListener(
            "change", updateMatch
        );

        return () => {
            current.removeEventListener(
                "change", 
                updateMatch
            );
        };
    }, []);

    return match;
}