@particle-network/ui-shared/dist/theme.js

Shared utilities for Particle Network design system

import { useEffect, useState } from "react";
function getCurrentTheme() {
    const html = document.documentElement;
    if (html.hasAttribute('data-theme')) return 'dark' === html.getAttribute('data-theme') ? 'dark' : 'light';
    return html.classList.contains('dark') ? 'dark' : 'light';
}
function useTheme() {
    const [theme, setTheme] = useState(getCurrentTheme);
    useEffect(()=>{
        const observer = new MutationObserver(()=>{
            const newTheme = getCurrentTheme();
            if (newTheme !== theme) setTheme(newTheme);
        });
        observer.observe(document.documentElement, {
            attributes: true,
            attributeFilter: [
                'class',
                'data-theme'
            ]
        });
        return ()=>observer.disconnect();
    }, [
        theme
    ]);
    return theme;
}
export { useTheme };