18 lines
725 B
TypeScript
18 lines
725 B
TypeScript
import { useEffect, useState } from 'react';
|
|
|
|
/**
|
|
* Tracks whether dark mode is active by observing the html.dark class.
|
|
* Useful in components that don't receive the theme as a prop (showcase,
|
|
* pricing backdrop) but must keep canvas/map content in sync with it.
|
|
*/
|
|
export function useIsDarkTheme(): boolean {
|
|
const [isDark, setIsDark] = useState(() => document.documentElement.classList.contains('dark'));
|
|
useEffect(() => {
|
|
const observer = new MutationObserver(() =>
|
|
setIsDark(document.documentElement.classList.contains('dark'))
|
|
);
|
|
observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] });
|
|
return () => observer.disconnect();
|
|
}, []);
|
|
return isDark;
|
|
}
|