@patreon/studio/module/components/ColorSchemeProvider/index.jsx

Patreon Studio Design System

'use client';
import React, { useContext, useEffect, useState } from 'react';
import { getDefaultColorSchemeForTokenColorMode } from '../../utilities/token-mode';
export const ColorSchemeContext = React.createContext('light');
export const useCurrentColorScheme = () => useContext(ColorSchemeContext);
export function ColorSchemeProvider({ tokenColorMode, children }) {
    const [currentColorScheme, setCurrentColorScheme] = useState(getDefaultColorSchemeForTokenColorMode(tokenColorMode));
    useEffect(() => {
        if (tokenColorMode === 'auto') {
            if (window.matchMedia) {
                const colorSchemeMedia = window.matchMedia('(prefers-color-scheme: dark)');
                const handleColorSchemeChange = (event) => {
                    setCurrentColorScheme(event.matches ? 'dark' : 'light');
                };
                setCurrentColorScheme(colorSchemeMedia.matches ? 'dark' : 'light');
                // Older versions of Safari implement `addListener` rather than `addEventListener`.
                // In this case, we can opt out of this subscription.
                if (typeof colorSchemeMedia.addEventListener !== 'function') {
                    return () => {
                        // Nothing to do.
                    };
                }
                colorSchemeMedia.addEventListener('change', handleColorSchemeChange);
                return () => {
                    colorSchemeMedia.removeEventListener('change', handleColorSchemeChange);
                };
            }
        }
        else {
            setCurrentColorScheme(getDefaultColorSchemeForTokenColorMode(tokenColorMode));
        }
        // TODO (legacied consistent-return)
        // This failure is legacied in and should be updated. DO NOT COPY.
        // eslint-disable-next-line consistent-return
        return;
    }, [tokenColorMode]);
    return <ColorSchemeContext.Provider value={currentColorScheme}>{children}</ColorSchemeContext.Provider>;
}
//# sourceMappingURL=index.jsx.map