@dazl/color-scheme/dist/react.js

Color scheme utilities and tools

import { useState, useEffect } from 'react';
const api = typeof window !== 'undefined' ? window.colorSchemeApi : null;
// react hook for color scheme management
export function useColorScheme() {
    const [{ config, resolved }, setScheme] = useState({
        config: 'system',
        resolved: 'light',
    });
    useEffect(() => {
        // eslint-disable-next-line react-hooks/set-state-in-effect
        setScheme(api.currentState);
        return api.subscribe((currentState) => setScheme(currentState));
    }, []);
    return {
        configScheme: config,
        resolvedScheme: resolved,
        setColorScheme: (config) => {
            if (!api)
                return;
            api.config = config;
        },
        isLight: resolved === 'light',
        isDark: resolved === 'dark',
        rootCssClass: api?.getRootCssClass(resolved) || '',
    };
}